HTML справочник

Базовый HTML

Тег Описание
<!DOCTYPE> Декларация, которая определяет тип документа, помогая браузеру отобразить веб-страницу правильно.
<html> Корневой элемент HTML-документа; включает head и body. Сам не переключает тип содержимого.
<title> Обеспечивает название для документа.
<body> Определяет видимое содержимое страницы.
<h1> Определяет заголовок первого уровня.
<h2> Определяет заголовок второго уровня.
<h3> Определяет заголовок третьего уровня.
<h4> Определяет заголовок четвертого уровня.
<h5> Определяет заголовок пятого уровня.
<h6> Определяет заголовок шестого уровня.
<p> Определяет параграф.
<br> Устанавливает перевод строки в том месте, где этот тег обозначен.
<hr> Тэг создает горизонтальную линию на HTML-странице, может использоваться в роли тематического разрыва.
<!--...--> Тег комментария. Используются для временного отключения кода, либо в качестве подсказки. Текст внутри комментария не отображается браузером на странице.

Форматирование

Тег Описание
<acronym> Не поддерживается в HTML5.
Определяет акроним. Используйте вместо данного элемента <abbr>.
<abbr> Определяет аббревиатуру или акроним. Маркировка сокращений является полезной информацией для браузеров, систем перевода и поисковиков.
<address> Определяет контактную информацию (автор / владелец) документа или статьи.
<b> Привлекает внимание без дополнительной важности; обычно отображается полужирным.
<bdi> Изолирует фрагмент текста, который отформатирован в другом направлении, то есть позволяет браузерам корректно обрабатывать двунаправленный текст. Этот элемент полезно использовать при отображении текста с разной направленностью.
<bdo> Используется для переопределения текущего направления текста (устанавливает направление вывода текста и преимущественно предназначен для использования с языками, где чтение происходит справа налево, например - арабский).
<big> Не поддерживается в HTML5.
Шрифт, который отображается большего размера. Используйте CSS вместо данного элемента.
<blockquote> Определяет блочную цитату (длинная цитата внутри документа). Текст внутри этого тега отображается как выровненный блок с отступами слева и справа
<center> Не поддерживается в HTML5.
Определяет текст, который выровнен по центру. Используйте CSS вместо данного элемента.
<cite> Предназначен для выделения названия произведений (по умолчанию - курсивом).
<code> Предназначен для выделения части компьютерного кода (по умолчанию представлен моноширинным шрифтом).
<del> Перечёркнутый (удалённый) текст
<dfn> Используется, когда в документе упоминается новый термин или слово (первое и поясняемое употребление). По умолчанию, оно выделяется курсивом.
<em> Обозначает смысловое ударение в тексте.
<font> Не поддерживается в HTML5.
Определяет цвет, размер и шрифт для текста. Используйте CSS вместо данного элемента.
<i> Обозначает текст иного характера, например термин или иноязычное выражение; обычно курсивный.
<ins> Подчёркнутый текст, вставленный в документ.
<kbd> Вводимые пользователем нажатия клавиш или текст, набираемый на клавиатуре.
<mark> Выделенный/подсвеченный текст.
<meter> Предназначен для отображения скалярной величины в заданном диапазоне, или же для графического представления дробного числа. Для использования данного тега должно быть известно максимальное значение.
<pre> Определяет предварительно отформатированный текст, т.е. текст, который был помещён внутрь тега отобразится со шрифтом фиксированной ширины, и сохранит как пробелы, так и разрывы строк
<progress> Предоставляет обратную связь, сообщая о состоянии текущего процесса, отображает какая часть задачи выполнена.
<q> Используется для выделения коротких цитат (строчная цитата).
<rp> Определяет, что отображать браузеру, который не поддерживает тег <ruby>
<rt> Помещает полезный текст фуриганы в составе элемента <ruby>
<ruby> Используются для добавления фуриган (фонетические подсказки в японском языке, их также называют - руби или ёмигана).
<s> Определяет текст, который больше не является правильным или актуальным.
<samp> Результат вывода компьютерной программы или скрипта.
<small> Побочные пояснения и мелкий шрифт, например оговорки и сведения об авторских правах.
<strike> Не поддерживается в HTML5.
Отображает перечеркнутый текст. Используйте вместо данного элемента тег <del> или тег <s>
<strong> Текст, которому придают особое значение (важный текст).
<sub> Текст с нижним индексом.
<sup> Текст с верхним индексом.
<time> Тег временной разметки (семантическая разметка).
<tt> Не поддерживается в HTML5.
Отображает шрифт моноширинным текстом. Используйте CSS вместо данного элемента.
<u> Нетекстовая аннотация, например пометка орфографической ошибки; не универсальный способ подчеркнуть текст.
<var> Математические/переменные величины.
<wbr> Предоставляет возможность указать браузеру, что при необходимости в этом месте можно сделать перенос строки (например, слишком длинное слово или URL).
<data> Связывает текст с машиночитаемым значением в value, например название товара с его кодом. Для даты и времени используйте time.

