Справочник по HTML

Play ITЗагрузка интерактивного демо…

СПРАВОЧНИК

---

Назначение

Базис: Операторы — общая теория действий над значениями в коде; в разметке HTML отдельной системы операторов нет — она появится в CSS и JavaScript.

Синтаксис, операторы, команды клиента и ограничения HTML. Учебный курс: раздел.

---

Краткое пояснение

Шпаргалка по HTML — таблицы синтаксиса, API, команд и параметров — для быстрого поиска фактов.

---

Быстрый старт

Задача	Подсказка
Синтаксис	таблицы операторов и типов ниже
CLI / клиент	см. разделы с командами в справочнике
Ограничения	раздел "Совместимость" (если есть)

---

Справочные таблицы

Содержание справочника

• Глобальные атрибуты и корневые/мета-элементы
• Скрипты, шаблоны и стили
• Секционные элементы
• Группировка контента
• Текстовое содержимое и фразовые элементы
• Встроенные мультимедийные и интерактивные элементы
• Табличные элементы
• Формы и элементы управления
• Интерактивные элементы
• Скриптовые и специальные элементы

---

Play ITЗагрузка интерактивного демо…

Разметка полей формы (label, input, select, required) — HTML-страницы целиком (форма). Форма входа с центрированием и разбором CSS — готовые макеты HTML+CSS (раздел "Форма входа"). На Tailwind — Tailwind — готовые блоки.

---

Глобальные атрибуты и корневые/мета-элементы

Глобальные атрибуты

Могут быть заданы на любом HTML-элементе (за исключением некоторых случаев, оговорённых в спецификации, напр., у <base>, <script> без src, <title> и др.).

Атрибут	Тип	Описание	Допустимые значения	Примечания
accesskey	строка	Горячая клавиша для активации/фокусировки	Непустая строка (обычно один символ: a, s, 1, и т.п.). Браузеры добавляют модификатор (например, Alt+Shift+<key> в Firefox на Windows).	Должен быть уникальным в пределах окна. Не рекомендуется для массового использования из-за конфликтов с UA-шорткатами.
autocapitalize	перечисление	Управление автозаглавием ввода	off, none, on, sentences, words, characters	Применяется только к элементам редактируемого содержимого (contenteditable, <input>, <textarea>). Не влияет на type="email", type="password", type="url".
autofocus	булев	Автоматический фокус при загрузке	— (boolean attribute)	Может быть только у одного элемента в документе. Игнорируется, если элемент недоступен (например, disabled, hidden, вне viewport и т.п.).
class	токены (space-separated)	Список CSS-классов	Любая непустая строка без пробелов внутри токенов	Поддерживает CSS :is(), :where(), :has(). Валидируется как set уникальных токенов.
contenteditable	перечисление / булев	Редактируемость содержимого	true, false, plaintext-only, events, caret, typing, "" (пустая строка = true)	Наследуется. plaintext-only разрешает только plain text (без форматирования). Не влияет на <input>, <textarea>.
contextmenu	IDREF	Идентификатор кастомного контекстного меню (<menu type="context">)	Идентификатор элемента <menu>	Deprecated, не поддерживается в современных браузерах (Chrome ≥80, Firefox ≥84). Использовать JS + contextmenu event.
dir	перечисление	Направление текста	ltr, rtl, auto	auto использует алгоритм Unicode Bidirectional для выбора направления по первому сильному символу.
draggable	перечисление	Разрешение перетаскивания	true, false, auto	По умолчанию: auto (для <a href>, <img> — true; иначе — false). Требует обработки dragstart, иначе не работает.
enterkeyhint	перечисление	Подсказка для действия по Enter в виртуальной клавиатуре	enter, done, go, next, previous, search, send	Только для элементов формы (<input>, <textarea>, [contenteditable]). Эквивалент inputMode + formaction-логики.
hidden	булев / строка	Скрытие элемента	— (boolean) или "until-found" (experimental)	hidden без значения = true. hidden="until-found" — для будущей функциональности "показать при поиске" (Chrome Origin Trial). Влияет на display: none !important в UA CSS.
id	ID	Уникальный идентификатор	Непустая строка без пробелов (чувствительна к регистру)	Должен быть уникален в пределах документа. Поддерживает document.getElementById(), #id в CSS, aria-labelledby, for, headers и др.
inert	булев	Блокировка взаимодействия и событий	—	Элемент и его потомки становятся неинтерактивными (как pointer-events: none + tabindex=-1 + игнор событий). Поддержка: Chrome ≥102, Firefox ≥112, Safari ≥16.4.
inputmode	перечисление	Тип виртуальной клавиатуры	none, text, decimal, numeric, tel, search, email, url	Только для <input>, <textarea>, [contenteditable]. Не гарантирует валидацию — только подсказка для UA.
is	строка	Кастомный тег для built-in element	Любое валидное имя кастомного элемента (., - обязателен)	Например: <button is="custom-button">. Требует customElements.define() с extends: 'button'.
itemid	URL	Идентификатор предмета микроданных (Microdata)	Абсолютный или относительный URL	Должен быть внутри элемента с itemscope.
itemprop	токены	Свойства предмета микроданных	Токены, разделённые пробелами (например, name, image, description)	Должен быть внутри itemscope.
itemref	IDREFS	Ссылка на дополнительные элементы микроданных	Список ID, разделённых пробелами	Элементы с этими ID добавляются в предмет как свойства.
itemscope	булев	Объявление предмета микроданных	—	Создаёт новый предмет. Дочерние itemprop относятся к нему.
itemtype	URL	Тип предмета микроданных	Один или несколько абсолютных URL, разделённых пробелами	Например: https://schema.org/Person.
lang	язык	Язык содержимого	BCP 47 (например, en, ru-RU, zh-Hans, ar-EG)	Наследуется. Влияет на :lang(), tts, орфографию, collation.
nonce	base64	Криптографический nonce для CSP	Base64-строка (без padding, по RFC 7636)	Используется в Content-Security-Policy: script-src 'nonce-...'. Должен быть уникален на каждый запрос.
part	токены	Экспорт части shadow DOM для стилизации	Список имён, разделённых пробелами	Используется с ::part() в CSS. Только внутри shadow DOM.
popover	перечисление	Управление popover-поведением	auto, manual, "" (пустая строка = auto)	Экспериментально (Chrome ≥114). Требует popover="auto" + popovertarget, showPopover()/hidePopover().
slot	строка	Имя слота в shadow DOM	Любая строка (без запрещённых символов)	Используется для распределения light DOM в shadow DOM.
spellcheck	перечисление	Проверка орфографии	true, false, "" (пустая строка = default UA policy)	Применяется к редактируемому контенту. Не влияет на type="password".
style	CSS declaration list	Инлайновые стили	Валидные CSS-декларации (разделённые ;)	Парсится браузером; ошибки игнорируются. Приоритет выше, чем у <style>/внешних.
tabindex	целое	Порядок табуляции и фокусируемость	Целое число: отрицательное — фокус только по JS; 0 — порядок потока; >0 — приоритет (не рекомендуется)	-1 — фокус по focus(), но не в порядке tab. Порядок: сначала >0 по возрастанию, затем 0 в порядке DOM.
title	CDATA	Подсказка (tooltip), описание	Любая строка (отображается при ховере в большинстве UA)	Не заменяет aria-label/aria-describedby. Для accessibility — избегать как основного описания.
translate	перечисление	Управление переводом	yes, no	Влияет на поведение инструментов перевода (Google Translate и др.). Наследуется.

---

Корневые и мета-элементы

<html>

• Категория содержимого: Document metadata, flow content (но только один дочерний <head> и один <body>)
• Модель содержимого: Ровно один <head>, затем ровно один <body> (в порядке).
• Глобальные атрибуты — manifest, xmlns (устаревший, для XHTML)
• Специфические атрибуты:
  • manifest — URL к файлу манифеста приложения (.appcache). Deprecated. Использовать Service Workers.
• ARIA: role=document, aria-roledescription="document" (рекомендуется).
• Примечание: lang на <html> — основной язык документа. Обязателен для WCAG.

---

<head>

• Категория: None (метаданные)
• Модель содержимого — Мета-элементы — <title>, <base>, <link>, <style>, <meta>, <script>, <noscript>, <template>.
• Глобальные атрибуты: нет (но разрешены, хотя не влияют на поведение).
• Особенность: Не отображается, не входит в rendering tree.

---

<title>

• Обязательность: Ровно один <title> в <head>.
• Категория: Metadata
• Модель содержимого — Phrasing content (но только текст, без <script>, <style>, <template>)
• Специфические атрибуты: нет.
• Ограничения — Не может содержать символы <, >, & без экранирования. Макс. рекомендуемая длина — 60–70 символов для SEO.

---

<base>

• Категория: Metadata
• Модель содержимого: пустой
• Атрибуты:
  • href — базовый URL для разрешения относительных ссылок. Обязателен, если нет target.
  • target — целевое окно/фрейм по умолчанию (_self, _blank, _parent, _top, имя фрейма). Обязателен, если нет href.
• Ограничения:
  • Только один <base> в документе.
  • Должен быть до любых <link>, <script>, <img> и др., использующих URL.
  • Не влияет на window.location, postMessage, fetch() без явного URL.

---

<meta>

• Категория: Metadata
• Модель содержимого: пустой
• Атрибуты — взаимоисключающие наборы — либо name + content, либо http-equiv + content, либо charset, либо itemprop + content.

Набор	Атрибуты	Применение	Примеры значений
charset	charset	Кодировка документа	utf-8, windows-1251 (рекомендуется utf-8)
name	name, content	Метаданные для поисковиков, окружения	viewport, description, keywords, author, theme-color, color-scheme, referrer, robots, google, twitter:card, og:*
http-equiv	http-equiv, content	Эмуляция HTTP-заголовков	content-type (устар.), default-style, refresh, x-ua-compatible, content-Безопасность-policy

Ключевые name значения:

• viewport: width=device-width, initial-scale=1 — обязательно для мобильных.
• theme-color: #4285f4 — цвет темы в адресной строке (Chrome, Android).
• color-scheme: light dark — поддержка prefers-color-scheme.
• referrer — no-referrer, same-origin, strict-origin-when-cross-origin — политика реферера.
• robots — index, follow, noindex, nofollow — инструкции поисковикам.

http-equiv особенности:

• refresh: 5;url=https://example.com — редирект через 5 сек. Не рекомендуется (доступность).
• content-Безопасность-policy: default-src 'self' — inline-CSP (менее безопасен, чем HTTP-заголовок).

---

<link>

• Категория: Metadata (если в <head>), flow (если rel="stylesheet" и media позволяет)
• Модель содержимого: пустой
• Обязательные атрибуты: rel (кроме случая itemprop + itemscope)
• Специфические атрибуты:

