HTML Document Structure

Learn how to properly structure your HTML documents using semantic elements for better accessibility, SEO, and maintainability.

The Importance of Semantic Structure

Semantic HTML provides meaning to your content rather than just presentation. It helps:

Accessibility

Screen readers use semantic tags to navigate content

SEO Benefits

Search engines prioritize well-structured content

Responsive Design

Easier to create mobile-friendly layouts

Maintainability

Clear structure makes code easier to update

Semantic Structure Example
<!DOCTYPE html>
<html>
<head>
  <title>Document Title</title>
</head>
<body>
  <header>...</header>
  <nav>...</nav>
  <main>
    <article>...</article>
    <section>...</section>
  </main>
  <aside>...</aside>
  <footer>...</footer>
</body>
</html>

Semantic HTML Elements

<header>

Introductory content or navigation

Purpose:

Contains site headers, logos, and primary navigation

Benefits:

  • Improves accessibility
  • Helps with SEO
Example:
<header>
  <h1>Site Title</h1>
  <nav>...</nav>
</header>

<nav>

Navigation links

Purpose:

Should wrap major navigation blocks

Benefits:

  • Screen reader friendly
  • Clear semantic meaning
Example:
<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

<main>

Primary content

Purpose:

Contains the dominant content of the document

Benefits:

  • Only one per page
  • Helps with keyboard navigation
Example:
<main>
  <article>...</article>
  <section>...</section>
</main>

<article>

Self-contained composition

Purpose:

Content that makes sense on its own

Benefits:

  • Syndication ready
  • Improves SEO
Example:
<article>
  <h2>Blog Post Title</h2>
  <p>Content...</p>
</article>

<section>

Thematic grouping

Purpose:

Groups related content together

Benefits:

  • Better document outline
  • Improved readability
Example:
<section>
  <h2>Chapter Title</h2>
  <p>Content...</p>
</section>

<aside>

Side content

Purpose:

Content indirectly related to main content

Benefits:

  • Clear content separation
  • Better mobile layouts
Example:
<aside>
  <h3>Related Links</h3>
  <ul>...</ul>
</aside>

<footer>

Closing content

Purpose:

Contains footer information

Benefits:

  • Expected location
  • Accessibility benefits
Example:
<footer>
  <p>Copyright © 2023</p>
</footer>

Common Structural Patterns

Blog Layout

<body>
  <header>
    <h1>Blog Title</h1>
    <nav>...</nav>
  </header>
  
  <main>
    <article>
      <h2>Post Title</h2>
      <p>Content...</p>
    </article>
    
    <aside>
      <h3>About Author</h3>
      <p>Bio...</p>
    </aside>
  </main>
  
  <footer>...</footer>
</body>

E-commerce Layout

<body>
  <header>
    <nav>Main Navigation</nav>
  </header>
  
  <main>
    <aside class="sidebar">
      <nav>Filters</nav>
    </aside>
    
    <section class="products">
      <article class="product">...</article>
      <article class="product">...</article>
    </section>
  </main>
  
  <footer>...</footer>
</body>

Practice Semantic Structure

Try building properly structured documents in our interactive editor.

Open HTML Editor

Previous

HTML Basics

Next

HTML Elements