Справочник HTML
Теги и структура документа: от абзацев и ссылок до форм, таблиц и семантических разделов. Каждый материал содержит пример и задание.
Тег <code>: фрагменты программного кода
Как отличить имя свойства от обычного текста и безопасно показать HTML как пример.
Тег <pre>: сохранение пробелов и переносов
Как показать многострочный пример без потери отступов и не растянуть мобильную страницу.
Тег <blockquote>: развёрнутые цитаты
Как отделить цитируемый фрагмент от собственного текста и указать источник.
Тег <time>: даты и время
Как показать удобную дату человеку и однозначное значение браузеру.
Теги <dl>, <dt>, <dd>: термины и описания
Как оформить словарь или параметры объекта без искусственной таблицы.
Теги <fieldset> и <legend>: группы полей
Как связать несколько элементов формы общей подписью и не потерять подписи отдельных полей.
Тег <progress>: ход выполнения
Как показать долю завершённой работы и чем неопределённый прогресс отличается от нулевого.
Тег <meter>: значение в диапазоне
Как показать заполненность или показатель с известными границами.
Тег <picture>: выбор изображения
Как выбирать формат или кадр изображения под условия просмотра и сохранять запасной img.
Тег <dialog>: диалоговое окно
Чем модальный диалог отличается от немодального и что нужно предусмотреть для управления фокусом.
id: уникальная цель ссылки и связь элементов
Атрибут id задаёт идентификатор элемента, по которому на него ссылаются якоря, подписи и JavaScript.
class: несколько классов у одного элемента
Атрибут class объединяет элементы для оформления и позволяет назначить одному элементу несколько независимых признаков.
lang: язык документа и отдельного фрагмента
Атрибут lang сообщает язык текста, чтобы браузер и вспомогательные технологии могли выбирать подходящие правила чтения и обработки.
dir: направление письма и неизвестный текст
Атрибут dir задаёт направление текста и помогает корректно показывать фрагменты на языках с письмом справа налево.
hidden: временно исключить фрагмент из представления
Атрибут hidden помечает содержимое, которое сейчас не следует показывать пользователю, например неактуальный шаг интерфейса.
tabindex: порядок фокуса без положительных чисел
Атрибут tabindex управляет возможностью фокусировки элемента и его участием в последовательной навигации клавишей Tab.
data-*: дополнительные данные элемента
Атрибуты data-* хранят небольшие прикладные данные рядом с элементом, когда стандартного HTML-атрибута для них нет.
contenteditable: редактируемый фрагмент страницы
Атрибут contenteditable разрешает пользователю изменять содержимое элемента непосредственно в документе.
spellcheck: проверка орфографии по назначению поля
Атрибут spellcheck подсказывает браузеру, нужна ли проверка орфографии в редактируемом тексте.
inputmode: подходящая экранная клавиатура
Атрибут inputmode подсказывает мобильному браузеру, какую экранную клавиатуру удобнее предложить для ввода.
autocomplete: понятные браузеру назначения полей
Атрибут autocomplete описывает назначение поля, чтобы браузер мог корректнее подставлять сохранённые данные пользователя.
required: обязательное поле и пустое значение
Атрибут required включает нативную проверку обязательности для поддерживающих его элементов формы.
disabled: неактивный элемент и данные формы
Атрибут disabled отключает поддерживаемый элемент формы, например кнопку или поле, когда действие временно недоступно.
readonly: запрет изменения без отключения поля
Атрибут readonly позволяет показывать значение поддерживаемого текстового поля без возможности редактирования пользователем.
name: ключ данных при отправке формы
Атрибут name задаёт имя, под которым значение элемента формы попадает в отправляемые данные.
placeholder: пример ввода без подмены подписи
Атрибут placeholder показывает короткую подсказку в пустом поле, например пример ожидаемого формата.
minlength: минимальная длина текстового ввода
Атрибут minlength задаёт минимальную длину пользовательского ввода для поддерживаемых текстовых полей.
maxlength: ограничение длины поля
Атрибут maxlength ограничивает длину ввода в поддерживаемых текстовых полях и многострочном textarea.
min и max: диапазон чисел и дат
Атрибуты min и max задают допустимые границы для поддерживаемых числовых полей, дат и других ограниченных значений.
step: разрешённый шаг числового поля
Атрибут step описывает дискретность допустимых значений числового поля, а не только величину изменения стрелками.