Атрибут	Описание	Допустимые значения / примечания
rel	Роль связи	stylesheet, icon, apple-touch-icon, manifest, preload, prefetch, dns-prefetch, preconnect, modulepreload, canonical, alternate, search, help, license, и др.
href	URL ресурса	Обязателен для большинства rel, кроме dns-prefetch (href="https://example.com"), preconnect (href="https://cdn.example.com").
as	Тип предзагружаемого ресурса	audio, document, embed, fetch, font, image, object, script, style, track, video, worker — только с rel=preload/prefetch.
crossorigin	CORS mode	anonymous, use-credentials, "" (пустая строка = anonymous)
integrity	SRI hash	sha256-..., sha384-..., sha512-... — Base64 hash. Обязателен при crossorigin.
media	Условие применения	Media query (например, screen and (min-width: 600px)). Для rel=stylesheet — откладывает применение до соответствия.
type	MIME type	text/css, image/x-icon, application/manifest+json — подсказка для UA; не обязательна, но ускоряет парсинг.
sizes	Размеры иконок	16x16, 32x32, 192x192, any — для rel=icon, apple-touch-icon.
color	Цвет иконки (monochrome)	#ff0000 — для rel=mask-icon (Safari pinned tabs).
blocking	Блокировка парсинга	render — для rel=stylesheet (экспериментально: блокирует рендер, но не парсинг DOM)

Важные rel значения:

• preload: немедленная загрузка с высоким приоритетом. Требует as.
• prefetch: загрузка в фоне, низкий приоритет (для следующих страниц).
• preconnect: установка DNS/TLS/TCP-соединения заранее.
• dns-prefetch: только DNS lookup (устаревает в пользу preconnect).
• modulepreload: предзагрузка JS-модуля (ESM).
• canonical: канонический URL (для SEO).

---

Скрипты, шаблоны и стили

<script>

• Категория содержимого: Metadata (в <head>), flow (в <body>)
• Модель содержимого:
  • Пусто, если имеется атрибут src.
  • script data (CDATA), если src отсутствует — текст, интерпретируемый как JavaScript (без парсинга тегов).
• Глобальные атрибуты: да, за исключением is (не применимо)
• Специфические атрибуты:

Атрибут	Тип	Описание	Значения / примечания
src	URL	Внешний JS-файл	При наличии src содержимое элемента игнорируется (даже если не пустое).
type	строка	MIME-тип скрипта	- text/javascript (по умолчанию, устаревший, но допустим) - module — ES-модуль - importmap — JSON импорт-мап - speculationrules — JSON speculation rules - application/json, text/plain и др. — не исполняются, но доступны через .textContent (для шаблонов данных)
async	булев	Асинхронная загрузка и выполнение	Применим только при наличии src. Загружается параллельно парсингу HTML, выполняется сразу после загрузки (без ожидания парсинга). Порядок выполнения не гарантируется между несколькими async.
defer	булев	Отложенное выполнение	Применим только при наличии src. Загружается параллельно парсингу, выполняется после завершения парсинга, до события DOMContentLoaded, в порядке следования в документе.
nomodule	булев	Запуск только в браузерах без поддержки ES-модулей	Используется для fallback: <script nomodule src="legacy.js">. Современные браузеры его пропускают.
crossorigin	перечисление	CORS mode для src	anonymous, use-credentials, "" (как anonymous). Требуется при доступе к ошибкам через window.onerror.
integrity	строка	Subresource Integrity (SRI)	sha256-…, sha384-…, sha512-… (Base64). Проверяется при загрузке. При несовпадении — скрипт не выполняется, ошибка в консоль.
referrerpolicy	перечисление	Политика реферера для src	no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
fetchpriority	перечисление	Приоритет сетевого запроса	high, low, auto (по умолчанию). Влияет на приоритет в HTTP/2 и HTTP/3. Поддержка: Chrome ≥107, Edge ≥107, Firefox ≥112 (частично).

Особенности выполнения:

• <script> без src, type, async, defer — блокирует парсинг HTML до завершения выполнения.
• type="module" автоматически включает:
  • defer поведение (даже без атрибута defer),
  • CORS (по умолчанию — same-origin, crossorigin="anonymous" явно разрешает кросс-доменные),
  • строгий режим ("use strict"),
  • import/export, top-level await.
• type="importmap": должен быть первым скриптом в документе (до любых import). Содержимое — JSON с "imports" и "scopes".
• type="speculationrules" — содержит JSON с правилами предварительного рендеринга/навигации (например, ["prerender", "prefetch"]). Требует Content-Security-Policy: speculation-rules '...';.

Валидационные ограничения:

• async и defer могут быть вместе (но async имеет приоритет — отменяет defer семантику).
• nomodule несовместим с type="module" (игнорируется, если указано оба).
• integrity требует crossorigin.

---

<noscript>

• Категория содержимого: Metadata (в <head>), flow (в <body>)
• Модель содержимого:
  • В <head> — только <link>, <style>, <meta> (те, что разрешены в <head>).
  • В <body>: flow content.
• Семантика: Содержимое отображается/выполняется, только если JavaScript отключён в UA.
• Особенности:
  • В <head>: может содержать <link rel="stylesheet"> — позволяет подключить fallback-стили при отключённом JS.
  • Не является заменой graceful degradation — современные практики избегают <noscript> в пользу progressive enhancement.
  • Не срабатывает при блокировке JS CSP или javascript: в href.

---

<template>

• Категория содержимого — Metadata, phrasing, flow (в зависимости от контекста)
• Модель содержимого — Любое содержимое (включая <script>, <style>, <template>), но неактивное.
• Семантика: Контейнер для неактивного клонируемого DOM-фрагмента.
• Особенности:
  • Содержимое не парсится как активный DOM, не создаётся в дереве, не выполняет скрипты, не загружает ресурсы (<img>, <audio> и т.п. не инициируют запросы).
  • Доступ через .content (DocumentFragment).
  • .innerHTML возвращает исходный HTML (без нормализации, как в <script type="text/html">, но валидный).
  • Поддерживает id, class, data-*, но document.getElementById() не находит элементы внутри <template>.
  • Широко используется в Web Components, SSR-гидратации, клиентских шаблонизаторах.
• Глобальные атрибуты: да.
• ARIA: не фокусируем, не интерактивен — role=presentation по умолчанию.

---

<slot>

• Категория содержимого: phrasing, flow (но только внутри shadow DOM)
• Модель содержимого: пустой (content распределяется из light DOM)
• Семантика: Точка распределения содержимого из light DOM в shadow DOM (Shadow DOM Composition).
• Атрибуты:
  • name (опционально): именованный слот. Light DOM элементы со slot="name" попадают сюда.
  • Без name — default slot (все элементы без slot или с slot="").
• Особенности:
  • Только валиден внутри <template> (для attachShadow({mode: 'open|closed'})) или в shadow root.
  • В light DOM <slot> игнорируется (не имеет эффекта).
  • Поддерживает fallback-содержимое: <slot><p>Fallback</p></slot> — отображается, если light DOM не предоставляет контент.
  • События (slotchange) — при изменении распределённого контента.
• DOM-свойства:
  • .assignedNodes({flatten: true}) — получить распределённые узлы.
  • .assignedElements() — только элементы.

---

<style>

• Категория содержимого: Metadata (в <head>), flow (в <body> и даже в shadow DOM)
• Модель содержимого: CSS data (CDATA) — текст, интерпретируемый как CSS.
• Специфические атрибуты:

Атрибут	Тип	Описание	Значения
type	MIME	MIME-тип стилей	text/css (по умолчанию, устаревший, но допустим). Другие значения (например, text/scss) приводят к игнорированию содержимого.
media	строка	Условие применения	Media query (например, screen and (min-width: 600px)). Если media не соответствует — стили не применяются, но всё равно парсятся и хранятся в CSSOM.
nonce	base64	CSP nonce	Для Content-Security-Policy: style-src 'nonce-...'. Обязателен при отсутствии unsafe-inline.
title	строка	Альтернативный стиль	При title ≠ "" и rel="alternate stylesheet" (в <link>) — стиль становится альтернативным (выбираемым пользователем). Для <style> — редко используется.
disabled	булев	Отключение стилей	Не стандартный, но поддерживается в DOM: style.disabled = true — временно отключает правила. Не атрибут в HTML.

Особенности:

• В <body> — разрешено по спецификации (с 2013), применяется сразу после парсинга (без блокировки рендеринга, но может вызывать FOUC при динамическом добавлении).
• В Shadow DOM: стили изолированы (scoped by default), не влияют на light DOM.
• Поддержка @import внутри <style> — разрешено, но блокирует парсинг CSSOM и не рекомендуется.
• <style> с media не соответствующей текущей — не применяется, но остаётся в document.styleSheets.

---

<link rel="stylesheet">

Уточнение поведения:

Условие	Парсинг HTML	Выполнение JS	Рендеринг (First Paint)
<link rel="stylesheet"> (в <head>)	Блокируется до загрузки и парсинга CSS	Блокируется	Блокируется (FOUC избегается)
<link rel="stylesheet" media="print">	Не блокируется	Не блокируется	Не блокируется (но может откладывать DOMContentLoaded)
<link rel="preload" as="style"> + onload="this.rel='stylesheet'"	Не блокируется	Не блокируется	Может вызвать FOUC, но ускоряет загрузку
<link rel="stylesheet" disabled>	Не блокируется	Не блокируется	Не применяется

Важно:

• rel="stylesheet" всегда блокирует DOMContentLoaded, даже если media не соответствует.
• rel="preload" as="style" не блокирует парсинг, но требует динамической смены rel для применения.

---

Секционные элементы

Секционные элементы определяют общую структуру документа и создают outline (иерархию секций). Их правильное использование критично для навигации (включая assistive technologies), SEO и семантической целостности.

Каждый из них имеет категорию sectioning content (кроме div, main, address), что означает:

• создаёт новую секцию в outline;
• может содержать заголовки (h1–h6), которые относятся именно к этой секции;
• может иметь собственный outline (вложенные секционные элементы — подсекции).

---

<body>

• Категория содержимого: Flow
• Модель содержимого: Flow content (все элементы, кроме мета-элементов и <head>)
• Специфические атрибуты:
  • onafterprint, onbeforeprint, onbeforeunload, onhashchange, onlanguagechange, onmessage, onmessageerror, onoffline, ononline, onpagehide, onpageshow, onpopstate, onrejectionhandled, onstorage, onunhandledrejection, onunload — глобальные обработчики событий (устаревший способ, предпочтительно использовать addEventListener)
• Особенности:
  • Единственный дочерний элемент <html> (после <head>).
  • Не создаёт новую секцию (хотя и является корнем outline).
  • Поддерживает background, bgcolor, text, link, vlink, alink — устаревшие, игнорируются в strict DOCTYPE.
  • По умолчанию: margin: 8px, display: block.

---

<section>

• Категория содержимого: Flow, sectioning content
• Модель содержимого: Flow content
• Семантика: Тематическая группа контента, обычно с заголовком. Не является универсальным контейнером (div предпочтительнее для стилей/скриптов).
• Требования:
  • Должен иметь заголовок (явный — <h1–h6>, или неявный — aria-labelledby/aria-label). Без заголовка — нарушение семантики.
  • Не использовать вместо <div> только для стилей.
