Семантический HTML5: семантика вместо набора div
Заменяйте бессмысленные оболочки div семантическими элементами и изучайте алгоритм построения структуры документа и иерархию заголовков.
«Семантический HTML5: семантика вместо набора div» — бесплатный урок Frontend Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.
Каша из div — проблема
Каша из div — это страница, полностью построенная из элементов <div> и <span>. Она требует имён классов для передачи структуры, без этих классов непонятна программам чтения с экрана и не сообщает поисковым системам никакого смысла.
<!-- Div soup (avoid) -->
<div class="container">
<div class="header">
<div class="logo">...</div>
<div class="nav">...</div>
</div>
<div class="content">...</div>
<div class="footer">...</div>
</div>Семантическая альтернатива
Заменяйте бессмысленные div семантическими элементами, которые сообщают их назначение. Теперь структура страницы понятна сама по себе и остаётся ясной даже без CSS.
<!-- Semantic HTML (preferred) -->
<body>
<header>
<a href="/"><img src="logo.svg" alt="Brand"></a>
<nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>
</body>Алгоритм структуры документа
Элементы заголовков (h1–h6) создают структуру документа. Пользователи программ чтения с экрана перемещаются по заголовкам. Вспомогательные технологии объявляют уровень заголовка в структуре. Сохраняйте логичную иерархию: h1 — для заголовка страницы, h2 — для основных разделов, h3 — для подразделов.
<time> — Машиночитаемые даты
Элемент <time> размечает даты и время с помощью машиночитаемого атрибута datetime. Поисковые системы понимают даты событий, а программы чтения с экрана могут озвучивать даты в отформатированном виде.
<p>Published on <time datetime="2025-06-15">June 15, 2025</time></p>
<time datetime="2025-06-15T14:30">2:30 PM</time><address>
Элемент <address> содержит контактную информацию для ближайшей статьи или документа. Это не обязательно почтовый адрес — подойдут адрес электронной почты, номер телефона и имена пользователей в социальных сетях.
<address>
<a href="mailto:hello@coddy.app">hello@coddy.app</a><br>
<a href="https://twitter.com/coddykit">@coddykit</a>
</address><figure> и <figcaption>
<figure> объединяет самостоятельное содержимое, например изображения, диаграммы, примеры кода или видео. <figcaption> добавляет подпись, семантически связанную с иллюстрацией.
<figure>
<img src="chart.png" alt="Monthly active users 2025">
<figcaption>Figure 1: Monthly active users increased 42% in Q4 2025.</figcaption>
</figure><blockquote> и <cite>
<blockquote> обозначает развёрнутую цитату. Используйте атрибут cite для URL источника. Элемент <cite> обозначает название творческой работы: книги, статьи или фильма.
<blockquote cite="https://developer.mozilla.org">
<p>HTML is the standard markup language for creating web pages.</p>
<footer>—<cite>MDN Web Docs</cite></footer>
</blockquote><details> и <summary>
Связка <details> + <summary> создаёт встроенный элемент типа «аккордеон» без JavaScript. Браузер автоматически обрабатывает открытие и закрытие, взаимодействие с клавиатурой и доступность.
<details>
<summary>What is the refund policy?</summary>
<p>We offer a 30-day money-back guarantee on all plans.</p>
</details><mark> — Выделенный текст
<mark> обозначает текст, выделенный для справки, например совпадение в результатах поиска. В семантическом отношении это не то же самое, что окрашивание текста в жёлтый цвет с помощью CSS.
<p>Search results for <q>flexbox</q>:</p>
<p>Use <mark>flexbox</mark> for one-dimensional layouts...</p><abbr> — Сокращения
Оборачивайте сокращения и акронимы в <abbr> и указывайте полный термин в атрибуте title. Программы чтения с экрана и браузеры показывают пользователям расшифровку при наведении указателя.
<abbr title="Cascading Style Sheets">CSS</abbr>
<abbr title="Accessible Rich Internet Applications">ARIA</abbr>Когда использовать <div> и <span>
Оба элемента по-прежнему полезны. <div> подходит для обычной блочной оболочки без семантического значения — например, контейнера разметки или корневого элемента компонента в React. <span> используют как точку подключения для строчного оформления без семантического значения.
Быстрая проверка
Какой элемент HTML создаёт встроенный сворачиваемый элемент раскрытия без необходимости в JavaScript?
Итоги: семантический HTML5
Заменяйте кашу из div семантическими элементами: header, nav, main, article, section, aside, footer. Используйте time для дат, figure/figcaption для медиа, details/summary для аккордеонов, mark для выделений. Оставляйте div и span для контейнеров разметки без семантического значения.
Часто задаваемые вопросы
Урок «Семантический HTML5: семантика вместо набора div» бесплатный?
Да — полный текст урока «Семантический HTML5: семантика вместо набора div» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.
Чему я научусь в уроке «Семантический HTML5: семантика вместо набора div»?
Заменяйте бессмысленные оболочки div семантическими элементами и изучайте алгоритм построения структуры документа и иерархию заголовков. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Frontend Academy?
Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Семантический HTML5: семантика вместо набора div»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Frontend Academy?
Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Элементы управления формой: типы input, select, textarea
- ARIA и доступность: label, role, aria-*
- Семантический HTML5: семантика вместо набора div
- Атрибуты проверки форм