Семантическая разметка и её влияние на SEO и доступность

Почему семантика — это не просто «красиво» ️

Семантическая разметка — это не про визуальную красоту, а про смысл. Браузеры, поисковые системы и скринридеры «видят» ваш сайт через HTML-теги. Хотите, чтобы они понимали его правильно? Давайте разберёмся, как это работает!

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

1. `<header>` и `<footer>`

Не просто шапка и подвал, а логические контейнеры для навигации, авторства или контактной информации.

<header>
  <h1>Котики — наши повелители</h1>
  <nav>
    <a href="/">Главная</a>
    <a href="/about">О котиках</a>
  </nav>
</header>

<footer>
  <p>© 2023 Котофей Inc.</p>
</footer>

2. `<nav>` — не для всех ссылок!

Только для основной навигации. Меню в подвале? Повторяющиеся ссылки? Чаще всего — нет.

3. `<article>` vs `<section>`

<article>: самостоятельный контент (пост в блоге, товар в каталоге)
<section>: тематическая группировка внутри документа

<article>
  <h2>Как ухаживать за мейн-куном</h2>
  <section>
    <h3>Питание</h3>
    <p>Кормите 3 раза в день...</p>
  </section>
</article>

Как семантика влияет на SEO? 🔍

Поисковые системы любят чёткую структуру:

<h1>-<h6> — определяют иерархию контента
<main> — указывает на основной контент страницы
<time datetime="2023-11-15"> — помогает понять даты

Пример улучшения:

<!-- Было -->
<div class="post">Новость от 15 ноября</div>

<!-- Стало -->
<article>
  <h2>Новый котокафе в Москве</h2>
  <time datetime="2023-11-15">15 ноября 2023</time>
</article>

Доступность: невидимая суперсила ♿

Скринридеры полагаются на семантику:

<button> вместо <div onclick=""> — объявляется как кнопка
<label for="search"> + <input id="search"> — связывает подпись и поле
aria-label — добавляет описание для иконок

Живой пример:

<!-- Плохо -->
<div>☰</div>

<!-- Отлично! -->
<button aria-label="Открыть меню">☰</button>

Практикум: превращаем «div-суп» в семантический шедевр 🍜→🎨

Исходный код:

<div class="top">
  <div class="logo"></div>
  <div class="links">
    <div><a href="/">Главная</a></div>
  </div>
</div>
<div class="content">
  <div class="news">...</div>
</div>

Рефакторинг:

<header>
  <img src="logo.png" alt="Логотип">
  <nav>
    <ul>
      <li><a href="/">Главная</a></li>
    </ul>
  </nav>
</header>
<main>
  <article class="news">...</article>
</main>

Проверь себя: 3 быстрых теста

Тег <aside> — для рекламы или основной навигации?
Нужен ли <section>, если есть только один заголовок?
Как обозначить основной контент страницы?

(Ответы: 1 — реклама/доп.инфо, 2 — нет, 3 — <main>)

Где учиться дальше? 📚

Для глубокого погружения в HTML5-семантику загляните на YouTube-канал Данилы Бежина — там есть разборы реальных кейсов.

Ваш следующий шаг: Откройте DevTools (F12) и проверьте любой сайт через «Инструмент доступности». Увидите семантику его глазами!