loader

HTML Document Structure

Anatomy of an HTML Document

Every HTML document follows a standard structure that provides the foundation for web content. Understanding this structure is essential for creating well-formed HTML documents.

DOCTYPE Declaration

The DOCTYPE declaration informs the browser about the HTML version being used. For HTML5, the declaration is simple:

<!DOCTYPE html>

This should be the very first line of your HTML document.

HTML Element

The <html> element is the root element that contains all other HTML elements. It's best practice to include the lang attribute to specify the language of your document:

<html lang="en">
  
</html>

Head Element

The <head> element contains meta-information about the document that isn't displayed on the page:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
  <link rel="stylesheet" href="styles.css">
  <script src="script.js"></script>
</head>

Body Element

The <body> element contains all the content that is visible to users:

<body>
  <header>
    <h1>Website Title</h1>
  </header>
  
  <main>
    <p>This is the main content.</p>
  </main>
  
  <footer>
    <p>Copyright 2023</p>
  </footer>
</body>

Essential Head Elements

Element Purpose Example
<title> Defines the document title shown in browser tabs and bookmarks <title>My Website</title>
<meta> Provides metadata about the HTML document <meta name="description" content="Website description">
<link> Links to external resources like CSS files <link rel="stylesheet" href="styles.css">
<script> Embeds or links to JavaScript code <script src="script.js"></script>
<style> Contains CSS styling information <style>body { color: blue; }</style>
<base> Specifies a base URL for all relative URLs <base href="https://example.com/">

Semantic Structure Elements

HTML5 introduced semantic elements that clearly describe their meaning to both the browser and the developer. These elements help create a more structured and accessible document:

<header>

Represents introductory content, typically a group of introductory or navigational aids. May contain logo, heading elements, search form, etc.

<header>
  <h1>Site Title</h1>
  <nav>...</nav>
</header>

<nav>

Represents a section of a page that contains navigation links, either within the current document or to other documents.

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
  </ul>
</nav>

<main>

Represents the dominant content of the body of a document. There should be only one <main> element in a document.

<main>
  <h2>Main Content</h2>
  <p>This is the main content area.</p>
</main>

<article>

Represents a self-contained composition in a document, which is intended to be independently distributable or reusable.

<article>
  <h2>Article Title</h2>
  <p>Article content...</p>
</article>

<section>

Represents a standalone section of content that could be distributed and reused independently.

<section>
  <h2>Section Title</h2>
  <p>Section content...</p>
</section>

<aside>

Represents a portion of a document whose content is only indirectly related to the main content.

<aside>
  <h3>Related Links</h3>
  <ul>
    <li><a href="#">Link 1</a></li>
  </ul>
</aside>

<footer>

Represents a footer for its nearest sectioning content or sectioning root element.

<footer>
  <p>Copyright © 2023</p>
  <address>Contact: info@example.com</address>
</footer>

<figure> and <figcaption>

Used to encapsulate media such as an image, diagram, or code snippet, along with its caption.

<figure>
  <img src="image.jpg" alt="Description">
  <figcaption>Caption for the image</figcaption>
</figure>

Complete HTML5 Document Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A sample HTML5 document showing proper structure">
    <title>HTML5 Document Structure Example</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js" defer></script>
</head>
<body>
    <header>
        <h1>My Website</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section>
            <h2>Welcome to Our Website</h2>
            <p>This is an example of a well-structured HTML5 document.</p>
        </section>

        <article>
            <h2>Latest News</h2>
            <p>Here's our latest article content.</p>
            
            <figure>
                <img src="image.jpg" alt="Relevant image">
                <figcaption>Figure 1: An example image</figcaption>
            </figure>
        </article>

        <aside>
            <h3>Related Information</h3>
            <ul>
                <li><a href="#">Related Link 1</a></li>
                <li><a href="#">Related Link 2</a></li>
            </ul>
        </aside>
    </main>

    <footer>
        <p>© 2023 My Website. All rights reserved.</p>
        <address>
            Contact: <a href="mailto:info@example.com">info@example.com</a>
        </address>
    </footer>
</body>
</html>