RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/html-course-structure-of-an-html-document/ below:

HTML Course | Structure of an HTML Document

Last Updated : 11 Jul, 2025

HTML (Hypertext Markup Language) is used in over 95% of websites and is the foundation of all web pages. It provides the basic structure and content layout. For beginners in web development, learning HTML is the essential first step.

Structure of an HTML Document What is an HTML Document?

HTML is a markup language used for structuring content on the web. It consists of elements (tags) that describe the content and structure of a webpage. These elements are enclosed in angle brackets (< >) and come in pairs, such as opening and closing tags. HTML helps browsers interpret and display content like text, images, links, videos, and more.

Structure of an HTML Document

An HTML document is essentially a series of nested elements that work together to form a complete webpage. The document follows a standard structure to ensure consistency and compatibility across different browsers.

index.html


 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <title>Structure of HTML Document</title>
</head>
<body>
    <!-- Main content of website -->
    <h1>GeeksforGeeks</h1>
    <p>A computer science portal for geeks</p>
</body>
</html>

Let’s see each part of this structure to understand its function and importance.

1. <!DOCTYPE html>: Declaring the Document Type

The <!DOCTYPE html> declaration is used to specify the version of HTML. In this case, it indicates that the document is written in HTML5, which is the latest version of HTML.

2. <html>: The Root Element

The <html> element is the root element of the HTML document. Everything inside this element is considered part of the HTML document.

3. <head>:Metadata of the Document

The <head> section contains metadata about the document that isn't displayed on the webpage. This section includes important elements like:

<meta charset="UTF-8">: Specifies the character encoding for the document (UTF-8 supports most characters from all languages).
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Controls the layout on mobile devices by setting the viewport width and scaling.

4. <body>:Visible Content of the Webpage

The <body> tag contains the actual content of the webpage that will be visible to users, such as text, images, and links.

HTML tags are structural components enclosed in angle brackets. They are typically opened and closed with a forward slash (e.g., <h1></h1>). Some tags are self-closing, while others support attributes like width, height, and controls for defining properties or storing metadata.

There are generally two types of tags in HTML

Paired Tags: These tags come in pairs i.e. they have both opening(< >) and closing(</ >) tags.
Empty Tags: These tags are self-closing and do not require a closing tag.”

Below is an example of a <b> tag in HTML, which tells the browser to bold the text inside it.

Understanding these key tags will allow you to organize content effectively and create more readable and accessible webpages.

Headings (<h1> to <h6>): Headings are important for structuring the content within the <body> section. They define the hierarchy of information, where <h1> is the highest-level heading.
Paragraphs (<p>): The <p> tag is used for creating paragraphs, which help to group text into readable sections. This tag automatically adds some spacing between paragraphs to improve readability.
Images (<img>): The <img> tag is used to add images to a webpage. It requires the src attribute to specify the image path and the alt attribute for accessibility.
Links (<a>):Links are created with the <a> tag. The href attribute defines the destination URL, and the text within the <a> tag serves as the clickable link text.
Lists (<ul>, <ol>, <li>): Lists allow you to organize items in bullet points (<ul>) or numbered order (<ol>). Each item within a list is wrapped in <li> tags.
Divisions (<div>): The <div> tag is a container used to group other elements together, often for layout. It does not add any style or structure on its own but is useful for applying CSS styles to sections of content.

Best Practices for Writing HTML

Here are some best practices to follow when writing HTML:

Use semantic HTML: Use appropriate tags such as <header>, <footer>, <article>, and <section> to improve the structure and accessibility of your page.
Include alt text for images: Always use the alt attribute for images to improve accessibility.
Minimize inline styles and scripts: Keep your HTML clean by linking to external CSS and JavaScript files instead of using inline styles or scripts.

for more details follow this article => HTML Tags – A to Z List

Conclusion

Learning how an HTML page is built is the first step in web development. By using basic tags, you can start making simple web pages and understand how websites are made.

HTML Course Structure of an HTML Document

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4