Народ, всем привет. Когда-то, еще в далеком 2014 году спецификация HTML5 официально стала стандартом, а мир веб-разработки сделал большой шаг к более семантичному и структурированному коду. Тогда элементы <header>, <nav>, <article>, <section>, <aside> и <footer> пришли на смену бесконечным <div> с классами вроде header, main, sidebar и footer. Они придали страницам смысл, который понятен не только разработчикам, но и браузерам, поисковым системам, ассистивным технологиям, ну и прочим инструментам анализа.
Но прошёл десяток лет, и в 2025 году веб стал уже гораздо сложнее, появились фреймворки вроде React, Next.js, Svelte, Solid, и даже искусственный интеллект уже помогает писать разметку. И тут возникает логичный вопрос, а нужны ли нам всё ещё эти «классические» семантические теги, или это уэе пережиток прошлого?
Семантика все еще важна
Несмотря на все технологические изменения, семантика и по сей день основа современного веба. Тут важно помнить, что HTML изначально создавался не как средство оформления, а как способ структурировать информацию. Поисковые системы, экранные читалки, голосовые интерфейсы и даже AI-ассистенты опираются на семантическую разметку, чтобы понимать, что именно находится на странице. Элементы вроде <header> и <footer> по-прежнему помогают улучшить SEO. Поисковые алгоритмы Google и других систем учитывают структуру страницы, где навигация, где основной контент, где вспомогательные материалы.
Экранные читалки для людей с нарушениями зрения используют семантические теги, чтобы «озвучить» структуру страницы. Например, пользователь может быстро перейти к основному контенту (<main>), навигации (<nav>) или разделу (<section>). Ну и не стоит забывать, что и для разработчиков разметка с семантическими тегами интуитивно понятнее, а <article> говорит сам за себя, в отличие от <div class="content-block">.
Канал «Т.Е.Х.Н.О Windows & Linux» — экспертные статьи, реальные гайды, настройка ПК, приватность и оптимизация. Всё бесплатно и без платных подписок!
Присоединяйся, чтобы стать профи!
Почему некоторые разработчики перестали их использовать? Ну просто в эпоху компонентов и SPA-фреймворков (React, Vue, Angular) семантические теги иногда уходят на второй план. Разметка часто генерируется автоматически или находится внутри компонентов, и часть разработчиков просто пишет <div>. так быстрее, привычнее и «работает». Есть. конечно, и другие причины:
- семантические элементы не влияют на внешний вид, поэтому дизайнеру всё равно, <header> это или <div>.
- в React или Vue структура определяется не тегами, а компонентами (<Header />, <Footer />), и внутри может быть любая разметка.
- в быстрорастущих проектах разработчики порой экономят время, используя минимально возможную структуру.
Но отказ от семантики это лишь краткосрочная экономия, которая может привести к проблемам в будущем, ухудшению SEO, доступности и поддерживаемости кода. Давайте разберём каждый элемент по отдельности и напомним, за что же они отвечают.
1. <header>. Используется для обозначения шапки страницы или раздела, обычно содержит логотип, название сайта, навигацию или поисковую строку. В 2025 году он по-прежнему полезен, особенно если страница состоит из нескольких самостоятельных блоков, например, карточек статей или профилей, у каждой из которых может быть свой <header>.
2. <nav>. Это контейнер для основного набора ссылок по сайту, и его смысл остался прежним, помогать пользователям и поисковым системам ориентироваться в структуре ресурса. Современные ассистивные технологии используют <nav> как маркер, чтобы предложить пользователю быстрый переход к меню. В эпоху мобильных интерфейсов и PWA это по-прежнему критически важно.
3. <article>. Подходит для независимого контента, т.е. постов, новостей, отзывов, комментариев. Поисковики воспринимают <article> как самодостаточную публикацию. Если контент можно вынести за пределы страницы и он не потеряет смысла, <article> ваш правильный выбор. В 2025 году, когда многие сайты активно используют микроразметку и структурированные данные, <article> всё ещё играет ключевую роль.
Кстати, Вам может быть это интересно:
4. <section>. Раздел внутри страницы или статьи. часто используется как логический блок с собственным заголовком. Но именно с <section> чаще всего путаются, некоторые вставляют его везде, где только можно. Правило простое, если блоку нужен свой заголовок (<h2>, <h3> и т.д.), и он имеет смысл как отдельная часть контента, тогда используйте <section>.
5. <aside>. Боковой контент, который дополняет основной, всякие рекламные блоки, ссылки на похожие статьи, биография автора. В эпоху адаптивных интерфейсов <aside> может перемещаться в конец страницы или сворачиваться, но его смысл остаётся, это просто второстепенная, но полезная информация.
6. <footer>. Нижняя часть страницы или раздела, обычно содержит контакты, копирайты, навигацию по сайту, ссылки на соцсети. Важно помнить, что <footer> можно использовать не только для всей страницы, но и внутри <article>, например, для указания автора или даты публикации.
Даже если проект написан на React, семантическая разметка может быть частью компонентов:
function Article({ title, text, author }) {
return (
<article>
<header>
<h2>{title}</h2>
</header>
<section>
<p>{text}</p>
</section>
<footer>
<p>Автор: {author}</p>
</footer>
</article>
);
}
Такой подход улучшает восприятие страницы не только пользователями, но и роботами поисковых систем. А современные инструменты SEO-аудита прямо оценивают наличие семантических тегов как фактор качества.
Хотите знать больше? Читайте нас в нашем Telegram – там еще больше интересного: новинки гаджетов, технологии, AI, фишки программистов, примеры дизайна и маркетинга.