Semantic HTML: what header, nav, main and footer are for

<div> fits anything but says nothing. Tags like <nav> and <main> tell browsers, screen readers and search engines what each part of the page is.

<body>
  <header>
    <h1>My site</h1>
    <nav><a href="/">Home</a> <a href="/blog">Blog</a></nav>
  </header>
  <main>
    <article>
      <h2>Post title</h2>
      <p>…</p>
    </article>
    <aside>Related links</aside>
  </main>
  <footer>© 2026</footer>
</body>

• Have only one <main> per page.
• Keep headings in order: h1 → h2 → h3, do not skip levels.
• Use <button> for buttons and <a> for links; a <div onclick> does not work with the keyboard.