Semantic HTML

Semantic HTML refers to using HTML elements that clearly describe their meaning and purpose, rather than just their presentation. This practice improves accessibility, SEO, and code maintainability by providing clear structural information about the content.

Key Elements

• <nav>: Navigation sections
• <main>: Main content area
• <article>: Self-contained content
• <section>: Thematic grouping
• <header>: Introductory content
• <footer>: Concluding content

Benefits

• Improved accessibility
• Better SEO performance
• Clearer code structure
• Enhanced maintainability
• Consistent cross-browser support

Example Usage

<nav aria-label="Main">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>
 
<main>
  <article>
    <h1>Article Title</h1>
    <section>
      <h2>Section Heading</h2>
      <p>Content goes here...</p>
    </section>
  </article>
</main>

Related Patterns

• Pagination
• Navigation Patterns