Aller au contenu principal
Guide

Semantic HTML

HTML markup that conveys meaning and structure about the content, using appropriate elements like article, nav, and section rather than generic divs.

Publié

Définition

HTML markup that conveys meaning and structure about the content, using appropriate elements like article, nav, and section rather than generic divs.

Semantic HTML uses elements that describe their meaning to both the browser and the developer, rather than just describing their presentation.

Key Elements

  • <header>: Introductory content
  • <nav>: Navigation links
  • <main>: Primary content
  • <article>: Self-contained content
  • <section>: Thematic grouping
  • <aside>: Tangentially related content
  • <footer>: Footer information

Benefits

  • Accessibility: Screen readers can navigate by landmark
  • SEO: Search engines understand content structure
  • Maintainability: Code is easier to understand
  • Portability: Content works across devices

Common Mistakes

  • Using <div> for everything
  • Skipping heading hierarchy
  • Missing <main> landmark
  • Overusing <section> when <div> is appropriate