HTML-теги используются для разграничения начала и конца элементов в разметке. В таблице приведен полный список элементов, поддерживаемых HTML4 и HTML5.
| <!--...--> | Используется для добавления комментариев. | |
| <!DOCTYPE> | Объявляет тип документа и предоставляет основную информацию для браузера - его язык и версия. | |
Метаданные документа |
Свойство display | |
| <html> | Корневой элемент html-документа. | block |
| <head> | Контейнер для метаданных html-документа. | none |
| <title> | Заголовок / имя html-документа. |
none |
| <base> |
Задает базовый адрес (URL), относительно которого вычисляются все относительные адреса. Это поможет избежать проблем при переносе страницы в другое место, так как все ссылки будут работать, как и прежде. |
none |
| <link> | Подключает внешние таблицы стилей. | none |
| <meta> | Мета-данные веб-страницы. |
none |
| <style> | Подключает таблицы стилей. | none |
| <body> |
Представляет тело документа (содержимое, не относящееся к метаданным документа). |
|
| <script> | Позволяет присоединять к документу различные сценарии. Закрывающий тег обязателен, при этом текст сценария может располагаться либо внутри этого элемента, либо во внешнем файле. | |
Секционные элементы |
||
| <article> |
Раздел контента, который образует независимую часть документа или сайта, например, статья в журнале, запись в блоге, комментарий. |
block |
| <section></section> | Логическая область (раздел) страницы, обычно с заголовком. | block |
| <nav></nav> | Раздел документа, содержащий навигационные ссылки по сайту. |
block |
| <aside> |
Представляет контент страницы, который имеет косвенное отношение к основному контенту страницы/сайта. |
block |
| <h1></h1> - <h6></h6> | Заголовки 6 уровней. | block |
| <header></header> | Секция для вводной информации сайта или группы навигационных ссылок. | block |
| <footer></footer> | Секция для нижнего колонтитула документа или раздела. | block |
Группировка содержимого |
||
| <p></p> | Параграфы в тексте. | block |
| <address> |
Задает контактные данные автора/владельца документа или статьи. Отображается в браузере курсивом. |
block |
| <hr> | Горизонтальная линия. | block |
| <pre></pre> | Выводит текст с пробелами и переносами. | block |
| <blockquote></blockquote> |
Выделяет текст как цитату, применяется для описания больших цитат. |
block |
| <ol></ol> | Упорядоченный нумерованный список. | block |
| <ul></ul> | Маркированный список. | block |
| <li></li> | Элемент списка. | list-item |
| <dl></dl> |
Тег-контейнер, внутри которого находятся термин и его описание. |
block |
| <dt></dt> |
Используется для задания термина. |
block |
| <dd></dd> |
Используется для описания термина из тега <dt>. |
block |
| <figure></figure> | Независимый контейнер для такого контента как изображения, диаграммы и т.п. | block |
| <figcaption></figcaption> | Заголовок для элемента <figure>. | block |
| <main></main> | Контейнер для уникального основного содержимого в пределах одной страницы сайта. | block |
| <div></div> |
Тег-контейнер для разделов HTML-документа. Используется для группировки блочных элементов с целью форматирования стилями. |
block |
Табличные данные |
||
| <table></table> | html-таблица. | table |
| <caption></caption> |
Добавляет подпись к таблице. Вставляется сразу после тега <table>. |
table-caption |
| <colgroup></colgroup> |
Создает структурную группу столбцов, выделяющую множество логически однородных ячеек. |
table-column-group |
| <col> | Выбирает для форматирования один или несколько столбцов таблицы, не содержащих информацию одного типа. | table-column |
| <thead></thead> | Блок заголовков таблицы. | table-header-group |
| <tbody></tbody> | Тело таблицы. | table-row-group |
| <tfoot></tfoot> | Нижний колонтитул таблицы. | table-footer-group |
| <tr></tr> | Строка таблицы. | table-row |
| <th></th> | Заголовок столбца таблицы. | table-cell |
| <td></td> | Ячейка таблицы. | table-cell |
Интерактивные элементы |
||
| <details></details> |
Создаёт интерактивный виджет, который пользователь может открыть или закрыть. Представляет собой контейнер для контента, видимый заголовок виджета помещается в тег <summary>. |
block |
| <summary></summary> | Видимый заголовок для элемента <details>. | block |
| <dialog></dialog> |
Интерактивный элемент, с которым взаимодействует пользователь для выполнения задачи, например, диалоговое окно, инспектор или окно. Без атрибута open не виден для пользователя. |
block |
Скрипты |
||
| <script></script> | Подключает сценарии к странице. | none |
| <noscript></noscript> | Секция, не поддерживающая скрипт. | block |
| <template></template> | Фрагменты HTML-кода, которые могут быть клонированы и вставлены в документ скриптом. | none |
| <canvas></canvas> |
Холст-контейнер для динамического отображения изображений, таких как простые изображения, диаграммы, графики и т.п. Для рисования используется скриптовый язык JavaScript. |
inline-block |
Встроенное содержимое |
||
| <picture></pictire> | Контейнер для одного <img> и ноль или больше <source>. | inline |
| <source> | Местоположение и тип альтернативных медиаресурсов для элементов <picture>, <video>, <audio>. | none |
| <img> | html-изображения. | inline |
| <iframe></iframe> | Создаёт встроенный фрейм. | block |
| <embed> | Встраивает внешний интерактивный контент или плагин. | inline-block |
| <object></object> | Контейнер для встраивания мультимедиа. | inline-block |
| <param> | Задаёт параметры для плагинов, встраиваемых с помощью элемента <object>. | none |
| <audio> |
Загружает звуковой контент на веб-страницу. |
inline-block |
| <video></video> | Добавляет видео-файлы. | inline-block |
| <track> | Субтитры для элементов <audio> и <video>. | none |
| <map></map> | Активные области на карте-изображении. | inline |
| <area> |
Представляет собой гиперссылку с текстом, соответствующей определенной области на карте-изображении или активную область внутри карты-изображения. Всегда вложен внутрь тега <map>. |
inline |
Семантика текста |
||
| <a></a> |
Создаёт гипертекстовые ссылки. |
inline |
| <em></em> | Выделяет важные фрагменты текста курсивом. | inline |
| <strong></strong> | Выделяет полужирным важный текст. | inline |
| <small></small> | Отображает текст шрифтом меньшего размера. | inline |
| <s></s> | Перечёркивает неактуальный текст. | inline |
| <cite></cite> | Используется для указания источника цитирования. Отображается курсивом. | inline |
| <q></q> | Краткая цитата. | inline |
| <dfn></dfn> |
Определяет слово как термин, выделяя его курсивом. Текст, идущий следом, должен содержать расшифровку этого термина. |
inline |
| <abbr> |
Определяет текст как аббревиатуру или акроним. Поясняющий текст задаётся с помощью атрибута title. |
none |
| <ruby></ruby> | Контейнер для Восточно-Азиатских символов и их расшифровки. | inline |
| <rb></rb> | Обертка для аннотации. | inline |
| <rp></rp> | Тег для скобок вокруг символов. | none |
| <rt></rt> | Расшифровка символов. | block |
|
<rtc></rtc> |
Обертка для дополнительной аннотации. | inline |
| <data></data> |
Элемент используется для связывания значения атрибута value, которое представлено в машиночитаемом формате и может быть обработано компьютером, с содержимым тега. |
inline |
| <time></time> | Дата / время документа или статьи. | inline |
| <code></code> |
Представляет фрагмент программного кода, отображается шрифтом семейства monospace. |
inline |
| <var></var> | Выделяет переменные из программ. | inline |
| <samp></samp> | Результат выполнения сценария. | inline |
| <kbd></kbd> | Текст, вводимый пользователем с клавиатуры. | inline |
| <sub></sub> | Подстрочное написание символов. | inline |
| <sup></sup> | Надстрочное написание символов. | inline |
| <i></i> | Выделяет текст курсивом без акцента. | inline |
| <b></b> |
Задает полужирное начертание отрывка текста, не придавая акцент или важность выделенному. |
inline |
| <u></u> | Выделяет отрывок текста подчёркиванием, без дополнительного акцента. | inline |
| <mark></mark> | Выделяет фрагменты текста желтым фоном. | inline |
| <bdi></bdi> |
Изолирует отрывок текста, написанный на языке, в котором чтение текста происходит справа налево, от остального текста. |
inline |
| <bdo></bdo> |
Отображает текст в направлении, указанном в атрибуте dir, переопределяя текущее направление написания текста. |
inline |
| <span></span> | Контейнер для строчных элементов. | inline |
| <br> | Перенос текста на новую строку. | none |
| <wbr> | Возможное место разрыва длинной строки. | none |
Правки в тексте |
||
| <del></del> |
Помечает текст как удаленный, перечёркивая его. |
inline |
| <ins></ins> | Подчёркивает изменения в тексте. | inline |
Формы |
||
| <form></form> | html-форма. | block |
| <label></label> | Текстовая метка для элемента <input>. | inline |
| <input> | Многофункциональные поля формы. | inline-block |
| <button></button> |
Создает интерактивную кнопку. Внутрь тега можно поместить содержимое - текст или изображение. |
inline-block |
| <select></select> | Элемент управления с выбором значений из предложенных вариантов <option>. | inline-block |
| <datalist></datalist> |
Элемент-контейнер для выпадающего списка элемента <input>. Варианты значений помещаются в элементы <option>. |
none |
| <optgroup></optgroup> | Контейнер с заголовком для группы элементов <option>. | block |
| <option></option> | Вариант (опция) в раскрывающемся списке. | block |
| <textarea> | Многострочное поле формы. | inline-block |
| <output></output> | Поле для вывода результата вычисления. | inline |
| <progress></progress> | Индикатор выполнения задачи. | inline-block |
| <meter></meter> | Индикатор измерения в заданном диапазоне. | inline-block |
| <fieldset></fieldset> | Группирует связанные элементы в форме. | block |
| <legend></legend> | Заголовок элементов формы, сгруппированных с помощью <fieldset>. | block |