Семантическая разметка — HTML — FrontSkill

Что такое семантика?

Семантические HTML-теги несут смысловую нагрузку — они описывают роль содержимого, а не его внешний вид.

<!-- Несемантично — что это? -->
<div class="header">
  <div class="nav">...</div>
</div>

<!-- Семантично — сразу понятна структура -->
<header>
  <nav>...</nav>
</header>

Структурные теги

<header>   <!-- Шапка страницы или раздела -->
<nav>      <!-- Основная навигация -->
<main>     <!-- Основное содержимое (один на странице) -->
<article>  <!-- Самостоятельный контент (пост, новость, комментарий) -->
<section>  <!-- Раздел с тематически связанным контентом -->
<aside>    <!-- Боковая панель, дополнительный контент -->
<footer>   <!-- Подвал страницы или раздела -->

Типичная структура страницы

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Название</title>
</head>
<body>
  <header>
    <nav>
      <ul>
        <li><a href="/">Главная</a></li>
        <li><a href="/about">О нас</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h1>Заголовок статьи</h1>
      <p>Содержимое...</p>
    </article>

    <aside>
      <h2>Похожие статьи</h2>
    </aside>
  </main>

  <footer>
    <p>© 2024 FrontSkill</p>
  </footer>
</body>
</html>

Теги контента

<h1>-<h6>   <!-- Заголовки (h1 — один на странице) -->
<p>          <!-- Параграф -->
<ul>/<ol>   <!-- Ненумерованный / нумерованный список -->
<li>         <!-- Элемент списка -->
<dl>         <!-- Список определений -->
<dt>/<dd>   <!-- Термин / Определение -->

<blockquote> <!-- Цитата (с атрибутом cite) -->
<figure>     <!-- Рисунок, диаграмма, код с подписью -->
<figcaption> <!-- Подпись к figure -->

<time>       <!-- Дата/время (с атрибутом datetime) -->
<address>    <!-- Контактная информация автора/владельца -->
<mark>       <!-- Выделенный текст -->
<abbr>       <!-- Аббревиатура (с атрибутом title) -->
<cite>       <!-- Название произведения -->
<code>       <!-- Инлайн-код -->
<pre>        <!-- Предформатированный текст -->

Примеры

<figure>
  <img src="chart.png" alt="График продаж за 2024 год">
  <figcaption>Рост продаж составил 42% по сравнению с 2023</figcaption>
</figure>

<time datetime="2024-03-15">15 марта 2024</time>

<p>
  Изучаем <abbr title="HyperText Markup Language">HTML</abbr>
</p>

<address>
  Автор: <a href="mailto:ivan@example.com">Иван Иванов</a>
</address>

Заголовки и иерархия

Заголовки <h1>–<h6> должны образовывать логическую иерархию:

<!-- Хорошо -->
<h1>Веб-разработка</h1>
  <h2>HTML</h2>
    <h3>Семантика</h3>
    <h3>Формы</h3>
  <h2>CSS</h2>
    <h3>Flexbox</h3>

<!-- Плохо — пропускаем уровни -->
<h1>Заголовок</h1>
<h3>Подраздел</h3>  <!-- Пропустили h2! -->

Один <h1> на страницу (основная тема)
Не используйте заголовки для стилизации — для этого CSS

Ссылки

<!-- Внешняя ссылка -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Открыть в новой вкладке
</a>

<!-- Якорная ссылка -->
<a href="#contacts">Перейти к контактам</a>

<!-- Ссылка-кнопка (плохая практика) -->
<a href="#">Кнопка</a>  <!-- Используйте <button> вместо этого -->

<!-- Ссылка на скачивание -->
<a href="/report.pdf" download>Скачать отчёт</a>

<!-- Ссылка на почту/телефон -->
<a href="mailto:hi@example.com">Написать</a>
<a href="tel:+79001234567">Позвонить</a>

Почему семантика важна?

Доступность — скринридеры используют семантику для навигации
SEO — поисковики лучше понимают структуру
Читаемость — разработчикам легче понять код
Стилизация — браузерные стили по умолчанию для семантических тегов