Семантика HTML5

1. Зачем семантика

Семантические теги называют содержимое: «это шапка», «это навигация», «это статья». Браузер, скринридер и поисковик понимают структуру страницы без визуала. Разметка становится доступной и переносимой.

• доступность (скринридер, навигация по регионам);
• SEO — поисковику понятно, что главное;
• читаемость кода — разработчику ясно устройство блоков.

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

<header>  <!-- шапка страницы или секции -->
  <nav>       <!-- навигация -->
    <ul>
      <li><a href="#">Главная</a></li>
      <li><a href="#">Каталог</a></li>
    </ul>
  </nav>
</header>

<main>      <!-- уникальный контент страницы -->
  <article> <!-- самостоятельная единица: пост, новость -->
    <h1>Заголовок</h1>
    <p>Текст статьи.</p>
  </article>
</main>

<aside>   <!-- боковое: реклама, ссылки, связанное -->
<footer>  <!-- подвал -->

3. main — один на страницу

<main> оборачивает уникальный контент. Повторяющиеся шапки/подвалы/меню — вне его. На странице не более одного main без атрибута hidden.

4. section и article

• section — тематический раздел страницы (обязан иметь заголовок);
• article — самодостаточная единица, которую можно вынести отдельно;
• article может содержать section и наоборот.

<section>
  <h2>Преимущества</h2>
  <p>…</p>
</section>
<article>
  <h2>Как настроить курсор</h2>
  <p>Шаги настройки…</p>
</article>

5. aside: боковой контент

aside — содержание, слабо связанное с основным потоком: сайдбар, цитата, реклама. Не всегда «левая колонка» — это смысловая связь, а не расположение: при адаптиве сайдбар может съезжать вниз.

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

h1 — один на странице, дальше h2→h3 по вложенности: это не «уровень размера», а уровень структуры. Заголовки не пропускаются уровней и не используются для эстетики.

<article>
  <h1>Гайд по CSS</h1>
  <section><h2>Селекторы</h2>…</section>
  <section><h2>Медиа</h2>…</section>
</article>

7. figure/figcaption и figure опциональные

<figure>
  <img src="schema.png" alt="Схема сетки CSS">
  <figcaption>Сетка из двух колонок</figcaption>
</figure>

figure связывает иллюстрацию с её подписью, не разрывая смысл. Не следует смешивать с обычными картинками в тексте — figure для самодостаточных иллюстраций с подписью.

8. address и time

<address>
  Компания «Отличный товар»,<br>
  Санкт-Петербург, Невский пр., 1
</address>
<time datetime="2026-09-20">20 сентября 2026</time>

address — контактные данные (не «адрес страницы»), time — дата/время, машиночитаемое значение в datetime.

9. Чек-лист семантики

• один main, шапка/подвал/навигация семантичны;
• section имеет заголовок, article самостоятелен;
• h1 один, иерархия без пропусков;
• figure+figcaption для иллюстраций с подписью;
• address/time для контактов и дат.

Что дальше

Курс завершён.

← Вернуться к курсам