Семантический HTML: зачем header, nav, main и footer

<div> подходит для всего, но ничего не сообщает. Теги вроде <nav> и <main> сообщают браузерам, экранным дикторам и поисковикам, что за часть страницы перед ними.

<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>

• На странице — один <main>.
• Заголовки по порядку: h1 → h2 → h3, не пропускайте уровни.
• Для кнопок — <button>, для ссылок — <a>; <div onclick> не работает с клавиатуры.