Справочник элементов HTML5
На этой странице вы найдёте полный справочник стандартных элементов последней спецификации HTML5 с краткими описаниями каждого из них.
HTML5 — это набор технологий для создания более разнообразных и мощных веб-сайтов и приложений, поддерживающих мультимедиа, взаимодействующих с программными интерфейсами, структурирующих документы и многое другое.
Эта страница представляет собой краткий справочник элементов, добавленных (или официально стандартизированных) в HTML5. Каждый пункт содержит ссылку на отдельную главу с атрибутами, поддержкой браузеров и рабочими примерами.
Зачем HTML5 добавил семантические элементы
До HTML5 структура страницы строилась почти исключительно из универсальных контейнеров <div> и <span>, различаемых только по именам class или id, которые что-то значили для автора, но ничего — для машины. HTML5 ввёл семантические элементы — теги, чьи имена описывают смысл содержимого, которое они оборачивают (<header>, <nav>, <article>, <footer>, …), а не просто его внешний вид. Это важно по трём конкретным причинам:
- Доступность. Скринридеры и другие вспомогательные технологии распознают ориентиры вроде «main», «navigation» и «complementary», позволяя пользователям сразу переходить к нужному разделу.
<nav>объявляется как навигация;<div class="nav">— нет. - SEO и машиночитаемость. Поисковые системы и другие краулеры используют структуру, чтобы понять, о чём страница и какая её часть является основным содержимым, вместо того чтобы угадывать это по именам классов.
- Поддерживаемость. Семантическая разметка читается как план страницы, поэтому следующий разработчик (или вы сами в будущем) поймёт структуру без расшифровки CSS-хуков.
Подробное руководство по семантической структуризации страницы см. в разделе Семантические элементы в HTML5.
Примечание: Некоторые перечисленные ниже элементы — например,
<embed>и<wbr>— существовали в браузерах задолго до HTML5 и были лишь стандартизированы (официально специфицированы) в нём, а не созданы заново.
Новые структурные/семантические элементы
| Элементы | Описание |
|---|---|
<article> | Определяет независимый самодостаточный контент. |
<aside> | Определяет раздел с дополнительной информацией, связанной с окружающим содержимым. |
<details> | Содержит дополнительные сведения, которые пользователь может открыть и просмотреть. |
<dialog> | Задаёт диалоговое окно или поле. |
<figcaption> | Добавляет подпись или пояснение к содержимому тега <figure>. |
<figure> | Задаёт самодостаточный контент. |
<footer> | Определяет нижний колонтитул веб-страницы или раздела. |
<header> | Определяет заголовочный блок страницы или раздела. |
<main> | Задаёт основное содержимое документа. |
<nav> | Определяет блок навигационных ссылок — как в текущем документе, так и на другие документы. |
<section> | Создаёт самостоятельные разделы веб-страницы с логически связанным содержимым. |
<summary> | Определяет видимый заголовок элемента <details>. |
Типографические элементы и элементы интернационализации (i18n)
Эти элементы описывают смысл на уровне текста, аннотации и обработку текста со смешанными направлениями или восточноазиатского письма.
| Элементы | Описание |
|---|---|
<bdi> | Изолирует двунаправленный текст (когда язык с направлением письма справа налево, например арабский или иврит, используется вместе с языками с направлением слева направо). |
<data> | Связывает видимое содержимое с машиночитаемым атрибутом value (добавлен в HTML 5.1). |
<mark> | Выделяет часть текста, имеющую определённое значение. |
<rp> | Определяет альтернативный текст, отображаемый в браузерах, не поддерживающих тег <ruby>. |
<rt> | Добавляет текст произношения/аннотации, отображаемый над (или рядом) с основным текстом внутри элемента <ruby>. |
<ruby> | Определяет аннотацию ruby (фуригана) — фонетические подсказки, используемые в японском и других восточноазиатских языках. |
<time> | Определяет человекочитаемое время в 24-часовом формате или точную дату по григорианскому календарю. |
<wbr> | Отмечает позицию, в которой браузер может добавить перенос строки при необходимости («возможность переноса слова»). |
Новые элементы форм
| Элементы | Описание |
|---|---|
<datalist> | Создаёт список предопределённых вариантов ввода для тега <input>. |
<output> | Определяет место для отображения результата вычисления, выполненного скриптом или при взаимодействии пользователя с элементом формы (тег <form>). |
Новые элементы для медиа и графики
| Элементы | Описание |
|---|---|
<audio> | Встраивает аудиоконтент в HTML-документ. |
<canvas> | Определяет область на веб-странице, в которой можно рисовать объекты, изображения, анимации и фотокомпозиции с помощью скриптов. |
<embed> | Служит контейнером для внешних приложений и интерактивного содержимого (стандартизирован в HTML5). |
<picture> | Предоставляет несколько источников изображений, чтобы браузер мог выбрать наиболее подходящее для viewport или формата. |
<source> | Определяет несколько медиаресурсов в разных форматах для <audio>, <video> или <picture>. |
<svg> | Рисует масштабируемую векторную графику (см. SVG в HTML5). |
<track> | Задаёт текстовые дорожки (субтитры, подписи) для медиаэлементов. |
<video> | Встраивает видео в HTML-документ. |
Другие новые элементы
| Элементы | Описание |
|---|---|
<meter> | Определяет скалярное измерение в известном диапазоне (например, использование дискового пространства). |
<progress> | Отображает прогресс выполнения задачи (индикатор выполнения). |
<template> | Содержит инертный HTML, который не отображается при загрузке, но может быть клонирован и вставлен с помощью скрипта. |
Удалённые / устаревшие в HTML5
Эти элементы когда-то входили в спецификацию, но с тех пор были удалены. Браузеры больше не поддерживают их надёжно, и не следует использовать их в новом коде.
| Элементы | Описание |
|---|---|
<keygen> | Генерировал пару открытого/закрытого ключей при отправке формы. Удалён из стандарта — вместо него используйте Web Crypto API. |
<menuitem> | Определял команду в контекстном меню. Удалён из стандарта; широкой поддержки никогда не имел. |
Краткий семантический пример
Фрагмент ниже показывает, как структурные элементы сочетаются для описания типичной структуры страницы — обратите внимание, что он читается как план даже без CSS:
<body>
<header>
<h1>My Blog</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<article>
<h2>Why semantic HTML matters</h2>
<p>Semantic tags describe meaning, not just appearance.</p>
<figure>
<img src="diagram.png" alt="Page structure diagram" />
<figcaption>A semantic page outline.</figcaption>
</figure>
</article>
<aside>
<h2>Related</h2>
<p>Links to other posts.</p>
</aside>
</main>
<footer>
<p>© 2024 My Blog</p>
</footer>
</body>