• ARIA mapping: role=region (если есть aria-labelledby/aria-label), иначе role=generic.
• Когда использовать — Главы, вкладки, карточки с подзаголовком.

---

<nav>

• Категория содержимого: Flow, sectioning content
• Модель содержимого: Flow content
• Семантика — Раздел с навигационными ссылками (основная навигация, оглавление, пагинация). Не все ссылки — навигация.
• Требования:
  • Основное назначение — перемещение по документу/сайту.
  • Может быть несколько (<nav> для главного меню, отдельный — для TOC).
• ARIA mapping: role=navigation (явно не требуется, но можно добавить aria-label="Main").
• Best practice: Внутри — <ul>/<ol> с <li><a>…</a></li>.

---

<article>

• Категория содержимого: Flow, sectioning content
• Модель содержимого: Flow content
• Семантика — Самодостаточная композиция, логически независимая от контекста — пост, новость, комментарий, виджет погоды, карточка товара.
• Особенности:
  • Может быть вложен в другой <article> (например, комментарий внутри поста).
  • Должен иметь заголовок (рекомендуется).
  • Подходит для syndication (RSS/Atom).
• ARIA mapping: role=article.

---

<aside>

• Категория содержимого: Flow, sectioning content
• Модель содержимого: Flow content
• Семантика — Содержимое косвенно связанное с основным потоком — сноски, боковые панели, цитаты, реклама, профиль автора.
• Особенности:
  • Если содержимое напрямую связано с секцией — использовать внутри <section>/<article>, а не глобально.
  • Не использовать для навигации (это <nav>).
• ARIA mapping: role=complementary.

---

<h1>, <h2>, …, <h6>

• Категория содержимого: Flow, heading content
• Модель содержимого: Phrasing content (но только текст и inline-элементы; <div>, <p> — недопустимы)
• Семантика: Заголовки с иерархией важности: h1 — самый высокий уровень, h6 — самый низкий.
• Атрибуты:
  • align — устаревший (left, center, right, justify)
• Требования:
  • Должны быть вложены в секционный элемент (или <body>) — иначе нарушается outline.
  • Не использовать для стилизации (жирный/большой шрифт) — только по смыслу.
• Outline rules:
  • Первый заголовок в секции определяет её уровень.
  • Уровень вложенной секции вычисляется относительно родителя.
  • Избегать пропусков уровней (h1 → h3 — плохая практика).
• ARIA: role=heading, aria-level="1..6" (автоматически для <h1–h6>).

---

<header>

• Категория содержимого: Flow
• Модель содержимого: Flow content (кроме <header> и <footer>)
• Семантика — Вводная часть секции или документа — логотип, навигация, заголовок.
• Особенности:
  • Может быть несколько (в <body>, в каждом <article>, и т.п.).
  • Не обязательно содержит <h1–h6>, но часто содержит.
  • Не создаёт секцию в outline.
• ARIA mapping: role=banner (только для корневого <header> в <body>), иначе role=generic.

---

<footer>

• Категория содержимого: Flow
• Модель содержимого: Flow content (кроме <header> и <footer>)
• Семантика — Завершающая часть секции или документа — авторские права, контакты, ссылки на связанные документы.
• Особенности:
  • Может быть несколько.
  • Может содержать автора секции (в <article> — допустимо <address>).
  • Не создаёт секцию в outline.
• ARIA mapping: role=contentinfo (только для корневого <footer> в <body>), иначе role=generic.

---

<address>

• Категория содержимого: Flow, palpable content
• Модель содержимого — Phrasing content (но только контактная информация — текст, ссылки, )
• Семантика: Контактная информация автора/владельца секции или документа. Не для почтовых адресов в формах.
• Особенности:
  • В <article> — автор этого <article>.
  • В <body> — автор всего документа.
  • Не должен содержать произвольный адрес (например, "Москва, Тверская, 1" без контекста).
• ARIA mapping: role=group (по умолчанию), но не рекомендуется переопределять.

---

<main>

• Категория содержимого: Flow
• Модель содержимого: Flow content
• Семантика — Основное содержимое документа — уникальное, не повторяющееся между страницами (не шапка, не подвал, не боковые панели).
• Требования:
  • Только один <main> в документе.
  • Не должен быть потомком <article>, <aside>, <footer>, <header>, <nav>.
  • Обязательно должен быть видимым (не hidden, не display: none).
• ARIA mapping: role=main (автоматически). Эквивалент <div role="main">, но семантически точнее.
• Best practice: Добавлять id="main" и tabindex="-1" для программного фокуса при навигации (skip link target).

---

Outline и его проверка

Современные браузеры не используют алгоритм HTML outline (устарел в спецификации). Реальный outline строится по физическим уровням <h1–h6>.

Рекомендации:

• Использовать один <h1> на страницу (в <main> или <article>).
• Соблюдать иерархию: h1 → h2 → h3 и т.д., без пропусков.
• Не использовать <section> без заголовка — это ломает структуру для скринридеров.

Для валидации структуры:

• Инструменты — WAVE, axe, Lighthouse (проверка heading order).
• ARIA: aria-labelledby, aria-describedby для связи контента с заголовками.

---

Группировка контента

Элементы этой группы структурируют логические блоки — абзацы, разделители, цитаты, списки, фигуры. Они не создают секций в outline (кроме <blockquote>, который может вести себя как секционный при наличии cite и заголовка), но определяют смысловую разбивку потока.

---

<p>

• Категория содержимого: Flow, palpable content
• Модель содержимого: Phrasing content
• Семантика: Абзац — логически завершённая мысль или фрагмент текста.
• Особенности:
  • Не должен содержать блочных элементов (<div>, <h1>, <ul> и т.п.).
  • Автоматически закрывается при встрече другого блочного элемента (даже без </p> в HTML — но валидатор потребует).
  • По умолчанию: display: block, margin-block: 1em 1em.
• ARIA: role=paragraph (по умолчанию).

---

<hr>

• Категория содержимого: Flow
• Модель содержимого: пустой
• Семантика: Тематический разрыв между параграфами (не просто линия). Аналог "звёздочки" в книгах.
• Особенности:
  • Стилизуется через border, background, height (по умолчанию — border: 1px inset).
  • Не использовать как декоративный разделитель без семантической нагрузки.
• ARIA: role=separator.

---

<pre>

• Категория содержимого: Flow, palpable content
• Модель содержимого: Phrasing content
• Семантика — Предварительно отформатированный текст — сохраняются пробелы, переносы, отступы.
• Особенности:
  • white-space: pre по умолчанию (можно переопределить на pre-wrap, pre-line).
  • Часто используется с <code> для блоков кода.
  • Экранирование <, >, & обязательно.
• ARIA: role=generic (по умолчанию), но для кода — обёртывать в <code>.

---

<blockquote>

• Категория содержимого: Flow, sectioning root (если содержит заголовок)
• Модель содержимого: Flow content
• Семантика: Цитата из другого источника (не просто выделенный блок).
• Атрибуты:
  • cite — URL источника цитаты (не отображается, доступен программно).
• Требования:
  • Обязательно должен содержать цитируемый контент.
  • Если внутри — только <p> — допустимо (но лучше использовать <p>+<cite>).
  • Для коротких цитат — использовать <q>.
• ARIA: role=blockquote.
• Структура:

  <blockquote cite="https://example.com/source">
    <p>Текст цитаты.</p>
    <footer>— <cite><a href="...">Имя автора</a></cite></footer>
  </blockquote>

---

Списки

<ul>, <ol>, <dl>

Элемент	Семантика	Модель содержимого	Особенности
<ul>	Неупорядоченный список	Ноль или более <li>	По умолчанию: list-style-type: disc
<ol>	Упорядоченный список	Ноль или более <li>	Поддерживает атрибуты: - reversed (булев) — обратный счёт - start (целое) — начальное число - type — 1, a, A, i, I (устаревший, лучше CSS)
<dl>	Список описаний (термин → определение)	Чередование <dt> (термин) и <dd> (определение)	Может быть несколько <dt> перед <dd> (один термин — несколько написаний) или несколько <dd> после <dt> (один термин — несколько значений)

---

<li>

• Категория: None (зависит от родителя)
• Модель содержимого — Flow content (в <ul>, <ol>), phrasing content (в <menu>)
• Атрибуты:
  • value — только в <ol>: задаёт номер элемента (переопределяет порядок). Целое число.
• Особенности:
  • Обязателен внутри <ul>, <ol> (но браузеры толерантны).
  • Может содержать вложенные списки.

---

<dt>, <dd>

• <dt>: термин/имя/ключ. Модель: phrasing content.
• <dd>: описание/значение. Модель: flow content.
• По умолчанию: <dt> — жирный, <dd> — с отступом (margin-left).

---

<figure>, <figcaption>

• <figure>

  • Категория: Flow, sectioning root
  • Модель содержимого: flow content (включая <figcaption>, но макс. один)
  • Семантика — Самодостаточная единица — изображение, диаграмма, код, цитата — с необязательной подписью.
  • Может быть помещена в <aside>, если контент косвенный.

• <figcaption>

  • Категория: Flow
  • Модель содержимого: Flow content
  • Позиция: Первый или последний ребёнок <figure>
  • Семантика: Подпись к <figure>. Должна содержать описание, а не только "Рис. 1".
  • ARIA: Связывается автоматически (скринридеры читают подпись при фокусе на <figure>).

Пример:

<figure>
  <img src="chart.png" alt="Диаграмма роста пользователей с 2020 по 2025 г.">
  <figcaption>Рис. 1. Динамика ежемесячной аудитории, тыс. человек.</figcaption>
</figure>

---

<div>

• Категория содержимого: Flow
• Модель содержимого: Flow content
• Семантика: Универсальный блочный контейнер без семантики.
• Использование:
  • Только для стилизации, скриптов, группировки, когда нет более семантичного элемента.
  • Не заменяет <section>, <article>, <aside> ради удобства.
• ARIA: role=generic (нейтральный).
• Антипаттерн:

  <!-- Плохо -->
  <div class="article">
    <div class="title">Заголовок</div>
    <div class="content">Текст...</div>
  </div>
  <!-- Хорошо -->
  <article>
    <h2>Заголовок</h2>
    <p>Текст...</p>
  </article>

---

<main>

Упомянут ранее, но актуально здесь:

• <main> не является элементом группировки — это корневой контейнер для основного flow content.
• Может содержать <section>, <article>, <p>, <ul> и т.п., но не должен содержать <header>, <footer>, <nav> текущей страницы.

---

Текстовое содержимое и фразовые элементы

Фразовые элементы — это inline-элементы, встраивающиеся в поток текста. Они определяют семантику фрагментов внутри абзацев, заголовков, ячеек и других контейнеров phrasing content.

