HTML Semantic Elements

Using Semantic HTML

Semantic elements clearly describe their meaning to both the browser and the developer.

Using semantic HTML improves accessibility, SEO, and code maintainability.

<header>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
  </nav>
</header>

<main>
  <article>
    <h2>Article Title</h2>
    <p>Article content...</p>
  </article>
  
  <aside>
    <h3>Related Links</h3>
  </aside>
</main>

<footer>
  <p>&copy; 2024 My Website</p>
</footer>
  • <header> - Page or section header
  • <nav> - Navigation links
  • <main> - Main content
  • <article> - Independent content
  • <section> - Thematic grouping
  • <aside> - Side content
  • <footer> - Page or section footer

Try Semantic HTML

<header>
  <h1>My Blog</h1>
  <nav>
    <a href="#">Home</a> |
    <a href="#">About</a> |
    <a href="#">Contact</a>
  </nav>
</header>

<main>
  <article>
    <h2>My First Blog Post</h2>
    <p>This is the content of my blog post...</p>
  </article>
</main>

<footer>
  <p>&copy; 2024 My Blog. All rights reserved.</p>
</footer>

Note: Semantic elements make your HTML more meaningful and accessible to screen readers and search engines.