Using Semantic HTML5 Elements

GEO

Using Semantic HTML5 Elements

Problem

Semantic HTML5 elements (article, section, nav, main, etc.) help search engines and AI understand page structure. Using only <div> tags provides no structural meaning.

Best Practices

1. Use <main> for primary content

2. Use <article> for self-contained content

3. Use <nav> for navigation

4. Use <header>/<footer> for page/section headers/footers

5. Use <section> for thematic groupings

6. Use <aside> for tangentially related content

<body>
  <header>Site header</header>
  <nav>Navigation</nav>
  <main>
    <article>
      <header><h1>Title</h1></header>
      <section>Content section</section>
    </article>
    <aside>Sidebar</aside>
  </main>
  <footer>Site footer</footer>
</body>

Benefits

- Better accessibility for screen readers

- Improved SEO signal clarity

- Easier for AI to extract and cite content

- Better code maintainability