📜 Старый подход: всё из <div>
В старых макетах вся страница собиралась из одинаковых блоков. Визуально это можно довести до ума, но смысл структуры теряется: для машины это набор безымянных контейнеров.
div.header
div.menu
div.block
div.block
div.footer
<!-- Всё собрано из одинаковых div -->
<div class="header">Шапка</div>
<div class="menu">Меню</div>
<div class="content">
<div class="block">Статья</div>
<div class="block">Подсказка</div>
</div>
<div class="footer">Подвал</div>❌ Почему это неудобно
- По классу `.block` непонятно, что находится внутри.
- Смысл страницы приходится угадывать по имени класса.
- Скринридеры и поисковики не получают ориентиров — для них это одинаковые контейнеры.
✅ Современный семантический вариант
Если назвать блоки по их роли, документ объясняет сам себя — и для человека, и для инструментов. Превью то же самое, но теги говорят машине, что есть что.
<header>
<h1>Название сайта</h1>
</header>
<nav>Главное меню</nav>
<main>
<article>
<h2>Новая статья</h2>
<p>Текст статьи.</p>
</article>
<aside>Совет или заметка</aside>
</main>
<footer>Контакты и копирайт</footer>
Что стало лучше:
- Роль каждого блока ясна без просмотра CSS.
- Страницу легче сопровождать и расширять.
- Семантика улучшает доступность и навигацию.
🕰️ Когда старый вариант встречается
Такая структура часто встречается в старых макетах и в прототипах, которые делали очень быстро. При любом серьёзном проекте лучше сразу переходить на семантические элементы.