Категория содержимого: phrasing content (кроме <br>, <wbr> — они phrasing content и flow content одновременно).

---

<a>

• Категория содержимого: Transparent (наследует категорию родителя), но фактически — phrasing
• Модель содержимого — Phrasing content (кроме интерактивных элементов — <a>, <button>, <input> и др.)
• Семантика: Гиперссылка или якорь.
• Атрибуты:

Атрибут	Тип	Описание	Значения / примечания
href	URL / fragment	Целевой ресурс	- Абсолютный/относительный URL - #id — якорь - javascript:void(0) — не рекомендуется (лучше <button>)
target	имя окна	Целевое окно/фрейм	_self (по умолчанию), _blank, _parent, _top, произвольное имя ("sidebar")
download	строка (опционально)	Предложение скачать ресурс	Значение — предложное имя файла (download="report.pdf"). Работает только для same-origin или CORS с Content-Disposition: attachment.
ping	URL-список	Отправка уведомления при клике	Список URL через пробел. Используется для аналитики. Поддержка: Chrome, Edge (не Firefox, Safari).
rel	токены	Отношение к целевому ресурсу	- noopener (обязательно с target="_blank" — безопасность) - noreferrer (скрывает referrer) - nofollow, sponsored, ugc (SEO) - external, help, license, prev, next, tag
referrerpolicy	перечисление	Политика referrer при переходе	no-referrer, same-origin, strict-origin-when-cross-origin и др.
hreflang	язык	Язык ресурса по href	BCP 47 (en, ru-RU)
type	MIME	Подсказка типа ресурса	text/html, application/pdf — не влияет на поведение, но может использоваться UA/расширениями

Особенности:

• Без href — не ссылка, а placeholder (доступен через tab, но не переходит). Использовать <button> вместо.
• target="_blank" требует rel="noopener" (иначе утечка памяти и уязвимость window.opener).
• <a> внутри <button> — запрещено (вложенность интерактивных элементов).
• Поддержка :link, :visited, :hover, :active, :focus.

---

<em>, <strong>

Элемент	Семантика	Обычное оформление	ARIA
<em>	Акцент/выделение, изменяющее смысл	курсив	role=emphasis
<strong>	Сильная важность/срочность	жирный	role=strong

Важно:

• Не использовать для стилизации — только по смыслу.
• Вложенные <em>/<strong> усиливают степень (редко уместно).
• Альтернатива: <span style="font-style: italic"> — если нет семантической нагрузки.

---

<small>

• Семантика — Уточняющая, второстепенная информация — лицензионные условия, копирайт, ограничения.
• Не для размера шрифта — только по смыслу.
• Пример:

  <p>Цена: 999 ₽ <small>включая НДС</small></p>

---

<s>, <del>, <ins>

Элемент	Семантика	Атрибуты	Пример использования
<s>	Неактуальная, но не удалённая информация	—	Старая цена: <s>1200 ₽</s>
<del>	Удалённый контент	cite, datetime	<del datetime="2025-11-15">Ошибка в тексте</del>
<ins>	Вставленный контент	cite, datetime	<ins cite="/changelog#v2.1">Новое требование добавлено</ins>

• datetime: ISO 8601 (YYYY-MM-DDThh:mm:ssZ).
• cite: URL пояснения (например, ссылка на issue в трекере).

---

<cite>

• Семантика — Название труда (книга, статья, фильм, ТЗ), не цитата и не автор.
• Модель содержимого: Phrasing content
• Пример:

  <p>Как описано в <cite>ГОСТ Р 57580.2-2017</cite>…</p>

---

<q>

• Семантика: Короткая цитата внутри строки.
• Атрибуты: cite (URL источника)
• Особенности:
  • Браузеры автоматически добавляют кавычки (можно стилизовать ::before, ::after).
  • Для многострочных цитат — <blockquote>.
• Пример:

  Он сказал: <q cite="https://example.com/interview">Это критически важно</q>.

---

<dfn>, <abbr>

Элемент	Семантика	Атрибуты	Примечания
<dfn>	Определение термина	title (устаревший способ)	Первое упоминание термина. Часто оборачивает <abbr>.
<abbr>	Аббревиатура/акроним	title — расшифровка	Обязательно указывать title, если аббревиатура не общеизвестна.

Пример:

<p><dfn><abbr title="Гипертекстовый язык разметки">HTML</abbr></dfn> — стандарт разметки.</p>

---

<ruby>, <rt>, <rp>

• Назначение — Рубин-аннотации (надстрочные пояснения, например, фуригана в японском).
• Структура:

  <ruby>
    漢 <rt>かん</rt>
    字 <rt>じ</rt>
    <rp>(</rp><rt>kanji</rt><rp>)</rp>
  </ruby>

• <rp>: fallback для UA без поддержки <ruby> (отображается только если <rt> не поддерживается).
• Поддержка — Chrome, Firefox, Safari, Edge (IE ≥5.5 частично).

---

<data>, <time>

Элемент	Семантика	Атрибуты	Пример
<data>	Данные в машиночитаемом виде	value — строка	<data value="RUB">₽</data>
<time>	Время/дата	datetime — ISO 8601	<time datetime="2025-11-18">сегодня</time>

• datetime для <time>:
  • Дата: 2025-11-18
  • Время — 14:30, 14:30:00, 14:30:00.000
  • Дата+время: 2025-11-18T14:30+03:00
  • Продолжительность: P1Y2M10DT2H30M (ISO 8601 duration)
• Скринридеры могут озвучивать datetime.

---

<code>, <var>, <samp>, <kbd>

Элемент	Семантика	Пример
<code>	Фрагмент кода (в строке)	Используйте <code>console.log()</code>
<var>	Переменная/параметр	где <var>n</var> — число итераций
<samp>	Пример вывода программы	Ошибка: <samp>File not found</samp>
<kbd>	Ввод пользователя (клавиши, команды)	Нажмите <kbd>Ctrl</kbd>+<kbd>C</kbd>

• Для блоков кода: ```` ...

- Стилизация: моноширинный шрифт по умолчанию.

---

#### `<sub>`, `<sup>`

- **Семантика**: Подстрочные/надстрочные символы (индексы, степени, примечания).
- Не использовать для оформления — только по смыслу:
  - Химия: `H<sub>2</sub>O`
  - Математика: `x<sup>2</sup>`
  - Примечания: `см. раздел 3<sup>а</sup>`
- По умолчанию: уменьшенный размер, смещение.

---

#### `<i>`, `<b>`, `<u>`, `<mark>`

| Элемент | Семантика (современная) | Ранее | Пример |
|--------|--------------------------|--------|--------|
| `<i>` | Таксономический термин, иноязычное слово, мысль, название корабля | курсив | `<i lang="la">Homo sapiens</i>` |
| `<b>` | Ключевое слово без дополнительной важности | жирный | `<b>Внимание:</b> срок истекает` |
| `<u>` | Неправильное написание, аннотация | подчёркивание | `<u>орфографическая ошибка</u>` |
| `<mark>` | Выделение для справки (поиск, акцент) | жёлтый фон | Результат поиска: `<mark>Тимур</mark>` |

**Важно**:  
- Не использовать `<i>`/`<b>` вместо `<em>`/`<strong>` ради стиля.  
- `<u>` легко спутать со ссылкой — избегать без чёткого контекста.

---

#### `<bdi>`, `<bdo>`

| Элемент | Семантика | Атрибуты | Пример |
|--------|-----------|----------|--------|
| `<bdi>` | Изоляция двунаправленного текста | — | Имя пользователя: `<bdi>محمد</bdi>` (корректное отображение в `ltr`-контексте) |
| `<bdo>` | Явное направление текста | `dir="ltr"`/`"rtl"` | `<bdo dir="rtl">Hello</bdo>` → `olleH` |

- `<bdi>` предпочтительнее `<span dir="auto">`.
- `<bdo>` переопределяет `dir` родителя.

---

#### `<span>`

- Универсальный inline-контейнер без семантики.
- Использовать только при отсутствии более точного элемента.
- ARIA: `role=generic`.

---

#### `<br>`, `<wbr>`

| Элемент | Семантика | Модель содержимого | Примечания |
|--------|-----------|---------------------|------------|
| `<br>` | Перенос строки | пустой | Только внутри phrasing content (в `<pre>` — не нужен). Не использовать для отступов. |
| `<wbr>` | Место возможного переноса | пустой | Указывает UA, где можно перенести длинное слово (`API<wbr>_Endpoint`). |

- `<br>` в `<address>` допустим (для многострочного адреса).
- `&ZeroWidthSpace;` — альтернатива `<wbr>` в тексте.

---

### Встроенные мультимедийные и интерактивные элементы

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

---

#### `<img>`

- **Категория содержимого**: Flow, phrasing, embedded content, palpable content  
- **Модель содержимого**: пустой  
- **Семантика**: Растровое изображение (не декоративное — для содержимого).  
- **Обязательные атрибуты**:
  - `src` — URL изображения (может быть `data:`, `blob:`)
  - `alt` — альтернативный текст  
    - `alt=""` — только для **декоративных** изображений (не отображается в скринридерах)  
    - `alt="Описание"` — для содержательных (обязательно!)  
    - `alt` с ошибкой (например, `alt`) — считается пустым  

- **Специфические атрибуты**:

| Атрибут | Тип | Описание | Значения / примечания |
|--------|------|-----------|------------------------|
| `srcset` | список источников | Адаптивные изображения | `image-320w.jpg 320w, image-640w.jpg 640w` |
| `sizes` | media query + длина | Подсказка ширины отображения | `(max-width: 600px) 100vw, 50vw` |
| `width`, `height` | целое | Внутренние размеры (в CSS-пикселях) | Предотвращают layout shift. Рекомендуется всегда. |
| `loading` | перечисление | Отложенная загрузка | `eager` (по умолчанию), `lazy` — откладывает загрузку до приближения к viewport |
| `decoding` | перечисление | Стратегия декодирования | `sync`, `async`, `auto` (по умолчанию) — `async` предотвращает блокировку main thread |
| `fetchpriority` | перечисление | Приоритет запроса | `high`, `low`, `auto` |
| `crossorigin` | перечисление | CORS mode | `anonymous`, `use-credentials` — требуется при доступе к пикселям через Canvas |
| `referrerpolicy` | перечисление | Политика referrer | как для `<a>` |
| `ismap` | булев | Серверная карта-изображение | Только если `<img>` внутри `<a href="...">`; координаты клика передаются как `?x,y` |

**Особенности**:
- Без `alt` — ошибка валидации и нарушение WCAG.
- `srcset` + `sizes` используются только при наличии `width`/`height` или CSS-ограничений.
- `loading="lazy"` не применяется к изображениям в области видимости при загрузке.
- Поддержка форматов:  
  - `avif` — Chrome `≥`85, Firefox `≥`93, Safari `≥`16.4  
  - `webp` — везде, кроме IE  
  - `jpeg xl` — пока нет поддержки (экспериментально)

