Semantic HTML elements are used

HTML built entirely from <div> and <span> elements has no machine-readable meaning. Screen readers cannot distinguish navigation from content from footers — everything is an undifferentiated block. Semantic elements like <nav>, <main>, <header>, and <footer> expose ARIA landmark roles automatically, letting screen reader users jump directly to the content region they need. WCAG 2.2 SC 1.3.1 (Info and Relationships) and SC 4.1.2 (Name, Role, Value) both require structure to be programmatically determinable. Search engines also use semantic structure to understand page organization, affecting how content is indexed and ranked.

Replace structural <div> wrappers with their semantic equivalents. At minimum, every page should use these four elements:

<header>
  <nav>...</nav>
</header>

<main>
  <section>
    <article>...</article>
  </section>
</main>

<footer>...</footer>

In React/Next.js components, swap container <div> elements for <main>, <section>, or <article> based on the content's role. Use <section> when the content could appear in a table of contents. Use <article> for self-contained content (blog posts, product cards, comments). Do not nest <main> — there should be exactly one per page.