Формы

Тег Описание
<form> Определяет HTML форму для пользовательского ввода.
<input> Определяет элементы управления для пользовательского ввода различных данных в составе формы.
<textarea> Представляет собой поле формы для создания области многострочного ввода (текстовая область).
<button> Используется для размещения кнопки.
<select> Позволяет создать раскрывающийся список.
<optgroup> Используется для группировки связанных данных в раскрывающемся списке.
<option> Определяет пункты раскрывающегося списка (параметры для выбора).
<label> Связанная подпись элемента управления, например input, select или textarea.
<fieldset> Смысловая группа связанных полей; общее название задаёт legend.
<legend> Определяет заголовок для элемента <fieldset>.
<datalist> Определяет список предопределенных вариантов для ввода.
<keygen> Устарело Используется для генерации пары ключей — закрытого и открытого (для форм).
<output> Определяет область, в которую выводится результат вычислений (обычно рассчитывается с помощью скриптов).
<selectedcontent> Показывает копию содержимого выбранного option внутри кнопки настраиваемого select. Не является самостоятельным полем формы. Ограниченная поддержка.

Фреймы

Тег Описание
<frame> Не поддерживается в HTML5.
Определяет свойства отдельного окна (фрейма), который расположен в контейнере <frameset>.
<frameset> Не поддерживается в HTML5.
Структура (набор) фреймов на странице.
<noframes> Не поддерживается в HTML5.
Альтернативный контент для тех пользователей, которые не поддерживают фреймы.
<iframe> Определяет встроенную в веб-страницу область, которая может отображать содержимое отдельно взятого документа (например *.pdf)/медиа контента или другого веб-сайта в заданном пространстве.

Изображения

Тег Описание
<img> Определяет изображение на странице.
<map> Используется для определения изображения-карты.
<area> Тег, который определяет интерактивную область в изображении-карте (элемент <map>), т.е. при клике на определённую область изображения происходят определённые действия, например, открывается отдельная страница с описанием данного участка изображения.
<canvas> Область рисования через JavaScript: 2D, WebGL и другие поддерживаемые контексты.
<figcaption> Выводит пояснение к фотографии или иллюстрации, которая находится внутри тега <figure>.
<figure> Применяется для обозначения контента, иллюстрирующего или поддерживающего определенную идею текста.
<picture> Объединяет варианты изображения в source и обязательный img. Браузер выбирает источник по условиям media и формату; img задаёт запасной вариант и альтернативный текст.

Аудио и Видео

Тег Описание
<audio> Добавляет аудио-контент на страницу.
<source> Альтернативный источник для audio/video либо вариант изображения в picture.
<track> Добавляет субтитры к медиа-элементам.
<video> Добавляет видео-контент на страницу.

Ссылки

Тег Описание
<a> Элемент предназначен для размещения гиперссылок.
<link> Определяет связь между документом и внешним ресурсом, используется для ссылки на внешние таблицы стилей.
<nav> Используется для обозначения содержимого в виде основных навигационных ссылок.

Списки

Тег Описание
<ul> Определяет маркированный (неупорядоченный) список.
<ol> Определяет нумерованный список.
<li> Элемент списка.
<dir> Не поддерживается в HTML5.
Создает список, содержащий названия директорий (системные папки). Используйте вместо данного элемент <ul>.
<dl> Определяет список описаний.
<dt> Определяет имя/теримн в списке определений.
<dd> Определяет значение в списке описаний.
<menu> Список команд с пунктами li. Сам по себе не создаёт контекстного меню.
<menuitem> Устарело Элемент определяет команду/меню, которую пользователь может вызвать из контекстного меню.