---

#### `<picture>`

- **Категория содержимого**: Flow, phrasing, embedded content  
- **Модель содержимого**: Ноль или более `<source>`, затем ровно один `<img>`  
- **Семантика**: Контейнер для адаптивной выборки изображения по условиям.  
- **Атрибуты**: только глобальные  
- **Особенности**:
  - `<source>` внутри `<picture>` — правило выбора.
  - Браузер выбирает **первый** `<source>`, условия которого выполнены, и использует его `srcset`/`src` для `<img>`.
  - `<img>` внутри — fallback и точка привязки для `alt`, `loading`, `decoding`.

**Пример**:
```html
<picture>
  <source media="(min-width: 1200px)" srcset="desktop.avif" type="image/avif">
  <source media="(min-width: 1200px)" srcset="desktop.webp" type="image/webp">
  <source srcset="mobile.avif" type="image/avif">
  <source srcset="mobile.webp" type="image/webp">
  <img src="fallback.jpg" alt="Описание" width="800" height="600">
</picture>
```

**Атрибуты `<source>` внутри `<picture>`**:
- `srcset` — обязательный (если нет `src`)
- `type` — MIME-тип (`image/avif`, `image/webp`)
- `media` — media query (для разрешения экрана, ориентации)
- `sizes` — как в `<img>`

---

#### `<audio>`, `<video>`

- **Категория содержимого**: Flow, phrasing, embedded content, interactive content, palpable content  
- **Модель содержимого**:  
  - Ноль или более `<source>`  
  - Ноль или более `<track>`  
  - Fallback-контент (текст/ссылка для старых браузеров)  

- **Общие атрибуты** (`<audio>` и `<video>`):

| Атрибут | Тип | Описание | Значения |
|--------|------|-----------|----------|
| `src` | URL | Основной источник (если нет `<source>`) | — |
| `controls` | булев | Отображение стандартных элементов управления | — |
| `autoplay` | булев | Автовоспроизведение | Требует `muted` в большинстве браузеров (политики autoplay) |
| `muted` | булев | Отключение звука | Разрешает `autoplay` |
| `loop` | булев | Зацикливание | — |
| `preload` | перечисление | Предзагрузка | `none`, `metadata`, `auto` (по умолчанию — `metadata`) |
| `crossorigin` | перечисление | CORS mode | `anonymous`, `use-credentials` — требуется для Canvas, MSE, Web Audio |
| `poster` | URL | Обложка (только `<video>`) | Отображается до воспроизведения |
| `width`, `height` | целое | Внутренние размеры (только `<video>`) | Предотвращают layout shift |

- **`<video>`-специфичные**:
  - `playsinline` — воспроизведение в потоке (на iOS без перехода в полноэкранный режим)
  - `webkit-playsinline`, `x5-playsinline` — вендорные префиксы (устаревают)

- **`<audio>`-специфичные**: нет

**Доступность**:
- `<audio>` без `controls` и без скриптов — недоступен.
- Рекомендуется fallback:  
```html
  <audio controls>
    <source src="speech.mp3" type="audio/mpeg">
    <a href="speech.mp3">Скачать аудио</a>
  </audio>
```

---

#### `<source>`

- **Категория содержимого**: None  
- **Модель содержимого**: пустой  
- **Контекст**: только внутри `<picture>`, `<audio>`, `<video>`  
- **Атрибуты**:

| Атрибут | Контекст | Описание |
|--------|----------|-----------|
| `src` | `<audio>`, `<video>` | URL медиафайла |
| `srcset` | `<picture>` | Адаптивные источники |
| `type` | все | MIME-тип (`video/mp4`, `audio/ogg`, `image/avif`) |
| `media` | `<picture>` | Media query |
| `sizes` | `<picture>` | Подсказка ширины |
| `height`, `width` | `<picture>` (редко) | Абсолютные размеры (для арт-дирекшн) |

**Особенности**:
- В `<audio>`/`<video>`: браузер выбирает первый поддерживаемый `<source>`.
- В `<picture>`: выбор по `media` и `type`, затем по `srcset`.

---

#### `<track>`

- **Категория содержимого**: None  
- **Модель содержимого**: пустой  
- **Контекст**: только внутри `<audio>`, `<video>`  
- **Семантика**: Трек субтитров, описаний, глав, метаданных.  
- **Атрибуты**:

| Атрибут | Обязательность | Описание | Значения |
|--------|----------------|-----------|----------|
| `kind` | да | Тип трека | `subtitles`, `captions`, `descriptions`, `chapters`, `metadata` |
| `src` | да | URL файла трека | Формат: WebVTT (`.vtt`) |
| `srclang` | для `subtitles`/`captions` | Язык трека | BCP 47 (`en`, `ru`) |
| `label` | опционально | Человекочитаемое имя | Например: `"Английские субтитры"` |
| `default` | булев | Выбор по умолчанию | Только один трек может быть `default` |

**Формат WebVTT**:
```vtt
WEBVTT

00:00:01.000 --> 00:00:04.000
Привет, это субтитры.

00:00:05.000 --> 00:00:08.000
Они поддерживают <b>разметку</b>.
```

**Доступность**:
- `captions` — для глухих (включают звуки: `[музыка]`).
- `subtitles` — перевод.
- `descriptions` — аудиоописание (читается скринридером при паузе).

---

#### `<map>`, `<area>`

- **`<map>`**  
  - **Категория**: Flow, phrasing  
  - **Модель содержимого**: Ноль или более `<area>`, текст (игнорируется)  
  - **Атрибуты**: `name` (обязательный, уникальный)  
  - **Семантика**: Карта-изображение (client-side image map)  

- **`<area>`**  
  - **Категория**: None  
  - **Модель содержимого**: пустой  
  - **Атрибуты**:

| Атрибут | Обязательность | Описание |
|--------|----------------|-----------|
| `shape` | да | Форма области | `rect`, `circle`, `poly`, `default` |
| `coords` | да | Координаты (через запятую) | `x1,y1,x2,y2` (rect), `x,y,r` (circle), `x1,y1,x2,y2,…` (poly) |
| `href` | опционально | URL цели (если нет — "мёртвая" область) |
| `alt` | да (если `href` есть) | Альтернативный текст области |
| `target`, `rel`, `ping` | как в `<a>` | — |

**Пример**:
```html
<img src="map.png" alt="Карта офиса" usemap="#office">
<map name="office">
  <area shape="rect" coords="10,10,50,50" href="/room1" alt="Комната 1">
  <area shape="circle" coords="100,100,20" href="/room2" alt="Комната 2">
</map>
```

**Особенности**:
- `usemap="#name"` связывает `<img>` с `<map name="name">`.
- `alt` у `<area>` обязателен для доступности.
- Не использовать для навигации по сайту — только для тематических карт.

---

#### `<iframe>`

- **Категория содержимого**: Flow, phrasing, embedded content, interactive content  
- **Модель содержимого**: Fallback-контент (для старых браузеров)  
- **Семантика**: Встроенный документ (HTML, PDF, SVG и др.)  
- **Атрибуты**:

| Атрибут | Описание | Значения / примечания |
|--------|-----------|------------------------|
| `src` | URL встраиваемого документа | Может быть `about:blank`, `data:text/html,...`, `blob:` |
| `srcdoc` | HTML-контент | Приоритет выше, чем `src`. Экранирование не требуется. |
| `name` | Имя окна/фрейма | Для `target` в `<a>` |
| `sandbox` | Политика безопасности | Список разрешений:   - без значения — полная изоляция   - `allow-same-origin`, `allow-scripts`, `allow-popups`, `allow-forms`, `allow-top-navigation`, `allow-downloads` и др. |
| `loading` | Отложенная загрузка | `eager`, `lazy` |
| `referrerpolicy` | Политика referrer | как в `<a>` |
| `width`, `height` | Размеры | Лучше задавать CSS, но атрибуты предотвращают layout shift |
| `allow` | Feature Policy | `camera`, `microphone`, `geolocation`, `fullscreen`, `clipboard-read`, `clipboard-write` и др. |

**Безопасность**:
- `sandbox` без `allow-same-origin` блокирует доступ к `localStorage`, `indexedDB`, `cookies`.
- `allow="..."` заменяет устаревший `featurepolicy` заголовок.
- `X-Frame-Options: DENY/SAMEORIGIN` на сервере имеет приоритет над `<iframe>`.

**Доступность**:
- Обязательно `title` или `aria-label` (скринридеры объявляют назначение фрейма).
- Избегать `seamless` (устаревший, не реализован).

---

#### `<embed>`

- **Категория содержимого**: Flow, phrasing, embedded content, interactive content  
- **Модель содержимого**: пустой  
- **Семантика**: Встраивание плагина (Flash, PDF, Java — сейчас почти не используется)  
- **Атрибуты**:
  - `src` — URL ресурса  
  - `type` — MIME-тип (`application/pdf`, `application/x-shockwave-flash`)  
  - `width`, `height` — размеры  
- **Особенности**:
  - Нет fallback-контента.
  - Плагины отключены в современных браузерах (кроме PDF в Chrome/Firefox).
  - **Рекомендуется заменять на `<iframe src="file.pdf">` или `<object>`**.

---

#### `<object>`, `<param>`

- **`<object>`**  
  - **Категория**: Flow, phrasing, embedded content, interactive content  
  - **Модель содержимого**: Параметры (`<param>`), fallback-контент  
  - **Атрибуты**: `data`, `type`, `name`, `width`, `height`, `form`  
  - **Семантика**: Универсальный контейнер для внешнего ресурса (PDF, SVG, Flash, Java).  
  - **Преимущество над `<embed>`**: поддержка fallback и параметров.

- **`<param>`**  
  - **Категория**: None  
  - **Модель содержимого**: пустой  
  - **Контекст**: только внутри `<object>`  
  - **Атрибуты**: `name`, `value`, `valuetype` (`data`, `ref`, `object`), `type`  
  - **Семантика**: Параметр для встраиваемого объекта (например, переменные Flash).

**Пример PDF**:
```html
<object data="doc.pdf" type="application/pdf" width="600" height="400">
  <p>Ваш браузер не поддерживает PDF. <a href="doc.pdf">Скачать</a>.</p>
</object>
```

**Современная практика**:
- Для PDF — `<iframe>` или `<embed>` (браузер сам решает — встроить или скачать).
- Для SVG — inline-вставка (`<svg>...</svg>`) или `<img src="icon.svg">`.
- `<object>` почти не используется, кроме legacy.

---

### Табличные элементы

Таблицы предназначены для **табличных данных** (матрицы, расписания, финансовые отчёты), а не для макетирования. Современные таблицы должны быть доступными, семантически корректными и поддерживать сложные структуры (объединение ячеек, заголовки групп).

---

#### Общая структура



<ExternalCodeEmbed example="html/html-21-001" title="Общая структура" minHeight={354} />



