Замени безликие div на теги, которые придают смысл твоей структуре.
Открыть этот урок в KodokonСтраница, целиком собранная из div, работает, но она ни о чём не говорит: ни программам чтения с экрана, ни поисковым системам, ни коллеге, который откроет твой код через полгода. Семантические теги описывают роль каждой области: header, nav, main, article, section, footer.
<body>
<header>
<nav aria-label="Main navigation">
<a href="/">Home</a>
<a href="/articles">Articles</a>
<a href="/contact">Contact</a>
</nav>
</header>
<main>
<h1>The blog for curious devs</h1>
</main>
<footer>
<p>© 2026 Kodokon. All rights reserved.</p>
</footer>
</body>header объединяет шапку страницы (логотип, навигация), footer - завершающую информацию (правовые сведения, второстепенные ссылки). main содержит основное содержимое и должен быть единственным на странице. nav отмечает область навигации: главное меню, хлебные крошки или оглавление.
Самое тонкое различие: article против section. Простое правило: если блок имеет смысл вне контекста (статья блога, комментарий, карточка товара), это article. Если это тематическая группировка внутри содержимого, со своим заголовком, это section.
<main>
<article>
<h1>Understanding semantic HTML</h1>
<section>
<h2>Accessibility</h2>
<p>Screen readers rely on the
structure to navigate.</p>
</section>
<section>
<h2>SEO</h2>
<p>Search engines understand the page better.</p>
</section>
</article>
</main>Задача на подумать: на странице товара в интернет-магазине как ты разметишь список отзывов покупателей? У каждого отзыва есть автор, дата и самодостаточное содержимое: значит, каждый отзыв - это article, а блок «Отзывы покупателей», который их объединяет и имеет свой заголовок, - это section.