Content Sectioning Elements

Master the semantic elements that organize and structure your content into meaningful sections. These elements create landmarks for assistive technologies and improve SEO.

The <header> Element

Represents introductory content for a section or page. Can contain headings, navigation, logos, and other introductory elements.

Page and Section Headers

Different uses of the header element

<!-- Page header -->
<header>
  <img src="logo.png" alt="Acme Corporation">
  <h1>Acme Corporation</h1>
  <p>Quality products since 1990</p>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/products">Products</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>

<!-- Article header -->
<article>
  <header>
    <h2>Understanding Web Accessibility</h2>
    <p>Published on <time datetime="2024-11-16">November 16, 2024</time></p>
    <p>By <address>Jane Smith, Web Developer</address></p>
    <p>Reading time: 5 minutes</p>
  </header>
  <p>Article content goes here...</p>
</article>

Explanation:

The header element can be used multiple times in a document - once for the page header and again within sections or articles. It should contain introductory content relevant to its parent element.

Accessibility Tips:

  • Use header as a landmark for screen reader navigation
  • Include site logo and main navigation in page header
  • Article headers should contain metadata like publication date
  • Ensure header content is relevant to its section

The <nav> Element

Contains navigation links for the current document or related documents. Only use for major navigation sections.

Navigation Examples

Different types of navigation elements

<!-- Main site navigation -->
<nav aria-label="Main navigation">
  <ul>
    <li><a href="/" aria-current="page">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<!-- Breadcrumb navigation -->
<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/products/laptops">Laptops</a></li>
    <li aria-current="page">MacBook Pro</li>
  </ol>
</nav>

<!-- Table of contents -->
<nav aria-label="Table of contents">
  <h2>Contents</h2>
  <ol>
    <li><a href="#introduction">Introduction</a></li>
    <li><a href="#methods">Methods</a></li>
    <li><a href="#results">Results</a></li>
    <li><a href="#conclusion">Conclusion</a></li>
  </ol>
</nav>

Explanation:

The nav element should only be used for major navigation blocks. Use aria-label to distinguish between multiple nav elements, and aria-current to indicate the current page.

Accessibility Tips:

  • Use aria-label to distinguish multiple nav elements
  • Include aria-current='page' for the current location
  • Structure navigation as lists for screen readers
  • Ensure navigation is keyboard accessible

The <main> Element

Represents the main content of the document. There should be only one main element per page, and it shouldn't include repeated content like headers, footers, or navigation.

Main Content Structure

Proper use of the main element

<body>
  <header>
    <h1>My Blog</h1>
    <nav>
      <!-- Site navigation -->
    </nav>
  </header>

  <main id="main-content">
    <h2>Latest Articles</h2>
    
    <article>
      <header>
        <h3>Getting Started with Web Accessibility</h3>
        <time datetime="2024-11-16">November 16, 2024</time>
      </header>
      <p>Web accessibility ensures that websites work for everyone...</p>
    </article>
    
    <article>
      <header>
        <h3>CSS Grid Layout Guide</h3>
        <time datetime="2024-11-15">November 15, 2024</time>
      </header>
      <p>CSS Grid is a powerful layout system...</p>
    </article>
  </main>

  <aside>
    <h2>Popular Posts</h2>
    <!-- Sidebar content -->
  </aside>

  <footer>
    <!-- Site footer -->
  </footer>
</body>

Explanation:

The main element contains the primary content unique to that page. Skip links often target the main element, and screen readers use it as a landmark for navigation.

Accessibility Tips:

  • Use only one main element per page
  • Target main with skip links (id='main-content')
  • Exclude repeated content like navigation and footers
  • Main element serves as a landmark for screen readers

The <article> Element

Represents a self-contained piece of content that could be distributed independently, such as blog posts, news articles, or forum posts.

Article Element Examples

Self-contained content that makes sense on its own

<!-- Blog post article -->
<article>
  <header>
    <h2>The Importance of Semantic HTML</h2>
    <p>
      Published on <time datetime="2024-11-16">November 16, 2024</time>
      by <address rel="author">John Doe</address>
    </p>
    <p>Tags: 
      <a href="/tags/html">#HTML</a>
      <a href="/tags/accessibility">#Accessibility</a>
    </p>
  </header>
  
  <p>Semantic HTML forms the foundation of accessible web development...</p>
  
  <section>
    <h3>Why Semantics Matter</h3>
    <p>Semantic elements provide meaning to content...</p>
  </section>
  
  <footer>
    <p>Share this article:</p>
    <a href="#" aria-label="Share on Twitter">Twitter</a>
    <a href="#" aria-label="Share on Facebook">Facebook</a>
  </footer>
</article>

<!-- Product review article -->
<article>
  <header>
    <h2>MacBook Pro M3 Review</h2>
    <div>Rating: <span>★★★★☆</span> (4/5 stars)</div>
  </header>
  
  <section>
    <h3>Performance</h3>
    <p>The M3 chip delivers exceptional performance...</p>
  </section>
  
  <section>
    <h3>Design</h3>
    <p>Apple's design language continues to impress...</p>
  </section>
</article>

Explanation:

Articles are self-contained content that would make sense if syndicated or shared independently. They can contain their own headers, sections, and footers.

Accessibility Tips:

  • Each article should have a clear heading (h2, h3, etc.)
  • Include publication metadata in article headers
  • Use time element with datetime attribute for dates
  • Articles can be nested when appropriate (comments within posts)

The <section> Element

Represents a thematic grouping of content with a heading. Use when no other semantic element is more appropriate.