- `<caption>` — заголовок таблицы (обязателен для доступности).
- `<colgroup>`/`<col>` — группировка столбцов (редко используется, но полезно для стилей).
- `<thead>`/`<tbody>`/`<tfoot>` — логические разделы (можно повторять `<tbody>`).
- Порядок `<tfoot>` до `<tbody>` допустим и рекомендуется (для прогрессивного рендеринга).

---

#### `<table>`

- **Категория содержимого**: Flow  
- **Модель содержимого**:  
  — ноль или один `<caption>`  
  — ноль или более `<colgroup>`  
  — ноль или один `<thead>`  
  — ноль или более `<tbody>`  
  — ноль или один `<tfoot>`  
  — ноль или более `<tr>` (если нет `<thead>`/`<tbody>`/`<tfoot>`)  
- **Атрибуты**:  
  - `border` — устаревший (влияет на отрисовку рамок в Quirks Mode)  
- **Стили по умолчанию**:  
  - `display: table`  
  - `border-collapse: separate`  
  - `border-spacing: 2px`  
- **ARIA**: `role=table` (автоматически). Для сложных таблиц — `aria-describedby`, `aria-labelledby`.

---

#### `<caption>`

- **Категория**: None  
- **Модель содержимого**: Flow content  
- **Особенности**:  
  - Должен быть **первым** дочерним элементом `<table>`.  
  - Обязателен для WCAG (скринридеры считывают его как заголовок таблицы).  
  - Можно скрыть визуально, но оставить для AT: `.visually-hidden`.  
- **Пример**:  
`<caption>Таблица 1. Сравнение производительности процессоров (в баллах)</caption>`

---

#### `<colgroup>`, `<col>`

- **`<colgroup>`**  
  - **Модель содержимого**: ноль или более `<col>`, либо `span` (без дочерних элементов)  
  - **Атрибуты**:  
    - `span` — количество столбцов в группе (по умолчанию `1`)  

- **`<col>`**  
  - **Модель содержимого**: пустой  
  - **Атрибуты**:  
    - `span` — сколько столбцов охватывает элемент (`1` по умолчанию)  
    - `width` — устаревший (использовать CSS `width`)  

- **Применение**:  
  - Задание ширины, стилей для столбцов без дублирования в `<td>`.  
  - Пример:  
```html
    <colgroup>
      <col style="width: 30%"> {/* столбец 1  */}
      <col span="2" style="width: 35%"> {/* столбцы 2 и 3  */}
    </colgroup>
```

---

#### `<thead>`, `<tbody>`, `<tfoot>`

| Элемент | Семантика | Особенности |
|--------|-----------|-------------|
| `<thead>` | Заголовочные строки | Может быть только один. Используется для прокрутки заголовков при фиксированной высоте таблицы (`position: sticky`). |
| `<tbody>` | Основное тело таблицы | Может быть несколько. Логическая группировка строк (например, по категориям). |
| `<tfoot>` | Итоговые/подвальные строки | Может быть только один. Располагается после `<thead>`, но до `<tbody>` в разметке — для раннего рендеринга. |

- Все три элемента необязательны, но **рекомендованы** для семантики и стилей.
- Если не указаны — браузер неявно создаёт один `<tbody>`.

---

#### `<tr>`

- **Категория**: None  
- **Модель содержимого**: ноль или более `<th>` и/или `<td>`  
- **Семантика**: Строка таблицы  
- **ARIA**: `role=row`  
- **Особенности**:  
  - Может содержать только ячейки (`<th>`, `<td>`).  
  - Все ячейки в строке должны иметь согласованную семантику (заголовки или данные).

---

#### `<th>`, `<td>`

| Атрибут | Применяется к | Описание | Значения |
|--------|---------------|-----------|----------|
| `colspan` | `<th>`, `<td>` | Объединение по горизонтали | Целое `≥`1 |
| `rowspan` | `<th>`, `<td>` | Объединение по вертикали | Целое `≥`1 (0 — до конца таблицы, но не поддерживается) |
| `headers` | `<th>`, `<td>` | Связь с заголовками по ID | Список ID `<th>` через пробел |
| `scope` | `<th>` | Область действия заголовка | `row`, `col`, `rowgroup`, `colgroup` |
| `abbr` | `<th>` | Краткая форма заголовка | Для скринридеров при длинных заголовках |

**Различия**:
- `<th>` — заголовочная ячейка (жирный, по центру по умолчанию).  
- `<td>` — ячейка данных.  

**Доступность**:
- В сложных таблицах (объединённые ячейки) — обязательны `scope` и/или `headers`.  
- Пример:


<ExternalCodeEmbed example="html/html-21-002" title="`<th>`, `<td>`" minHeight={426} />



---

#### Сложные таблицы — best practices

1. **Избегать объединения ячеек**, если возможно.  
2. При объединении — явно указывать связи через `headers` и `id`.  
3. Использовать `scope="col"` для верхних заголовков, `scope="row"` — для боковых.  
4. Для групп заголовков — `scope="colgroup"`/`"rowgroup"` + `<thead>` с несколькими строками.  
5. Не использовать `role="presentation"` — ломает доступность.

---

### Формы и элементы управления

Формы — основной механизм ввода данных. Требуют строгого соблюдения семантики, доступности и валидации. Все интерактивные элементы должны быть корректно связаны с метками, иметь состояния и поддерживать клавиатурную навигацию.

---

#### `<form>`

- **Категория содержимого**: Flow  
- **Модель содержимого**: Flow content (включая другие `<form>` только при `disabled`)  
- **Семантика**: Контейнер для элементов управления, отправляющих данные.  
- **Атрибуты**:

| Атрибут | Тип | Описание | Значения / примечания |
|--------|------|-----------|------------------------|
| `accept-charset` | строка | Кодировка отправки | `utf-8` (по умолчанию), `windows-1251` |
| `action` | URL | Целевой эндпоинт | Абсолютный/относительный. Пустая строка — текущая страница. |
| `autocomplete` | перечисление | Автозаполнение формы | `on` (по умолчанию), `off` — отключает автозаполнение для всех полей |
| `enctype` | MIME | Кодировка тела запроса | `application/x-www-form-urlencoded` (по умолчанию), `multipart/form-data` (для `<input type="file">`), `text/plain` (устаревший) |
| `method` | перечисление | HTTP-метод | `get`, `post`, `dialog` (только с `<dialog>`) |
| `name` | строка | Имя формы | Доступно как `document.forms[name]` |
| `novalidate` | булев | Отключение встроенной валидации | — |
| `rel` | токены | Отношение к `action` | `external`, `nofollow`, `noopener`, `opener`, `noreferrer` |
| `target` | имя окна | Целевое окно | как в `<a>` |

**Особенности**:
- Формы могут быть вложенными только через `form` attribute у контролов (см. ниже).
- `method="dialog"` работает только внутри `<dialog>` и вызывает `close()` при отправке.

---

#### `<input>`

- **Категория содержимого**: Flow, phrasing, interactive content, listed, labelable, submittable, resettable  
- **Модель содержимого**: пустой  
- **Семантика**: Универсальный элемент ввода. Поведение определяется `type`.

---

##### Общие атрибуты (применимы не ко всем типам) —

| Атрибут | Описание | Поддержка типов |
|--------|-----------|-----------------|
| `autocomplete` | Подсказка автозаполнения | `text`, `email`, `tel`, `url`, `password`, `date` и др. |
| `autofocus` | Автофокус | все, кроме `hidden`, `file` |
| `disabled` | Отключение | все |
| `form` | ID формы-владельца | все (для внесения в форму извне) |
| `list` | ID `<datalist>` | `text`, `search`, `url`, `tel`, `email`, `date`, `number`, `range` |
| `max`, `min` | Ограничения | `number`, `range`, `date`, `datetime-local`, `month`, `time`, `week` |
| `maxlength`, `minlength` | Ограничения длины | `text`, `search`, `url`, `tel`, `email`, `password` |
| `multiple` | Множественный выбор | `email`, `file` |
| `name` | Имя поля (для отправки) | все, кроме `button`, `image`, `reset`, `submit` (но они могут иметь) |
| `pattern` | [RegExp](/encyclopedia/4-code-dev/4-02-chto-takoe-kod-i-kak-on-rabotaet/615), [готовые шаблоны](/lab/Примеры/615) для валидации (подмножество JS; без флагов, якорь `^…$` подразумевается) | `text`, `search`, `url`, `tel`, `email`, `password` |
| `placeholder` | Подсказка в поле | все, кроме `range`, `color`, `hidden`, `file` |
| `readonly` | Только для чтения | `text`, `search`, `url`, `tel`, `email`, `password`, `date`, `number`, `color` |
| `required` | Обязательное поле | все, кроме `button`, `hidden`, `image`, `reset`, `submit` |
| `step` | Шаг для числовых/временных | `number`, `range`, `date`, `datetime-local`, `month`, `time`, `week` |
| `value` | Значение по умолчанию | все (кроме `file`, `checkbox`, `radio` — там `checked`) |

---

<span id="input-types-ref"></span>

##### Типы `<input>` (по категориям)

Значение `type` определяет модель данных поля, набор допустимых атрибутов и то, какой интерфейс покажет браузер. Для `email` и `url` включается базовая проверка формата; для `date`, `time`, `month`, `week`, `range` и `color` — нативные виджеты без подключения сторонних календарей и слайдеров. Серверная проверка остаётся обязательной.

**Текстовые и строковые**  
| `type` | Описание | Особенности |
|--------|-----------|-------------|
| `text` | Однострочное текстовое поле | По умолчанию |
| `search` | Поле поиска | Может иметь × для очистки (в Safari, Chrome) |
| `tel` | Телефон | Нет встроенной валидации, но на мобильных — цифровая клавиатура |
| `url` | URL | Валидация: должен содержать схему (`http://`, `https://`) |
| `email` | Email | Валидация: `local@domain.tld`. С `multiple` — список через запятую |
| `password` | Пароль | Скрытое вводимое значение |
| `hidden` | Скрытое поле | Не отображается, но отправляется |

**Числовые и временные**  
| `type` | Описание | Формат значения |
|--------|-----------|-----------------|
| `number` | Число | `5`, `-3.14`, `2e5` |
| `range` | Ползунок | От `min` до `max` с шагом `step` |
| `date` | Дата | `YYYY-MM-DD` |
| `month` | Месяц | `YYYY-MM` |
| `week` | Неделя | `YYYY-Www` (например, `2025-W46`) |
| `time` | Время | `HH:mm`, `HH:mm:ss`, `HH:mm:ss.SSS` |
| `datetime-local` | Дата+время без TZ | `YYYY-MM-DDThh:mm` |

**Логические и выбор**  
| `type` | Описание | Особенности |
|--------|-----------|-------------|
| `checkbox` | Флажок | `checked` — состояние. `value` отправляется, только если выбрано |
| `radio` | Переключатель | Группировка по `name`. Только одно может быть выбрано |
| `color` | Выбор цвета | `#rrggbb` (по умолчанию `#000000`) |
| `file` | Выбор файла | `accept` — фильтр MIME/расширений (`image/*`, `.pdf`) |

