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

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВНЕ ДЛЯ НОВИЧКОВВ РАЗРАБОТКЕ

Разработчику Аналитику Тестировщику
Архитектору Инженеру

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

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

Могут быть заданы на любом 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-security-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-security-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>`

Для блоков кода: <pre><code>...</code></pre>.
Стилизация: моноширинный шрифт по умолчанию.

`<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.

Пример:

<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:

<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:

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`	да	Форма области
`coords`	да	Координаты (через запятую)
`href`	опционально	URL цели (если нет — «мёртвая» область)
`alt`	да (если `href` есть)	Альтернативный текст области
`target`, `rel`, `ping`	как в `<a>`	—

Пример:

<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:

<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.

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

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

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

<table>
  <caption>Описание таблицы</caption>
  <colgroup>
    <col>
    <col span="2">
  </colgroup>
  <thead>
    <tr><th>Заголовок 1</th><th>Заголовок 2</th><th>Заголовок 3</th></tr>
  </thead>
  <tbody>
    <tr><td>Данные</td><td>Данные</td><td>Данные</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Итого</td><td colspan="2">100</td></tr>
  </tfoot>
</table>

<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>.

Пример:

<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.

Пример:

<table>
  <thead>
    <tr>
      <th id="name">Имя</th>
      <th id="q1" colspan="2">Q1</th>
    </tr>
    <tr>
      <th></th>
      <th headers="q1">Янв</th>
      <th headers="q1">Фев</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td headers="name">Тимур</td>
      <td headers="name q1 jan">100</td>
      <td headers="name q1 feb">95</td>
    </tr>
  </tbody>
</table>

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

Избегать объединения ячеек, если возможно.
При объединении — явно указывать связи через headers и id.
Использовать scope="col" для верхних заголовков, scope="row" — для боковых.
Для групп заголовков — scope="colgroup"/"rowgroup" + <thead> с несколькими строками.
Не использовать 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 для валидации	`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`)

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

Текстовые и строковые

`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 (альтернативный текст)

Пример:

<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 для контролов

Пример:

<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 нет — текст становится значением).

Пример:

<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 — как у других контролов

Пример:

<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.

Пример:

<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.

Пример:

<meter value="0.75" min="0" max="1" low="0.3" high="0.8" optimum="0.9">
  75% использовано
</meter>

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

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

`<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 или заменить на кастомный треугольник.

Пример:

<details>
  <summary>Системные требования</summary>
  <p>ОС: Linux 5.15+, 8 ГБ ОЗУ, 50 ГБ SSD.</p>
</details>

Доступность:

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

`<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:

<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:

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" без альтернативы

Пример иконки:

<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" — для декоративных иконок.

Производительность:

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

`<math>` (MathML)

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

Структура:

<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).

`<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({ flatten: true }) — получить узлы
- 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-элементами по умолчанию, важно учитывать:

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

Расширение встроенных элементов:

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()

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

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

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

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

<html>​

<head>​

<title>​

<base>​

<meta>​

<link>​

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

<script>​

<noscript>​

<template>​

<slot>​

<style>​

<link rel="stylesheet">​

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

<body>​

<section>​

<nav>​

<article>​

<aside>​

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

<header>​

<footer>​

<address>​

<main>​

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

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

<p>​

<hr>​

<pre>​

<blockquote>​

Списки​

<ul>, <ol>, <dl>​

<li>​

<dt>, <dd>​

<figure>, <figcaption>​

<div>​

<main>​

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

<a>​

<em>, <strong>​

<small>​

<s>, <del>, <ins>​

<cite>​

<q>​

<dfn>, <abbr>​

<ruby>, <rt>, <rp>​

<data>, <time>​

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

<sub>, <sup>​

<i>, <b>, <u>, <mark>​

<bdi>, <bdo>​

<span>​

<br>, <wbr>​

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

<img>​

<picture>​

<audio>, <video>​

<source>​

<track>​

<map>, <area>​

<iframe>​

<embed>​

<object>, <param>​

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

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

<table>​

<caption>​

<colgroup>, <col>​

<thead>, <tbody>, <tfoot>​

<tr>​

<th>, <td>​

Сложные таблицы: best practices​

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

<form>​

<input>​

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

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

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

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

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

`<html>`

`<head>`

`<title>`

`<base>`

`<meta>`

`<link>`

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

`<script>`

`<noscript>`

`<template>`

`<slot>`

`<style>`

`<link rel="stylesheet">`

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

`<body>`

`<section>`

`<nav>`

`<article>`

`<aside>`

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

`<header>`

`<footer>`

`<address>`

`<main>`

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

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

`<p>`

`<hr>`

`<pre>`

`<blockquote>`

Списки

`<ul>`, `<ol>`, `<dl>`

`<li>`

`<dt>`, `<dd>`

`<figure>`, `<figcaption>`

`<div>`

`<main>`

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

`<a>`

`<em>`, `<strong>`

`<small>`

`<s>`, `<del>`, `<ins>`

`<cite>`

`<q>`

`<dfn>`, `<abbr>`

`<ruby>`, `<rt>`, `<rp>`

`<data>`, `<time>`

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

`<sub>`, `<sup>`

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

`<bdi>`, `<bdo>`

`<span>`

`<br>`, `<wbr>`

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

`<img>`

`<picture>`

`<audio>`, `<video>`

`<source>`

`<track>`

`<map>`, `<area>`

`<iframe>`

`<embed>`

`<object>`, `<param>`

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

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

`<table>`

`<caption>`

`<colgroup>`, `<col>`

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

`<tr>`

`<th>`, `<td>`

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

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

`<form>`

`<input>`

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

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