Таблицы

Тег Описание
<table> Определяет содержимое таблицы.
<caption> Определяет наименование таблицы.
<th> Определяет заголовочную ячейку таблицы.
<tr> Определяет строку таблицы.
<td> Определяет ячейку данных таблицы.
<thead> Используется для содержания заголовка группы в таблице (шапка таблицы).
<tbody> Используется для содержания "тела" таблицы.
<tfoot> Используется для содержания "подвала" таблицы (футер).
<col> Определяет заданные свойства столбцов для каждого столбца в пределах тега <colgroup>.
<colgroup> Определяет группу столбцов в таблице.

Стили и семантика

Тег Описание
<style> Элемент, который сообщает браузеру, что внутри него содержится код CSS (стиль).
<div> Определяет любой отдельный блок содержимого и предназначен для деления веб-страницы на фрагменты.
<span> Универсальный контейнер текстового уровня без собственного специального смысла.
<header> Является признаком верхнего колонтитула или баннера, верхней части страницы, которая обычно содержит логотип, навигацию, относящуюся ко всему сайту, заголовок страницы с подзаголовком и т. д.
<footer> Содержит информацию, которая обычно помещается в нижнем колонтитуле страницы, например сведения об авторских правах, другую правовую информацию, некоторые ссылки для навигации по сайту и т. д.
<main> Предназначен для основного содержимого документа (основной контент).
<section> Содержит группировку взаимосвязанного содержимого (раздел).
<article> Применяется для обозначения раздела страницы, содержащего завершенную, независимую композицию. Иными словами, «статью», такую как запись блога, товар в интернет-магазине или просто основной текст страницы.
<aside> Предназначен для обозначения содержимого, относящегося к окружающему этот тег содержимому.
<details> Определяет дополнительные детали, которые пользователь может отобразить или скрыть.
<dialog> Создаёт диалоговое окно, с которым непосредственно работает пользователь для выполнения определенных действий.
<summary> Определяет видимый заголовок для тега <details>.
<hgroup> Объединяет один заголовок h1–h6 с поясняющими абзацами p, например подзаголовком. Не заменяет раздел section.
<search> Обозначает область поиска или фильтрации, например форму поиска по каталогу. Сам не выполняет поиск: обработку запроса задаёт приложение.

Метаданные

Тег Описание
<head> Содержит информацию о документе (сведения о документе, которые не отображаются пользователю).
<meta> Обеспечивает метаданные о HTML документе. Метаданные не отображаются на странице, но интерпретируются браузерами и поисковыми системами.
<base> Задаёт базовый URL для относительных адресов и/или цель переходов по умолчанию. Размещается в head.
<basefont> Не поддерживается в HTML5.
Определяет (по умолчанию) цвет, размер, шрифт для всего текста в документе. Используйте CSS вместо данного элемента.

Программирование

Тег Описание
<script> Элемент используется для определения сценария (скрипта) на стороне клиента (обычно JavaScript).
<noscript> Альтернативный контент для тех пользователей, которые не поддерживают скрипты на стороне клиента (или их отключили).
<applet> Устарело. Историческое встраивание Java-апплетов. Прямой современной HTML-замены для запуска таких плагинов нет.
<embed> Определяет контейнер для интерактивного контента.
<object> Встраивает внешний ресурс, например PDF или изображение, с резервным содержимым. Возможности зависят от браузера.
<param> Устарело Используется для определения параметров для плагинов, встроенных в элемент <object>.
<template> Хранит разметку, которая не отображается сразу. Скрипт может клонировать template.content (фрагмент документа с содержимым шаблона) и вставить результат в документ. Атрибут shadowrootmode (режим открытого или закрытого теневого дерева) превращает шаблон в декларативный Shadow DOM — теневое дерево, созданное без скрипта.
<slot> Задаёт место для содержимого компонента в теневом дереве (Shadow DOM). Имя слота сопоставляется с атрибутом slot передаваемого элемента; запасное содержимое показывается при отсутствии назначенных узлов.

Спецификация

HTML Living Standard.