Вся карта HTML

Здесь каждый элемент актуального стандарта, сгруппированный по назначению. Понимаешь, зачем нужен каждый, — значит, знаешь HTML целиком.

Документ и метаданные

• html — корень документа
• head — служебная часть
• title — заголовок вкладки
• meta — метаданные: кодировка, viewport, описание
• link — связанные ресурсы: стили, иконки, предзагрузка
• style — встроенные стили
• base — базовый адрес ссылок
• body — видимое содержимое

Структура страницы

• header — шапка страницы или раздела
• nav — основная навигация
• main — главное содержимое
• article — самостоятельный материал
• section — тематический раздел
• aside — побочное содержимое
• footer — подвал
• search — область поиска
• address — контакты
• hgroup — заголовок с подзаголовком
• h1 · h2 · h3 · h4 · h5 · h6 — заголовки

Группировка содержимого

• p — абзац
• div — блочный контейнер без смысла
• hr — тематический разрыв
• pre — текст с сохранёнными пробелами
• blockquote — блочная цитата
• ol · ul · li — списки
• menu — список команд (как ul для панели инструментов)
• dl · dt · dd — список определений
• figure · figcaption — иллюстрация с подписью

Строчная семантика

• a — ссылка
• strong · em — важность / ударение
• b · i · u · s — внимание / другой голос / пометка / неактуально
• mark — подсветка
• small — примечание
• abbr — сокращение
• dfn — определяемый термин
• q · cite — цитата / название произведения
• code · kbd · samp · var — код / ввод / вывод / переменная
• time · data — дата / машинное значение
• sub · sup — индексы
• span — строчный контейнер без смысла
• br · wbr — перенос / возможный перенос
• bdi · bdo — изоляция / переворот направления
• ruby · rt · rp — подписи произношения
• ins · del — правки

Медиа и встраивание

• img — изображение
• picture · source — варианты изображения
• video · audio — видео и звук
• track — субтитры
• iframe — встроенная страница
• embed · object — внешние ресурсы
• map · area — кликабельные области
• svg — векторная графика
• math — формулы MathML
• canvas — холст для рисования скриптом

Таблицы

• table — таблица
• caption — название
• thead · tbody · tfoot — группы строк
• tr — строка
• th · td — заголовок / ячейка
• colgroup · col — группы столбцов

Формы

• form — форма
• label — подпись
• input — поле (десятки типов)
• button — кнопка
• select · option · optgroup — выпадающий список
• datalist — подсказки ввода
• textarea — многострочный текст
• fieldset · legend — группа полей
• output — результат вычисления
• progress · meter — ход процесса / измерение

Интерактивность и скрипты

• details · summary — раскрывающийся блок
• dialog — диалоговое окно
• script · noscript — скрипт / запасной вариант
• template · slot — шаблон / слот компонента

Как пользоваться

Нужно что-то разметить — найдите группу по назначению и выберите самый точный элемент. Если подходящего нет — div или span. У каждого элемента в списке — ссылка на урок, где он разобран.

<p>Проверьте себя: какие элементы нужны для <mark>цитаты с автором</mark>?</p>
<!-- Ответ: figure + blockquote + figcaption -->

Ваш ход