Textria
Справочный раздел

HTML: теги, атрибуты и примеры

Структура документа, текст, ссылки, медиа, списки, таблицы, формы и семантические элементы.

Шпаргалка HTML

Разметка, результат и назначение

Нажмите на пример разметки, чтобы скопировать его целиком. В колонке результата показано компактное визуальное представление.

Разметка Результат Когда использовать
Структура документаОбъявление HTML, язык страницы, метаданные и видимое содержимое. 5
Стандартный режим
 Объявление типа документа Ставит браузер в стандартный режим обработки современного HTML.
Язык страницы: ru
 Корневой элемент и язык Оборачивает документ; lang помогает озвучиванию, переводу и поиску.
▣ Название страницы
 Метаданные и заголовок вкладки head хранит невидимые настройки страницы, а title задаёт название вкладки.
UTF-8 Адаптивная ширина
 Кодировка и адаптивность Задаёт UTF-8 и корректную ширину страницы на мобильных устройствах. meta — пустой элемент
body → main → содержимое
 Видимое содержимое Содержит всё, что браузер показывает пользователю на странице.
Текст и смыслЗаголовки, абзацы, смысловое выделение, цитаты и код. 6

Заголовок раздела

 Заголовки h1–h6 Создают иерархию документа; уровень выбирают по структуре, а не размеру шрифта.

Короткий абзац текста.

 Абзац Объединяет связанные предложения в самостоятельный текстовый блок.
Важно
 Сильная важность Отмечает фрагмент повышенной важности, обычно отображаемый полужирным.
Нужно сделать именно сейчас.
 Смысловой акцент Меняет смысловой акцент фразы, обычно отображаясь курсивом.
Короткая цитата.
 Блочная цитата Оформляет отдельную цитату из другого источника. 
const ready = true;
 Фрагмент и блок кода code обозначает код, а pre сохраняет пробелы и переносы строк.
Ссылки и медиаПереходы, изображения с подписями, адаптивная графика и видео. 5
Открыть сайт
 Ссылка Создаёт переход к странице, файлу, адресу почты или якорю.
IMG · Горный пейзаж
 Изображение Вставляет изображение; alt передаёт смысл, а размеры уменьшают скачки макета. img — пустой элемент
CHART
Продажи за год
 Иллюстрация с подписью Связывает самостоятельную иллюстрацию, схему или код с подписью.
wide.webp → small.webp
 Адаптивное изображение Позволяет браузеру выбрать подходящий источник изображения по условию.
▶ 00:00 / 01:24
 Видео Встраивает видеоплеер; controls включает стандартные элементы управления.
Списки и таблицыОднородные пункты, последовательности, пары терминов и табличные данные. 4
  • Первый пункт
  • Второй пункт
 Маркированный список Объединяет пункты, порядок которых не меняет смысл.
  1. Подготовить
  2. Проверить
 Нумерованный список Описывает последовательность шагов или ранжированные пункты.
HTML
Язык разметки
 Список терминов Связывает термины, имена или вопросы с описаниями.
Статусы
ИмяСтатус
АннаГотово
 Таблица данных Представляет связанные данные по строкам и столбцам; th задаёт заголовки.
ФормыОтправка данных, подписи полей, многострочный ввод, выбор и действия. 5
form · POST → /send
 Форма Объединяет поля и задаёт адрес и способ отправки данных.
Подписанное поле label связывает понятную подпись с полем через for и id. input — пустой элемент
Многострочный ввод Создаёт поле для комментария, описания или другого длинного текста.
Выбор из списка Предлагает выбрать один вариант из компактного списка.
Кнопка Запускает действие; явный type защищает от неожиданной отправки формы.
Семантика и интерактивностьОриентиры страницы, самостоятельные материалы, дополнения и раскрывающиеся блоки. 5
header → nav
 Шапка и навигация header вводит раздел, а nav обозначает крупный блок навигационных ссылок.
main · главное содержимое
 Главное содержимое Обозначает основное уникальное содержимое страницы.
section → article
 Раздел и самостоятельный материал section группирует тему, а article подходит для независимо распространяемого материала.
aside · дополнение footer · сведения
 Дополнение и подвал aside содержит дополнение, а footer — сведения о разделе или странице.
ПодробнееДополнительный текст
 Раскрывающийся блок Создаёт доступный раскрывающийся блок без JavaScript.
Короткая памятка

Сохраняйте смысл разметки

Начинайте с семантики
Сначала выбирайте элемент по смыслу содержимого и только затем используйте универсальные div или span.
Подписывайте элементы формы
Связывайте label и input одинаковыми for и id; смысловые изображения описывайте через alt.
Заключайте атрибуты в кавычки
Единообразные двойные кавычки упрощают чтение и безопасное редактирование разметки.
Проверяйте вложенность
Не вкладывайте интерактивные элементы друг в друга, закрывайте парные теги и валидируйте документ.

Семантика элементов сверена со WHATWG HTML Living Standard.

Кодировать HTML-сущности
Связанные инструменты

Продолжите работу с текстом

Скопируйте символ, преобразуйте разметку, очистите фрагмент или сохраните результат в блокноте.

FAQ

Вопросы об HTML

Чем тег отличается от элемента и атрибута?

Тег — это запись в исходнике, например <p> или </p>. Элемент — получившийся узел вместе с содержимым. Атрибут вроде class или lang добавляет элементу настройку.

Какие HTML-элементы не имеют закрывающего тега?

Пустые элементы img, input, meta, link, br, hr и source не содержат дочерних узлов и не используют закрывающий тег в синтаксисе HTML.

Когда использовать div и span?

Используйте их, когда содержимому не подходит семантический элемент. div — универсальный блочный контейнер, span — универсальный контейнер внутри строки.

Зачем нужны alt, label и семантические ориентиры?

Они передают смысл и связи вспомогательным технологиям, а также делают структуру понятнее браузерам, поисковым системам и разработчикам.