Семантическая разметка

<header>…логотип, навигация…</header>
<nav aria-label="Основная">…</nav>
<main>
  <article>
    <h1>Заголовок страницы</h1>
    <section><h2>Раздел</h2>…</section>
  </article>
  <aside>…связанное…</aside>
</main>
<footer>…</footer>

Что важно знать

• Один <h1> на страницу и иерархия заголовков без пропусков — по ним скринридеры строят оглавление.
• Ссылка (<a href>) — переход на другой адрес, кнопка (<button>) — действие на странице. Не наоборот.
• Списки — <ul>/<ol>, таблицы с данными — <table> с <th>.
• <img> всегда с alt: описание для смысловых картинок, пустой alt="" для декоративных.
• Блочные и строчные элементы, вложенность (нельзя <div> внутри <p>).
• Мета-теги в <head>: charset, viewport, title, description.