HTML, в котором понятен смысл

Сначала содержание, потом оформление

Представьте страницу с подборкой материалов. У неё есть шапка, навигация, основная область и подвал. Для этих частей подходят header, nav, main и footer. Самостоятельный материал можно оформить как article. Эти элементы описывают назначение областей; внешний вид по-прежнему задаёт CSS.

Начните с одного ясного заголовка первого уровня. Внутри статьи используйте заголовки второго уровня для крупных разделов и третьего для подразделов. Не выбирайте уровень заголовка ради его размера: размер легко изменить стилями.

Ссылка ведёт, кнопка действует

Переход на другую страницу — задача ссылки с href. Сброс фильтра или открытие меню — задача кнопки. Встроенные элементы уже поддерживают привычное взаимодействие с клавиатуры. Если сделать кнопку из div, эту логику придётся воспроизводить самостоятельно.

<main id="content">
  <article>
    <h1>Как устроен браузер</h1>
    <p>От HTML до изображения на экране.</p>
    <a href="/articles/css-grid/">Читать про Grid</a>
    <button type="button">Сбросить фильтры</button>
  </article>
</main>

Небольшая проверка

Отключите CSS в инструментах разработчика. Заголовки, абзацы и порядок чтения должны остаться понятными. Затем пройдите страницу клавишей Tab. Убедитесь, что все действия доступны, фокус виден, а подписи ссылок объясняют переход.

Семантика не заменяет проверку доступности. Даже правильно выбранный элемент может получить неясную подпись или оказаться скрытым для вспомогательных технологий.