**Кнопки**  
| `type` | Описание | Поведение |
|--------|-----------|-----------|
| `submit` | Отправка формы | Вызывает `submit` события |
| `reset` | Сброс формы | Восстанавливает `defaultValue` |
| `button` | Обычная кнопка | Без поведения по умолчанию — только для JS |

**Специальные**  
| `type` | Описание | Совместимость |
|--------|-----------|---------------|
| `image` | Кнопка-изображение | Отправляет координаты клика как `name.x`, `name.y` |
| `datetime` | Дата+время с TZ | **Deprecated**, не поддерживается |

---

#### `<button>`

- **Категория содержимого**: Flow, phrasing, interactive content, submittable, resettable  
- **Модель содержимого**: Phrasing content (текст, `<img>`, `<svg>`, но не интерактивные элементы)  
- **Атрибуты**:
  - `type` — `submit` (по умолчанию), `reset`, `button`  
  - `form`, `formaction`, `formenctype`, `formmethod`, `formnovalidate`, `formtarget` — переопределение атрибутов формы  
  - `disabled` — отключение  
  - `name`, `value` — отправляются при `type="submit"`/`"reset"`  

**Преимущества перед `<input type="button">`**:
- Поддержка HTML-контента внутри (`<span>`, иконки).  
- Лучшая стилизация и доступность.  
- Поддержка `:focus-visible`, `:active`, `:disabled`.

---

#### `<label>`

- **Категория содержимого**: Flow, phrasing  
- **Модель содержимого**: Phrasing content  
- **Семантика**: Метка для элемента управления.  
- **Связь**:
  - Через `for="id"` и `id` у контрола  
  - Обёртывание контрола: `<label><input> Текст</label>`  

**Требования**:
- Каждый интерактивный элемент (кроме `<button>`) **должен** иметь `<label>`.  
- `aria-label` или `aria-labelledby` — допустимы, но `<label>` предпочтительнее.

---

#### `<select>`, `<optgroup>`, `<option>`

- **`<select>`**  
  - **Атрибуты**: `multiple`, `size`, `required`, `disabled`, `autocomplete`  
  - `multiple` — множественный выбор (Ctrl/Cmd)  
  - `size` — количество видимых строк (если >1 — список без раскрывания)  

- **`<optgroup>`**  
  - **Атрибуты**: `label` (обязательный), `disabled`  
  - Группировка `<option>`  

- **`<option>`**  
  - **Атрибуты**: `value` (отправляется; если нет — текст), `selected`, `disabled`, `label` (альтернативный текст)  

**Пример**:
```html
<label for="country">Страна</label>
<select id="country" name="country" required>
  <optgroup label="Европа">
    <option value="ru">Россия</option>
    <option value="de">Германия</option>
  </optgroup>
  <optgroup label="Азия">
    <option value="cn">Китай</option>
  </optgroup>
</select>
```

---

#### `<textarea>`

- **Категория содержимого**: Flow, phrasing, interactive content, listed, labelable, submittable, resettable  
- **Модель содержимого**: Текст (CDATA)  
- **Атрибуты**:
  - `cols`, `rows` — размеры в символах (лучше CSS `width`/`height`)  
  - `wrap` — `soft` (по умолчанию), `hard` (вставляет `\r\n` при переносе)  
  - `maxlength`, `minlength`, `placeholder`, `readonly`, `required`, `autocomplete`  

**Особенности**:
- Содержимое — `value` (не `textContent`).  
- `defaultValue` — начальное значение.

---

#### `<fieldset>`, `<legend>`

- **`<fieldset>`**  
  - **Семантика**: Группировка связанных контролов  
  - **Модель содержимого**: Flow content + `<legend>` (первый ребёнок)  
  - **Атрибуты**: `disabled` — отключает все дочерние контролы  

- **`<legend>`**  
  - **Семантика**: Заголовок группы  
  - **Обязателен** внутри `<fieldset>`  
  - Доступен через `aria-describedby` для контролов

**Пример**:
```html
<fieldset>
  <legend>Способ оплаты</legend>
  <label><input type="radio" name="pay" value="card"> Карта</label>
  <label><input type="radio" name="pay" value="cash"> Наличные</label>
</fieldset>
```

---

#### `<datalist>`

- **Категория содержимого**: Flow, phrasing  
- **Модель содержимого**: Ноль или более `<option>`  
- **Семантика**: Автодополнение для `<input>`  
- **Связь**: через `list="id"` у `<input>` и `id` у `<datalist>`  
- **Особенности**:
  - Не заменяет валидацию.  
  - Пользователь может ввести произвольное значение.  
  - `<option>` может иметь `value` и текст (если `value` нет — текст становится значением).

**Пример**:
```html
<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
</datalist>
```

---

#### `<output>`

- **Категория содержимого**: Flow, phrasing  
- **Модель содержимого**: Phrasing content  
- **Семантика**: Результат вычисления (например, калькулятор)  
- **Атрибуты**:
  - `for` — список ID контролов, от которых зависит значение  
  - `name`, `form` — как у других контролов  

**Пример**:
```html
<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
  <input type="number" id="a" name="a"> +
  <input type="number" id="b" name="b"> =
  <output name="result" for="a b">0</output>
</form>
```

---

#### `<progress>`

- **Категория содержимого**: Flow, phrasing  
- **Модель содержимого**: Phrasing content (fallback для старых браузеров)  
- **Атрибуты**:
  - `value` — текущее значение (0–`max`)  
  - `max` — максимум (по умолчанию `1`)  
- **Семантика**: Индикатор выполнения **известной** длительности.  
- **ARIA**: `role=progressbar`, `aria-valuenow`, `aria-valuemin`, `aria-valuemax`.

**Пример**:
```html
<progress value="75" max="100">75%</progress>
```

---

#### `<meter>`

- **Категория содержимого**: Flow, phrasing  
- **Модель содержимого**: Phrasing content  
- **Атрибуты**:
  - `value` — текущее значение  
  - `min`, `max` — диапазон (по умолчанию `0`–`1`)  
  - `low`, `high`, `optimum` — зоны:  
    - `low` — верх границы "низкого" диапазона  
    - `high` — ниж границы "высокого"  
    - `optimum` — оптимальное значение (влияет на цвет)  

- **Семантика**: Измерение в диапазоне (диск: 75% заполнен, рейтинг: 4.2/5).  
- **Не для прогресса!**  
- **ARIA**: `role=meter`.

**Пример**:
```html
<meter value="0.75" min="0" max="1" low="0.3" high="0.8" optimum="0.9">
  75% использовано
</meter>
```

---

### Интерактивные элементы

Элементы этой группы реализуют встроенную интерактивность без JavaScript: разворачиваемые секции, диалоговые окна. Критически важны для доступности и уменьшения зависимости от скриптов.

---

<span id="details-summary"></span>

---

#### `<details>`, `<summary>`

##### `<details>`

- **Категория содержимого**: Flow  
- **Модель содержимого**:  
  — один `<summary>` (опционально, но рекомендуется)  
  — затем flow content  
- **Семантика**: Контейнер для дополнительной информации, скрытой по умолчанию.  
- **Атрибуты**:  
  - `open` — булев, состояние раскрытия (по умолчанию — закрыто)  
- **DOM-свойства**:  
  - `.open` — `true`/`false`  
  - События: `toggle` (при изменении состояния)  

---

##### `<summary>`

- **Категория содержимого**: Flow  
- **Модель содержимого**: Phrasing content (интерактивные элементы запрещены)  
- **Семантика**: Заголовок/кнопка для `<details>`.  
- **Особенности**:  
  - Должен быть **первым** ребёнком `<details>` (если присутствует).  
  - По умолчанию: `display: list-item`, `list-style: disclosure-closed/disclosure-open`.  
  - Скринридеры объявляют как "кнопка, свёрнуто/развёрнуто".  
  - Можно стилизовать `::marker` или заменить на кастомный треугольник.

**Пример**:
```html
<details>
  <summary>Подробнее</summary>
  <p>Дополнительный текст, скрытый по умолчанию.</p>
</details>
```

**На этой странице** (кликните заголовок):

<details>
  <summary>Атрибут <code>open</code> на <code>&lt;details&gt;</code></summary>
  <p>Без <code>open</code> блок свёрнут при загрузке. С <code>&lt;details open&gt;</code> содержимое видно сразу — удобно для черновиков, но увеличивает объём «на первом экране»; для FAQ чаще оставляют закрытым.</p>
</details>

**Доступность**:  
- `<summary>` получает `role=button`, `aria-expanded="true/false"`.  
- Не вкладывать `<details>` внутрь `<button>`, `<a>`, `<label>`.  
- Избегать `<details open>` без необходимости — увеличивает начальную нагрузку.

---

#### Callout (выноски в статьях энциклопедии)