Section Element Usage

Organizing content into thematic sections

<article>
  <header>
    <h1>Complete Guide to Web Development</h1>
  </header>
  
  <section>
    <h2>Frontend Development</h2>
    <p>Frontend development involves creating user interfaces...</p>
    
    <section>
      <h3>HTML Fundamentals</h3>
      <p>HTML provides the structure for web pages...</p>
    </section>
    
    <section>
      <h3>CSS Styling</h3>
      <p>CSS controls the presentation and layout...</p>
    </section>
  </section>
  
  <section>
    <h2>Backend Development</h2>
    <p>Backend development handles server-side logic...</p>
    
    <section>
      <h3>Server Technologies</h3>
      <p>Popular backend technologies include...</p>
    </section>
    
    <section>
      <h3>Database Management</h3>
      <p>Databases store and organize application data...</p>
    </section>
  </section>
</article>

Explanation:

Sections represent thematic groupings of content and should almost always have a heading. They help create a logical document outline and can be nested.

Accessibility Tips:

  • Every section should have a heading (h2-h6)
  • Sections create landmarks for screen reader navigation
  • Use sections to create logical document structure
  • Consider using article instead if content is self-contained

The <aside> Element

Contains content that is tangentially related to the main content, such as sidebars, pull quotes, or related links.

Aside Element Examples

Related but separate content

<!-- Main page sidebar -->
<aside>
  <h2>Popular Posts</h2>
  <ul>
    <li><a href="/post1">Introduction to CSS Grid</a></li>
    <li><a href="/post2">JavaScript ES6 Features</a></li>
    <li><a href="/post3">Web Accessibility Basics</a></li>
  </ul>
  
  <h2>Categories</h2>
  <ul>
    <li><a href="/category/html">HTML (15)</a></li>
    <li><a href="/category/css">CSS (23)</a></li>
    <li><a href="/category/js">JavaScript (31)</a></li>
  </ul>
</aside>

<!-- Article-related sidebar -->
<article>
  <h1>Climate Change Solutions</h1>
  <p>Global warming requires immediate action...</p>
  
  <aside>
    <h2>Related Statistics</h2>
    <p>CO2 levels have increased by 40% since 1990...</p>
    <p>Renewable energy now accounts for 26% of global power...</p>
  </aside>
  
  <p>Continued article content...</p>
</article>

<!-- Pull quote -->
<article>
  <h1>The Future of Web Development</h1>
  <p>Web development continues to evolve rapidly...</p>
  
  <aside>
    <blockquote>
      "The best way to predict the future is to invent it."
      <cite>— Alan Kay</cite>
    </blockquote>
  </aside>
</article>

Explanation:

The aside element contains content that is related to but separate from the main content. It can be used for sidebars, pull quotes, advertisements, or related information.

Accessibility Tips:

  • Include descriptive headings in aside elements
  • Use aside for content that supplements the main content
  • Aside elements are complementary landmarks for screen readers
  • Consider the reading flow when placing aside elements

The <footer> Element

Contains footer information for its nearest sectioning content or root element. Typically includes copyright, contact info, or related links.

Footer Element Examples

Footer content for pages and sections

<!-- Page footer -->
<footer>
  <div>
    <h2>Contact Information</h2>
    <address>
      Acme Corporation<br>
      123 Main Street<br>
      City, State 12345<br>
      <a href="mailto:info@acme.com">info@acme.com</a><br>
      <a href="tel:+1234567890">+1 (234) 567-8900</a>
    </address>
  </div>
  
  <div>
    <h2>Quick Links</h2>
    <ul>
      <li><a href="/privacy">Privacy Policy</a></li>
      <li><a href="/terms">Terms of Service</a></li>
      <li><a href="/sitemap">Site Map</a></li>
    </ul>
  </div>
  
  <div>
    <h2>Follow Us</h2>
    <ul>
      <li><a href="https://twitter.com/acme" aria-label="Follow us on Twitter">Twitter</a></li>
      <li><a href="https://facebook.com/acme" aria-label="Follow us on Facebook">Facebook</a></li>
    </ul>
  </div>
  
  <p>&copy; 2024 Acme Corporation. All rights reserved.</p>
</footer>

<!-- Article footer -->
<article>
  <header>
    <h1>Understanding CSS Flexbox</h1>
  </header>
  
  <p>Article content about flexbox...</p>
  
  <footer>
    <p>
      Published on <time datetime="2024-11-16">November 16, 2024</time>
      by <address rel="author">Sarah Johnson</address>
    </p>
    <p>Filed under: <a href="/category/css">CSS</a>, <a href="/category/layout">Layout</a></p>
    <p>
      <a href="/css-grid-guide">Next: CSS Grid Guide →</a>
    </p>
  </footer>
</article>

Explanation:

Footer elements can appear at the page level or within articles and sections. They should contain information about their parent element, such as authorship, publication date, or related links.

Accessibility Tips:

  • Use address element for contact information
  • Include copyright and legal information in page footers
  • Article footers should contain metadata about the article
  • Provide accessible labels for social media links

Content Sectioning Best Practices

Document Structure Guidelines

  • • Use only one main element per page
  • • Include descriptive headings in all sections
  • • Use article for self-contained content
  • • Place navigation in nav elements
  • • Include skip links targeting main content

Accessibility Considerations

  • • Use aria-label to distinguish multiple nav elements
  • • Ensure logical heading hierarchy (h1→h2→h3)
  • • Test with screen readers and keyboard navigation
  • • Provide meaningful content in aside elements
  • • Use address element for contact information