Справочник HTML
Теги и структура документа: от абзацев и ссылок до форм, таблиц и семантических разделов. Каждый материал содержит пример и задание.
Тег <optgroup>: группы вариантов в списке select
Элемент optgroup объединяет связанные варианты выбора. Он помогает ориентироваться в длинном списке, не превращая заголовки групп в значения, которые можно отправить формой.
Тег <option>: подпись, значение и исходный выбор
Элемент option описывает один вариант в списке выбора. Важно различать текст, который видит человек, и значение, которое получает обработчик формы.
Тег <legend>: общее название группы полей
Legend задаёт подпись группы fieldset. Он особенно полезен там, где несколько переключателей отвечают на один общий вопрос, а каждый вариант имеет собственную короткую подпись.
Тег <caption>: название таблицы в её разметке
Caption связывает название с конкретной таблицей. Это помогает понять, какие данные представлены, особенно когда на странице несколько таблиц похожей структуры.
Тег <colgroup>: оформление группы колонок таблицы
Colgroup описывает группу столбцов таблицы для некоторых настроек представления. Он не заменяет ячейки, строки и смысловые заголовки данных.
Тег <datalist>: подсказки без запрета свободного ввода
Datalist предлагает варианты для связанного поля input. Пользователь может выбрать подсказку или ввести другое значение, поэтому такой список нельзя считать проверкой допустимых ответов.
Тег <output>: отображение результата вычисления
Элемент output представляет результат вычисления или действия пользователя. Он описывает назначение значения, но не содержит встроенного алгоритма расчёта.
Тег <ruby>: пояснение произношения рядом с текстом
Ruby связывает основной фрагмент с короткой аннотацией, например чтением иероглифа. Это смысловая разметка для пояснения, а не универсальный способ поставить мелкую подпись над любым словом.
Тег <ins>: добавление в редактируемом документе
Элемент ins отмечает текст, добавленный в документ. Он полезен для видимого журнала правок, когда читателю важно отличить новое содержание от прежней версии.
Тег <del>: обозначение удалённого фрагмента
Del показывает содержимое, удалённое при редактировании документа. Такой текст остаётся в HTML и доступен читателю, поэтому это способ показать изменение, а не стереть информацию.
Тег <cite>: название источника в тексте
Cite обозначает название произведения или другого творческого источника. Он помогает разметить ссылку на книгу, статью или страницу, не смешивая название с именем автора.
Тег <dfn>: термин в месте его определения
Dfn отмечает определяемый термин в том фрагменте, где объясняется его значение. Он не превращает каждое употребление слова в определение и не создаёт всплывающий словарь автоматически.
Тег <small>: примечание с сохранением читаемости
Small обозначает побочное замечание или мелкий сопроводительный текст. Его смысл не сводится к произвольному уменьшению размера шрифта на любом элементе.
Тег <s>: текст, который больше не актуален
S отмечает содержимое, которое больше не соответствует текущему состоянию. Он отличается от del, обозначающего удаление при редактировании документа.
Тег <bdo>: явное переопределение направления текста
Bdo принудительно задаёт направление отображения вложенного текста. Такой инструмент нужен для специальных случаев, когда обычного алгоритма двунаправленного письма недостаточно.
Тег <q>: короткая цитата внутри предложения
Q выделяет короткую цитату в составе абзаца. Он помогает отличить воспроизведённые слова от собственного повествования без создания отдельного большого блока.
Тег <b>: привлечение внимания без повышения важности
B выделяет фрагмент, к которому нужно привлечь внимание, не объявляя его особенно важным. Это может быть ключевое слово в кратком обзоре.
Тег <i>: фрагмент с иной речевой или терминологической ролью
I обозначает текст, отличающийся от окружающей речи по своей роли: например, иноязычное выражение или специальное обозначение. Он не является универсальным способом сделать любой текст курсивным.
Тег <u>: нетекстовое замечание к фрагменту
U отмечает фрагмент с явно не выраженной словами аннотацией, например слово с отмеченной ошибкой написания. Это не универсальная команда подчёркивания и не замена ссылке.
Тег <summary>: понятное название раскрывающегося блока
Summary задаёт видимую подпись элемента details. По этой подписи читатель решает, стоит ли раскрыть дополнительное объяснение, поэтому она должна описывать содержимое.
Атрибут pattern: формат значения текстового поля
Pattern задаёт регулярное выражение для проверки значения поддерживаемого поля ввода. Он полезен для коротких кодов с заранее определённым форматом, который можно понятно объяснить пользователю.
Атрибут loading: отложенная загрузка изображения
Loading помогает браузеру выбрать момент загрузки изображения. Значение lazy подходит для части картинок ниже первого экрана, когда их загрузку можно отложить до приближения к области просмотра.
Атрибут decoding: подсказка о декодировании картинки
Decoding подсказывает браузеру, как согласовать декодирование изображения с отображением другого содержимого. Он относится к подготовке изображения к показу и не задаёт очередь сетевых запросов напрямую.
Атрибут download: ссылка на скачивание файла
Download сообщает о намерении скачать ресурс по ссылке и может предложить имя сохраняемого файла. Полезно заранее обозначить тип и размер реального файла в видимом тексте ссылки.
Атрибут inert: временно неинтерактивная область
Inert делает поддерево документа неинтерактивным и исключает его содержимое из обычного фокуса и дерева доступности. Это инструмент управления состоянием интерфейса, а не просто декоративное затемнение.
Тег <thead>: группа заголовочных строк таблицы
Thead объединяет строки, описывающие столбцы таблицы. Он отделяет заголовочную часть от основных данных и помогает выразить структуру независимо от фонового цвета или жирного шрифта.
Тег <tbody>: основная группа строк таблицы
Tbody группирует основные строки с данными. Явная запись этой группы делает структуру таблицы понятнее и помогает писать предсказуемые CSS-селекторы и запросы JavaScript.
Тег <tfoot>: итоговые строки таблицы
Tfoot выделяет итоговую часть таблицы, например сумму или сводку по данным. Его назначение — структура документа; сам элемент не выполняет вычисления и не обновляет результат.
Тег <tr>: строка с согласованным набором ячеек
Tr объединяет ячейки одной строки таблицы. Порядок td и th определяет соответствие колонкам, поэтому пропущенная ячейка может сдвинуть смысл всех следующих значений.
Тег <th>: заголовочная ячейка и направление scope
Th обозначает ячейку, которая объясняет другие ячейки таблицы. Такой заголовок может находиться не только сверху, но и в начале строки с названием объекта.