Эта страница является кратким справочным индексом HTML-тегов, сгруппированных по назначению: базовая структура, форматирование текста, формы, таблицы, медиа, семантика, метаданные и скриптинг. Каждая строка ведёт на полную главу с примерами, атрибутами и информацией о поддержке браузерами. Используйте её, чтобы узнать, что делает тег и где он применяется, а затем перейдите по ссылке за подробностями.
В таблице используются два маркера:
- (HTML5) — элемент был введён в HTML5. Он является частью текущего стандарта и безопасен для использования в современных браузерах.
- (Устаревший) — элемент был удалён из стандарта HTML. Браузеры могут по-прежнему отображать его для обратной совместимости, но не следует использовать его в новом коде. В описании указана рекомендуемая замена. Полный список и современные альтернативы см. в разделе Устаревшие HTML-теги.
Большинство тегов идут парами — открывающий тег, например <p>, и закрывающий </p>, которые оборачивают содержимое. Некоторые теги (например, <br>, <hr> и <img>) являются пустыми элементами без закрывающего тега. Подробнее о том, как теги, элементы и атрибуты взаимодействуют между собой, см. в разделах HTML-элементы и HTML-атрибуты.
Основные теги
Теги форматирования
Теги форматирования отмечают смысл или внешний вид фрагментов текста. Многие старые презентационные теги здесь (Устаревшие) — используйте CSS для визуального оформления.
| Тег | Описание |
|---|
<abbr> | Определяет аббревиатуру или акроним. |
<acronym> | (Устаревший) Определяет акроним. Используйте вместо него <abbr>. |
<address> | Задаёт контактную информацию для автора/владельца документа или статьи. |
<b> | Отображает текст жирным шрифтом. |
<bdi> | (HTML5) Изолирует фрагмент текста от окружения для двунаправленного форматирования. |
<bdo> | Переопределяет текущее направление текста. |
<big> | (Устаревший) Отображает текст большего размера. Используйте вместо него CSS. |
<blockquote> | Определяет длинную (блочную) цитату. |
<center> | (Устаревший) Выравнивает содержимое по центру. Используйте вместо него CSS. |
<cite> | Отмечает ссылку (заголовок, автора или URL) на цитируемое произведение. |
<code> | Определяет фрагмент программного кода. |
<del> | Задаёт удалённый текст. |
<dfn> | Отмечает определяющий экземпляр термина. |
<em> | Задаёт акцентированный текст. |
<font> | (Устаревший) Задаёт шрифт, цвет и размер текста. Используйте вместо него CSS. |
<i> | Отображает текст курсивом. |
<ins> | Определяет текст, вставленный в документ. |
<kbd> | Задаёт ввод с клавиатуры. |
<mark> | (HTML5) Выделяет/подсвечивает текст. |
<meter> | (HTML5) Определяет скалярное значение в известном диапазоне (шкала). |
<pre> | Определяет предварительно отформатированный текст. |
<progress> | (HTML5) Показывает прогресс выполнения задачи (индикатор прогресса). |
<q> | Определяет короткую встроенную цитату. |
<rp> | (HTML5) Предоставляет запасные скобки для браузеров, не поддерживающих аннотации ruby. |
<rt> | (HTML5) Определяет произношение символов в аннотации ruby (для восточноазиатской типографики). |
<ruby> | (HTML5) Представляет аннотацию ruby (для восточноазиатской типографики). |
<s> | Отображает неактуальный текст в зачёркнутом стиле. |
<samp> | Задаёт пример вывода компьютерной программы. |
<small> | Отображает текст меньшего размера (комментарии, мелкий шрифт). |
<strike> | (Устаревший) Определяет зачёркнутый текст. Используйте вместо него <del> или <s>. |
<strong> | Определяет текст особой важности. |
<sub> | Определяет текст в нижнем индексе. |
<sup> | Определяет текст в верхнем индексе. |
<time> | (HTML5) Определяет дату/время. |
<tt> | (Устаревший) Отображает текст в стиле телетайпа (моноширинный). Используйте вместо него CSS. |
<u> | Отображает текст с нетекстовой аннотацией, по умолчанию подчёркнутой. |
<var> | Определяет переменную. |
<wbr> | (HTML5) Определяет возможное место переноса строки. |
Теги форм
| Тег | Описание |
|---|
<form> | Задаёт HTML-форму для ввода данных пользователем. |
<input> | Определяет элемент управления вводом. |
<textarea> | Задаёт многострочный элемент ввода текста (текстовая область). |
<button> | Определяет кнопку внутри HTML-формы. |
<select> | Определяет список выбора внутри формы. |
<optgroup> | Группирует связанные параметры в списке выбора. |
<option> | Определяет вариант в списке выбора. |
<label> | Задаёт метку для элемента <input>. |
<fieldset> | Группирует связанные элементы в форме. |
<legend> | Задаёт заголовок для элемента <fieldset>. |
<datalist> | (HTML5) Содержит набор предопределённых вариантов для элемента <input>. |
<keygen> | (Устаревший) Генерировал пару ключей для отправки формы. Удалён из стандарта; прямой замены нет. |
<output> | (HTML5) Определяет результат вычисления. |
Теги фреймов
Фреймовые наборы делят окно браузера на независимые документы. Они (Устаревшие) в HTML5 — используйте вместо них <iframe> или CSS-разметку.
| Тег | Описание |
|---|
<frame> | (Устаревший) Задаёт отдельный фрейм внутри фреймового набора. |
<frameset> | (Устаревший) Задаёт набор фреймов. |
<noframes> | (Устаревший) Предоставляет альтернативное содержимое для браузеров, не поддерживающих фреймы. |
<iframe> | Встраивает другой документ в встроенный фрейм. |
Теги изображений
| Тег | Описание |
|---|
<img> | Задаёт изображение. |
<map> | Задаёт клиентскую карту изображения. |
<area> | Определяет интерактивную область внутри карты изображения. |
<canvas> | (HTML5) Поверхность для рисования графики на лету с помощью скриптинга (обычно JavaScript). |
<figcaption> | (HTML5) Определяет подпись для элемента <figure>. |
<figure> | (HTML5) Определяет самостоятельное содержимое, например иллюстрацию или диаграмму. |
<picture> | (HTML5) Контейнер для нескольких источников изображений, заданных в элементах <source>. |
<svg> | (HTML5) Контейнер для встроенной SVG-графики. |
Теги аудио/видео
| Тег | Описание |
|---|
<audio> | (HTML5) Встраивает аудиоконтент. |
<source> | (HTML5) Задаёт альтернативные медиаресурсы для <video>, <audio> или <picture>. |
<track> | (HTML5) Добавляет текстовую дорожку (субтитры, подписи) для <video> и <audio>. |
<video> | (HTML5) Встраивает видеоконтент. |
Теги ссылок
| Тег | Описание |
|---|
<a> | Определяет гиперссылку. |
<link> | Связывает текущий документ с внешним ресурсом (обычно внешней таблицей стилей CSS). |
<nav> | (HTML5) Определяет блок навигационных ссылок. |
Теги списков
| Тег | Описание |
|---|
<ul> | Определяет неупорядоченный список. |
<ol> | Определяет упорядоченный список. |
<li> | Определяет элемент списка. |
<dir> | (Устаревший) Определяет список каталогов. Используйте вместо него <ul>. |
<dl> | Определяет список описаний (определений). |
<dt> | Определяет термин/название в списке описаний. |
<dd> | Определяет описание термина в списке описаний. |
<menu> | Определяет список (меню) команд. |
<menuitem> | (Устаревший) Определял команду в контекстном меню. Удалён из стандарта и не поддерживается современными браузерами. |
Теги таблиц
| Тег | Описание |
|---|
<table> | Определяет таблицу. |
<caption> | Определяет заголовок таблицы. |
<th> | Определяет ячейку заголовка в таблице. |
<tr> | Определяет строку ячеек в таблице. |
<td> | Определяет ячейку в таблице. |
<thead> | Группирует набор строк, описывающих метки столбцов таблицы. |
<tbody> | Группирует набор строк, определяющих основное тело данных таблицы. |
<tfoot> | Определяет нижний колонтитул таблицы. |
<col> | Определяет значения для одного или нескольких столбцов в элементе <colgroup>. |
<colgroup> | Задаёт группу из одного или нескольких столбцов таблицы для форматирования. |
Общие (презентационные) теги
Эти теги не несут никакого семантического смысла. Они представляют собой контейнеры, которые стилизуются с помощью CSS. Используйте их только тогда, когда ни один семантический элемент не подходит.
| Тег | Описание |
|---|
<div> | Определяет универсальный блочный контейнер. |
<span> | Определяет универсальный строчный контейнер. |
<style> | Содержит информацию о стилях (обычно CSS) для документа. |
Семантические теги
Семантические элементы описывают смысл своего содержимого, помогая браузерам, поисковым системам и вспомогательным технологиям. См. Семантические элементы в HTML5.
| Тег | Описание |
|---|
<header> | (HTML5) Определяет заголовок или блок вводного содержимого. |
<footer> | (HTML5) Определяет нижний колонтитул документа или раздела. |
<main> | (HTML5) Задаёт основное содержимое документа. |
<section> | (HTML5) Определяет тематическую группу содержимого. |
<article> | (HTML5) Определяет самостоятельное, независимо распространяемое содержимое. |
<aside> | (HTML5) Определяет содержимое, косвенно связанное с окружающим контентом. |
<details> | (HTML5) Виджет раскрытия, который пользователь может открыть или закрыть. |
<summary> | (HTML5) Определяет видимый заголовок для элемента <details>. |
<dialog> | (HTML5) Определяет диалоговое окно или модальное окно. |
<data> | (HTML5) Связывает содержимое с машиночитаемым значением. |
Теги метаданных
| Тег | Описание |
|---|
<head> | Содержит метаданные о документе, не отображаемые пользователю. |
<meta> | Определяет метаданные, такие как кодировка символов, viewport и описание. |
<base> | Определяет базовый URL и/или целевой объект для всех относительных ссылок на странице. |
<basefont> | (Устаревший) Задавал шрифт, размер и цвет по умолчанию. Используйте вместо него CSS. |
<template> | (HTML5) Содержит инертную разметку, которая не отображается, но может быть клонирована и вставлена с помощью JavaScript. |
Теги скриптинга и программирования
| Тег | Описание |
|---|
<script> | Встраивает или ссылается на исполняемый скрипт (обычно JavaScript). |
<noscript> | Определяет запасное содержимое для браузеров с отключённым или неподдерживаемым скриптингом. |
<embed> | Встраивает внешнее содержимое (например, плагин или медиа) в указанном месте. |
<object> | Встраивает внешний ресурс (изображение, вложенный контекст просмотра, содержимое плагина). |
<param> | Определяет параметр для элемента <object>. |
<applet> | (Устаревший) Встраивал Java-апплет. Удалён из стандарта; используйте вместо него <object> или <embed>. |
Практика