В справочнике W3C отдельного элемента «callout» нет. В **Вселенной IT** выноски собирают из `<div>` и классов проекта — так же, как в учебнике [HTML — основы](./1.md#callout-i-details).

| Класс | Смысл |
|-------|--------|
| `callout callout--tip` | совет |
| `callout callout--info` | справка |
| `callout callout--warning` | предупреждение |
| `callout callout--caution` | осторожно |
| `callout callout--danger` | критично |
| `callout callout--note` | заметка |

**Пример на странице:**

<div class="callout callout--info">
  <div class="callout-title">Справочник и курс</div>

  <div class="callout-body">
  Эта статья — шпаргалка по тегам

  последовательное изучение — в [разделе HTML](./intro).
</div>
  </div>

```html
<div class="callout callout--danger">
  <div class="callout-title">Опасная команда</div>

  <div class="callout-body">
  Не выполняйте <code>DROP DATABASE</code> на продакшене без бэкапа и согласования.
</div>
  </div>

```

Синтаксис `:::danger` из Docusaurus в `docs/` **не используйте** — он не отображается; только HTML, как выше. Подробнее — [Markdown и расширения](/encyclopedia/3-data-markup/3-04-konfiguratsii-i-dannye/5).

---

#### `<dialog>`

- **Категория содержимого**: Flow  
- **Модель содержимого**: Flow content  
- **Семантика**: Диалоговое окно или модальное окно.  
- **Атрибуты**:  
  - `open` — булев, видимость (для модального окна управление через JS)  
- **DOM-методы**:  
  - `.show()` — немодальное окно  
  - `.showModal()` — модальное окно (блокирует взаимодействие с фоном, добавляет `::backdrop`)  
  - `.close([returnValue])` — закрытие  
- **События**: `close`, `cancel` (при Esc)  

**Особенности**:  
- При `showModal()`:  
  - Фокус автоматически перемещается внутрь (если есть фокусируемый элемент, иначе на `<dialog>`).  
  - Нажатие Esc вызывает `cancel`, затем `close`.  
  - Фон затемняется через псевдоэлемент `::backdrop` (стилизуется отдельно).  
- Поддержка: Chrome ≥37, Firefox ≥98, Safari ≥15.4, Edge ≥79.  
- Polyfill рекомендуется для IE/старых браузеров.

**Структура best practice**:
```html
<dialog id="confirm-dialog">
  <h2>Подтверждение</h2>
  <p>Вы уверены, что хотите удалить запись?</p>
  <form method="dialog">
    <button type="submit" value="cancel">Отмена</button>
    <button type="submit" value="confirm" autofocus>Удалить</button>
  </form>
</dialog>
```

**Доступность**:  
- При открытии — перемещать фокус внутрь.  
- Обеспечивать циклическую навигацию (Tab/Shift+Tab).  
- Скрывать фон от скринридеров через `aria-hidden="true"` (автоматически при `showModal()`).  
- `role=dialog`, `aria-modal="true"`, `aria-labelledby` — устанавливаются браузером.

**Важно**:  
- Не использовать `display: none` для скрытия — теряется доступность.  
- Для неинтерактивных всплывающих подсказок — использовать tooltip-паттерны (ARIA), а не `<dialog>`.

---

### Скриптовые и специальные элементы

Элементы этой группы либо предоставляют холст для программной отрисовки, либо встраиваются из других спецификаций (SVG, MathML), либо связаны с расширяемостью платформы (Web Components).

---

#### `<canvas>`

- **Категория содержимого**: Flow, phrasing, embedded content, palpable content  
- **Модель содержимого**: Fallback-контент (для старых браузеров)  
- **Семантика**: Растровый холст для программной отрисовки (2D, WebGL, WebGPU).  
- **Атрибуты**:  
  - `width`, `height` — внутренние размеры в CSS-пикселях (не CSS-свойства!)  
  - `tabindex` — при необходимости сделать фокусируемым  

**Особенности**:  
- Содержимое (`<p>Ваш браузер не поддерживает canvas</p>`) отображается, только если `canvas` не поддерживается.  
- Доступ через JS:  
```js
  const ctx = canvas.getContext('2d'); // CanvasRenderingContext2D
  const gl = canvas.getContext('webgl'); // WebGLRenderingContext
  const gpu = canvas.getContext('webgpu'); // GPUDevice (экспериментально)
```  
- **Доступность**:  
  - По умолчанию — неинтерактивный, нечитаемый.  
  - Для интерактивных приложений:  
    - Добавлять `role="img"`, `aria-label`/`aria-labelledby`  
    - Использовать `<canvas aria-owns="fallback-elements">` + скрытые DOM-элементы для структуры  
    - Поддерживать клавиатурную навигацию при необходимости  
- **Производительность**:  
  - `willReadFrequently: true` в `getContext()` — оптимизация для частого `getImageData()`  
  - `desynchronized: true` — отключение синхронизации с compositor (для видео/игр)  
  - `alpha: false` — отключение альфа-канала (ускорение рендеринга)  

**Ограничения**:  
- Нет встроенной поддержки векторной графики (использовать SVG).  
- Содержимое не индексируется поисковиками.  
- Масштабирование через CSS вызывает размытие — лучше менять `width`/`height` атрибуты.

---

#### `<svg>`

- **Категория содержимого**: Flow, phrasing, embedded content  
- **Модель содержимого**: Элементы SVG (согласно SVG 2 Specification)  
- **Семантика**: Встраиваемая векторная графика.  
- **Режимы встраивания**:  
  1. **Inline** (`<svg>...</svg>`) — полный DOM-доступ, CSS-стилизация, скрипты, анимации.  
  2. **Внешний** (`<img src="icon.svg">`, `<object data="chart.svg">`) — ограниченный доступ (без скриптов, стилей извне).  

**Глобальные атрибуты SVG (часто используемые)**:  
- `viewBox="min-x min-y width height"` — определяет систему координат  
- `preserveAspectRatio` — масштабирование и выравнивание (`xMidYMid meet` — по умолчанию)  
- `width`, `height` — отображаемые размеры (могут быть в `%`, `em`, `px`)  
- `aria-label`, `aria-labelledby`, `role` — для доступности  

**Доступность**:  
- `role="img"` + `aria-label` — для иконок  
- `role="group"` + `<title>`, `<desc>` — для сложных диаграмм  
- `<title>` и `<desc>` внутри `<svg>` — эквивалент `alt` и `longdesc`  
- Избегать `role="presentation"` без альтернативы  

**Пример иконки**:
```html
<svg aria-hidden="true" focusable="false" width="24" height="24" viewBox="0 0 24 24">
  <path d="M12 2L2 7v10c0 5.55 1.82 10 7.33 10h9.34c5.51 0 7.33-4.45 7.33-10V7l-10-5z"/>
</svg>
```
— `aria-hidden="true"` + `focusable="false"` — для декоративных иконок.

Готовые фигуры для урока и портфолио — квадрат, домик, цветок, звезда, градиенты — с разбором каждой строки: [SVG — рисунки кодом](/lab/Примеры/1119).

**Производительность**:  
- Минимизировать количество узлов в сложных диаграммах.  
- Использовать `<symbol>` + `<use>` для повторяющихся элементов.  
- Избегать `filter`, `mask`, `clip-path` в анимациях без `will-change`.

---

#### `<math>` (MathML)

- **Категория содержимого**: Flow, phrasing  
- **Модель содержимого**: Элементы MathML (Presentation Markup)  
- **Семантика**: Математические формулы.  
- **Поддержка**:  
  - Firefox ≥1 — полная поддержка  
  - Safari ≥14 — частичная  
  - Chrome/Edge — **только через MathJax/KaTeX** (нативно не поддерживают)  

**Структура**:
```html
<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mi>x</mi>
  <mo>=</mo>
  <mfrac>
    <mrow><mo>-</mo><mi>b</mi><mo>&#xB1;</mo><msqrt><msup><mi>b</mi><mn>2</mn></msup><mo>-</mo><mn>4</mn><mi>a</mi><mi>c</mi></msqrt></mrow>
    <mrow><mn>2</mn><mi>a</mi></mrow>
  </mfrac>
</math>
```

**Доступность**:  
- Скринридеры (VoiceOver, NVDA) могут озвучивать MathML при поддержке.  
- Альтернатива: `aria-label` с текстовым представлением (`"x = (-b ± sqrt(b² - 4ac)) / (2a)"`).  
- Для кросс-браузерности — использовать KaTeX или MathJax (рендер в HTML/CSS/SVG).  
- Для **PDF-отчёта** с нумерацией формул — [LaTeX — формулы для отчётов](/lab/Примеры/1137); для формул на **сайте** — KaTeX/MathJax, как выше.

---

#### `<slot>` (дополнение)

Уже описан в Части 2, но резюмируем ключевые аспекты для Web Components:

- Только валиден внутри shadow DOM (в `<template>` для `attachShadow()` или в shadowRoot).  
- **Типы слотов**:  
  - default — без `name`  
  - named — с `name="header"`, `name="content"` и т.д.  
- **Распределение light DOM**:  
  - Элементы без `slot` → default slot  
  - `<div slot="header">` → `<slot name="header">`  
- **События**:  
  - `slotchange` — при изменении распределённого контента  
- **DOM API**:  
  - `slot.assignedNodes(&#123; flatten: true &#125;)` — получить узлы  
  - `element.assignedSlot` — узнать, в какой слот распределён элемент  

**Ограничения**:  
- `<slot>` нельзя стилизовать напрямую (только через `::slotted()`).  
- `::slotted(*)` применяется только к **прямо распределённым** элементам (не к их потомкам).

---

#### `<portal>` (устаревший)

- **Статус**: deprecated, removed from specification (2020), never shipped in stable browsers.  
- **Предназначение**: Предварительный рендеринг и навигация между документами без полной перезагрузки.  
- **Замена**:  
  - Speculation Rules API (`<script type="speculationrules">`)  
  - `prefetch`, `prerender` через `<link rel="prefetch">`, `<link rel="prerender">` (в Chrome ≥107 с Origin Trial)

---

#### Кастомные элементы и расширяемость

Хотя не являются HTML-элементами *по умолчанию*, важно учитывать:

- **Автономные кастомные элементы**:  
```js
  class MyElement extends HTMLElement { ... }
  customElements.define('my-element', MyElement);
```  
  Использование: `<my-element></my-element>`  

- **Расширение встроенных элементов**:  
```js
  class CustomButton extends HTMLButtonElement { ... }
  customElements.define('custom-button', CustomButton, { extends: 'button' });
```  
  Использование: `<button is="custom-button">`  

- **Требования к именам**:  
  - Должны содержать **дефис** (`my-element`, `ui-button`)  
  - Не могут начинаться с `annotation-xml`, `color-profile`, `font-face`, `missing-glyph` (зарезервировано SVG)  

- **Жизненный цикл**:  
  - `constructor()`  
  - `connectedCallback()`  
  - `disconnectedCallback()`  
  - `adoptedCallback()`  
  - `attributeChangedCallback(name, old, val)` — только для отслеживаемых атрибутов (`static get observedAttributes()`)  

- **Доступность**:  
  - Наследовать семантику от базового элемента (например, `extends HTMLButtonElement` → `role=button`)  
  - Не переопределять `role` без крайней необходимости  
  - Поддерживать клавиатурную навигацию и `focus()`  

---

## Ошибки

| Ситуация | Что проверить |
|----------|----------------|
| Команда не найдена | PATH, установка пакета, alias |
| Permission denied | пользователь, группа, sudo, ACL |
| Неверная версия | см. "Совместимость", `--version` |

---

## Совместимость

| Область | Примечание |
|---------|------------|
| Версии | актуальные LTS/стабильные релизы **HTML** |
| Платформы | официальная матрица поддержки вендора |
| Стандарты | RFC, ISO, спецификация API — см. таблицы выше |

---

{/* http-basics-link  */}
<div class="callout callout--tip">
  <div class="callout-title">Основа по протоколу</div>

  <div class="callout-body">
  Базовый разбор HTTP и HTTPS находится в отдельной статье — [HTTP как основа веб-интеграций](/encyclopedia/2-system-network/2-09-osnovy-integratsionnogo-vzaimodeystviya/118).
</div>
  </div>

{/* sidebar-collections */}

---

## В подборках

Статья входит в [тематические подборки](/about/collections) и блок «С чего начать?» на [главной](/). Соседние шаги того же маршрута:

**Справочники** — [Справочник по SQL](/encyclopedia/3-data-markup/3-07-sql/883), [Справочник по CSS](/encyclopedia/3-data-markup/3-10-css/71), [Справочник по Memcached](/encyclopedia/3-data-markup/3-06-nosql/81), [Справочник-шпаргалка по Git](/encyclopedia/4-code-dev/4-13-osnovy-raboty-s-git/115), [Справочник по Cypher](/encyclopedia/3-data-markup/3-06-nosql/71), [Справочник по JavaScript](/encyclopedia/5-languages/5-01-javascript/251).

{/* /sidebar-collections */}

---