Introduction to Document Structure

Creating well-structured HTML documents is fundamental to building accessible, maintainable, and SEO-friendly websites. While it might be tempting to use <div> elements everywhere, understanding and using semantic HTML elements properly can significantly improve your website's quality and user experience.

Basic Sections of a Document

A well-structured HTML document typically contains several key sections:

• Header - Contains introductory content or navigational aids
• Navigation - Main navigation functionality
• Main content - The primary content of your page
• Sidebar - Secondary content related to the main content
• Footer - Bottom section with additional information

Semantic HTML Elements

Let's explore the key semantic elements that help create meaningful document structure:

1. The <header> Element

The <header> element represents introductory content. It might contain:

<header>
  <h1>Site Title</h1>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>

2. The <nav> Element

The <nav> element is used for major navigation blocks. It's best used for primary navigation menus and other important navigational features:

<nav class="main-navigation">
  <ul>
    <li><a href="/products">Products</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

3. The <main> Element

The <main> element represents the primary content of your page. There should be only one <main> element per page:

<main>
  <h1>Article Title</h1>
  <article>
    <p>Main content goes here...</p>
  </article>
</main>

4. The <article> Element

Use the <article> element for self-contained content that could be distributed and reused independently:

<article>
  <h2>Blog Post Title</h2>
  <p>Blog post content...</p>
  <footer>
    <p>Posted on <time datetime="2025-06-14">June 14, 2025</time></p>
  </footer>
</article>

5. The <section> Element

The <section> element is used to group related content. Each section typically has its own heading:

<section>
  <h2>Featured Products</h2>
  <ul>
    <li>Product 1</li>
    <li>Product 2</li>
  </ul>
</section>

6. The <aside> Element

The <aside> element is used for content that is tangentially related to the main content:

<aside>
  <h3>Related Articles</h3>
  <ul>
    <li><a href="#">Related Article 1</a></li>
    <li><a href="#">Related Article 2</a></li>
  </ul>
</aside>

7. The <footer> Element

The <footer> element typically contains information about the section it's within, such as author, copyright, or related links:

<footer>
  <p>© 2025 Your Company. All rights reserved.</p>
  <nav>
    <ul>
      <li><a href="/privacy">Privacy Policy</a></li>
      <li><a href="/terms">Terms of Service</a></li>
    </ul>
  </nav>
</footer>

Using <div> Appropriately

While semantic elements should be your first choice, there are legitimate uses for the <div> element. Use it when:

• No other semantic element is appropriate
• You need a container purely for styling purposes
• Creating layout containers that don't carry specific meaning

For example, a shopping cart widget might use a div:

<div class="shopping-cart">
  <h2>Shopping Cart</h2>
  <ul>
    <li>Product 1 - $99.99</li>
    <li>Product 2 - $49.99</li>
  </ul>
  <p>Total: $149.98</p>
</div>

Special Elements: Line Breaks and Horizontal Rules

The <br> Element

Use the <br> element for line breaks within text, particularly useful for:

• Addresses
• Poetry
• Song lyrics

<p>
  John Doe<br>
  123 Main Street<br>
  Anytown, ST 12345
</p>

The <hr> Element

The <hr> element represents a thematic break in content. Use it to separate distinct sections or scenes in your content:

<p>End of Chapter 1</p>
<hr>
<p>Beginning of Chapter 2</p>

Best Practices for Document Structure

1. Use Semantic Elements First: Always try to use semantic elements before falling back to <div>
2. Proper Heading Hierarchy: Maintain a logical heading structure (h1-h6)
3. Meaningful Navigation: Use <nav> for important navigation sections
4. Clear Content Sections: Use <section> and <article> to organize content logically
5. Complementary Content: Use <aside> for related but separate content

Planning Website Structure

When planning a multi-page website, consider these steps:

1. Common Elements: Identify elements that will appear on all pages (navigation, footer)
2. Page Layouts: Sketch basic layouts for different page types
3. Content Organization: Group related content together
4. Navigation Structure: Plan how pages will link together
5. Information Architecture: Create a sitemap showing page relationships

Conclusion

Proper HTML document structure is crucial for creating maintainable, accessible websites. By using semantic HTML elements appropriately, you create documents that are:

• More accessible to screen readers and assistive technologies
• Easier to maintain and update
• Better optimized for search engines
• More future-proof as web standards evolve

Remember, the goal is not just to make your content look right, but to give it meaning and structure that both humans and machines can understand.