Семантические теги говорят, какую роль выполняет блок. Благодаря им посетитель с экранным диктором может быстро перейти к навигации или основному содержимому, а разработчик понимает структуру без чтения CSS-классов.
Каркас страницы
<header>Логотип и главное меню</header>
<main>
<article>
<h1>Заголовок статьи</h1>
<section><h2>Первый раздел</h2>...</section>
</article>
<aside>Связанные материалы</aside>
</main>
<footer>Контакты и документы</footer>header и footer подходят для шапки и подвала блока или страницы. nav содержит заметную группу навигационных ссылок. main на странице один. article используют для самостоятельного материала, а section — для тематической части с собственным заголовком.
div остаётся полезен для группировки и сетки, но не должен заменять все смысловые элементы. Правильная структура начинается с иерархии заголовков и проверяется по правилам доступности.