Семантическая верстка — это не просто модный тренд, а основа современного веб-разработки. Если вы когда-нибудь пытались разобраться в чужом коде без документации, то знаете, как это больно. А если этот код еще и не семантический — вообще кошмар. Сегодня я расскажу, как сделать вашу верстку понятной, доступной и дружелюбной к поисковикам. Без лишней воды, только практика.

Что такое семантическая верстка и зачем она нужна

Семантическая верстка — это когда каждый HTML-тег используется по своему прямому назначению. Например, <header> для шапки, <nav> для навигации, <article> для статьи. Это как в жизни: вы же не кладете носки в холодильник, правда? Вот и теги должны быть на своих местах.

Зачем это нужно? Во-первых, для SEO. Поисковики лучше понимают структуру страницы, если она семантическая. Во-вторых, для доступности. Люди с ограниченными возможностями используют скринридеры, которые ориентируются на теги. В-третьих, для поддержки кода. Когда вы вернетесь к проекту через полгода, семантическая верстка спасет вас от головной боли.

Правило №1: Не используйте <div> там, где есть подходящий семантический тег. <div> — это последняя инстанция, когда ничего другого не подходит.

Основные семантические теги HTML5

Давайте пробежимся по ключевым тегам, которые вы должны знать как свои пять пальцев. Вот таблица для наглядности:

ТегНазначениеПример использования
<header>Шапка страницы или разделаЛоготип, навигация, заголовок
<nav>Навигационное менюСсылки на главные разделы
<main>Основное содержимое страницыУникальный контент
<article>Независимая часть контентаПост в блоге, новость
<section>Группа связанного контентаГлава статьи, блок услуг
<aside>Боковая панель или дополнительный контентРеклама, ссылки на похожие статьи
<footer>Подвал страницы или разделаКопирайт, контакты

Важно помнить: эти теги не меняют внешний вид элементов сами по себе. Они просто говорят браузеру и поисковику: «Эй, это важная часть!»

Практические советы для семантической верстки

Теперь давайте перейдем к конкретным приемам, которые сделают ваш код чистым и профессиональным.

1. Используйте заголовки по порядку. <h1> — только один на странице, затем <h2>, <h3> и так далее. Не прыгайте с <h1> на <h4> — это сбивает с толку.

2. Не злоупотребляйте <div>. Если вам нужно обернуть группу элементов, подумайте: может, это <section> или <article>? Пример:

<!-- Плохо -->
<div class="post">
  <div class="title">Заголовок</div>
  <div class="content">Текст...</div>
</div>

<!-- Хорошо -->
<article>
  <h2>Заголовок</h2>
  <p>Текст...</p>
</article>

3. Используйте <figure> и <figcaption> для изображений и подписей. Это улучшает доступность.

<figure>
  <img src="photo.jpg" alt="Описание фото">
  <figcaption>Фотография сделана в парке</figcaption>
</figure>

4. Не забывайте про <time> для дат. Это помогает поисковикам правильно индексировать временные метки.

<time datetime="2025-03-15">15 марта 2025</time>
Лайфхак: Если сомневаетесь, какой тег использовать, задайте себе вопрос: «Как бы я назвал этот блок, если бы объяснял его назначение другому разработчику?» Ответ подскажет правильный тег.

Как проверить семантическую верстку

Есть несколько способов убедиться, что ваша верстка семантическая. Во-первых, используйте валидатор W3C. Он покажет ошибки и предупреждения. Во-вторых, проверьте страницу в Lighthouse (инструмент в Chrome DevTools). Он оценит доступность и SEO. В-третьих, отключите CSS в браузере и посмотрите на структуру документа. Если она логична без стилей — вы молодец.

Пример проверки с помощью JavaScript:

// Проверка семантических тегов на странице
const semanticTags = ['header', 'nav', 'main', 'article', 'section', 'aside', 'footer'];
semanticTags.forEach(tag => {
  const count = document.querySelectorAll(tag).length;
  console.log(`${tag}: ${count} элемент(ов)`);
});

Этот скрипт выведет в консоль количество каждого семантического тега. Если какой-то отсутствует, возможно, вы его пропустили.

Распространенные ошибки и как их избежать

Даже опытные разработчики иногда ошибаются. Вот типичные проблемы:

  • Вложенность <article> в <article> без необходимости. Это допустимо, если внутренний <article> — самостоятельная единица (например, комментарий к посту). Но если это просто часть текста, лучше использовать <section>.
  • Использование <nav> для всех ссылок. <nav> предназначен только для основной навигации. Ссылки в подвале или в тексте не нужно оборачивать в <nav>.
  • Пропуск <main>. На каждой странице должен быть один <main> с уникальным содержимым. Это критично для доступности.
Важно: Не используйте <section> как замену <div> для стилизации. <section> должен иметь заголовок и логически завершенный смысл.

Что в итоге

Семантическая верстка — это не rocket science, но она требует внимания и практики. Начните с малого: замените <div> на <header>, <footer> и <main>. Постепенно добавляйте <article> и <section>. Проверяйте код валидатором и не бойтесь переписывать. В результате вы получите чистый, понятный код, который оценят и поисковики, и пользователи, и ваши коллеги.

Помните: хорошая верстка — это как хороший дом. Если фундамент крепкий, никакие перестройки не страшны.

Студия WNDER