Уход от div-based вёрстки и новые практики 2025
Почему div-based вёрстка уходит в прошлое
Веб 2025 — это не просто адаптивная сетка и минимализм. Это строгая семантика, доступность и нативные возможности HTML. Главный тренд — постепенный отказ от избыточного использования <div> в пользу семантических элементов, таких как <main>, <section>, <article>, <aside>, <nav> и <header>.
По данным Web Almanac 2024, за последние 3 года среднее количество <div> на странице уменьшилось на 23%, в то время как доля семантических тегов выросла на 31%.
Что не так с div-based вёрсткой
- Отсутствие семантики затрудняет навигацию для скринридеров и поисковиков
- Усложняется поддержка: непонятная вложенность,
class="container container-inner box1 box2" - Влияет на метрики Core Web Vitals, особенно CLS и INP, из-за неэффективной структуры DOM
- Плохо сказывается на SEO и Lighthouse, особенно с появлением AI-анализаторов интерфейса (SGE)
Современные практики семантической вёрстки
1. Использование смысловых тегов
<header>...</header>
<nav>...</nav>
<main>
<section>
<article>...</article>
</section>
</main>
<footer>...</footer>
Эта структура улучшает читабельность кода, SEO и доступность. <article> позволяет поисковикам и AI-ботам (включая Bing, Perplexity и Google SGE) определять логические фрагменты контента.
2. Разделение логики и визуального оформления
Использование utility-first CSS (Tailwind, UnoCSS) помогает минимизировать вложенность и избавиться от декоративных <div>.
3. Компонентный подход
Семантические компоненты позволяют инкапсулировать структуру, избегая div-спагетти:
export default function BlogPost({ children }) {
return <article className="prose max-w-2xl">{children}</article>;
}
Как это влияет на SEO и доступность
Сайты, использующие семантические теги, получают:
- Более высокие оценки в Lighthouse и WAVE
- Упрощённую индексацию в Google и Bing (см. Search Central Blog, 2025)
- Более корректную навигацию для screen reader'ов (NVDA, JAWS)
- Повышение видимости в SGE/SGA блоках, использующих HTML-сигналы как структурную подсказку
Риски и компромиссы
<section>не должен использоваться просто как заменитель<div>— он должен иметь заголовок (<h2>и выше)<aside>стоит применять только для контента, который имеет вспомогательное значение, иначе это будет ошибка семантики- Некоторые фреймворки по-прежнему требуют
divдля SSR или hydration, но их количество можно контролировать
Заключение
Уход от <div>-вёрстки — это не мода, а переход к зрелости веба. Это стандартизация, устойчивость и лучшая UX-доступность.
Рекомендуем пересмотреть дизайн-систему, шаблоны и компоненты, провести семантический аудит и начать внедрение новых практик поэтапно.
Если вы хотите адаптировать проект к требованиям 2025 года и улучшить SEO, производительность и доступность — обратитесь в NBM-IT.