Семантические теги: структура и смысл

Мы переходим к этапу, где верстка перестает быть набором визуальных блоков и обретает смысл. Ранее вы изучили, как использовать Инструменты разработчика в браузере для отладки кода. Теперь мы воспользуемся этим навыком, чтобы увидеть разницу между «кашей из тегов» и профессиональной структурой.

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

Семантические теги — это элементы HTML, которые сообщают браузеру, поисковикам и экранным дикторам, какой именно контент находится внутри. В отличие от универсального контейнера <div>, который не несет смысла, семантический тег четко определяет роль блока.

Для фрилансера качественная разметка — это способ продать свои услуги дороже. Вот три причины использовать семантику:

1. SEO: Поисковые роботы и AI-ассистенты анализируют структуру страницы. Сайт с правильной семантикой лучше индексируется и занимает более высокие позиции.
2. Доступность: Люди с нарушениями зрения используют скринридеры. Эти программы ориентируются по семантическим меткам, чтобы озвучивать контент.
3. Чистота кода: Заказчики и опытные тимлиды ценят профессионализм. Понятный код проще поддерживать, а значит, он стоит больше.

Как показано в Сравнении 1, использование осмысленных тегов превращает хаотичный набор блоков в логичную иерархию.

Анатомия страницы: базовые контейнеры

Логическая структура страницы строится на ключевых «якорях», которые делят макет на функциональные зоны:

• header — вводная часть страницы или раздела. Обычно содержит логотип, навигацию или заголовок.
• main — основное содержимое. На странице может быть только один такой тег.
• footer — «подвал» сайта. Здесь размещают контакты, ссылки на соцсети и копирайт.

Контентные блоки: section против article

Начинающие разработчики часто путают эти теги. Чтобы не ошибиться, используйте простое правило:

• article — это автономный, законченный блок. Если его можно «вырезать» и вставить на другой сайт без потери смысла — это article. Примеры: карточка товара, пост в блоге, новость.
• section — тематический раздел внутри страницы или внутри article. У каждой секции должен быть свой заголовок.

<main>
  <section>
    <h2>О нашей кофейне</h2>
    <p>Мы обжариваем зерна сами...</p>
  </section>

  <section>
    <h2>Наше меню</h2>
    <article>
      <h3>Эспрессо</h3>
      <p>Классический крепкий кофе.</p>
    </article>
    <article>
      <h3>Капучино</h3>
      <p>Нежная молочная пенка.</p>
    </article>
  </section>
</main>

Вспомогательные элементы: nav и aside

• nav — контейнер для основных навигационных ссылок (меню сайта, оглавление).
• aside — блок с дополнительной информацией, которая косвенно связана с основным контентом (боковая панель, сноски, рекламные баннеры).

Иерархия заголовков h1–h6

Заголовки — это скелет документа. Главное правило: одна страница — один заголовок h1. Он описывает суть всей страницы.

<h3>Маленький заголовок в начале страницы</h3>
<h1>Главная тема</h1>
<h6>Просто захотелось мелкий текст</h6>

Практикум: от «div-soup» к чистому коду

Давайте закрепим материал. Представьте, что вы получили заказ на верстку блока преимуществ.

<div class="features">
  <div class="title">Почему выбирают нас</div>
  <div class="item">
    <div class="item-title">Скорость</div>
    <div class="text">Делаем сайты за 3 дня.</div>
  </div>
  <div class="item">
    <div class="item-title">Качество</div>
    <div class="text">Гарантия на код 1 год.</div>
  </div>
</div>

Правильная семантика делает ваш проект прозрачным для поисковиков и повышает вашу ценность на фриланс-биржах. 🛠️

Мы разобрали фундамент структуры. В следующей теме мы изучим Основы доступности для всех пользователей, где узнаем, как семантика помогает создавать инклюзивные сайты для людей с ограниченными возможностями.