Валидация ограничений - HTML

Валидация ограничений
=====================

Создание веб-форм всегда было сложной задачей. Хотя сверстать саму форму достаточно просто, проверить, имеет ли каждое поле валидное значение — сложнее, а информирование пользователя о проблеме может стать настоящей головной болью. HTML5 (en-US) представил для форм новый механизм: он добавляет элементу `<input>` новые семантические типы и *constraint validation*, чтобы облегчить проверку содержимого на стороне клиента. С помощью новых атрибутов основные ограничения могут быть проверены без использования JavaScript; более сложные ограничения могут быть проверены с помощью Constraint validation API (en-US).

Базовое введение в эти концепции с примерами можно найти в разделе Валидация форм на стороне клиента.

**Примечание:** HTML5-валидация ограничений не отменяет необходимости дополнительной валидации на *стороне сервера*. Несмотря на то, что ожидается гораздо меньшее не валидных запросов формы, они всё же могут быть отправлены несовместимыми браузерами (например, не поддерживающими HTML5 или JavaScript) или злоумышленниками, которые пытаются взломать ваше веб-приложение. Следовательно, как и в случае с HTML4, вам по-прежнему нужно производить дополнительную валидацию ограничений ввода и на стороне сервера.

Внутренние и базовые ограничения
--------------------------------

В HTML5 базовые ограничения объявляются двумя способами:

* Задавать семантически наиболее подходящие значения для атрибута `type` элемента `<input>`. Например, типа `email` автоматически создаёт ограничение, которое проверяет, является ли значение валидным email-адресом.
* Использовать атрибуты валидации, позволяющие достаточно просто задать ограничения без помощи JavaScript.
### Семантические типы input

Внутренние ограничения атрибута `type`:

| Тип input | Описание ограничения | Связанное нарушение |
| --- | --- | --- |
| `<input type="URL">` (en-US) | Значение должно быть URL-адресом, как указано в URL Living Standard. | Нарушение ограничения **TypeMismatch** |
| `<input type="email">` (en-US) | Значение должно быть синтаксически правильным email-адресом, который обычно имеет формат `username@hostname.tld`. | Нарушение ограничения **TypeMismatch** |

Для обоих этих типов input, если установлен атрибут `multiple` допускается ввод нескольких разделённых запятыми значений. Если какое-то из значений не удовлетворяет условию, описанному выше, срабатывает нарушение ограничения **Type mismatch**.

Обратите внимание, что большинство типов input не имеют внутренних ограничений, так как некоторые из них недоступны для валидации ограничений или имеют алгоритм, по умолчанию преобразующий неправильные значения в правильные.

### Атрибуты валидации

В дополнение к атрибуту `type`, описанному выше, для описания основных ограничений используются следующие атрибуты:

| Атрибут | Типы input, поддерживающие атрибут | Возможные значения | Описание ограничения | Связанное нарушение |
| --- | --- | --- | --- | --- |
| `pattern` | `text`, `search`, `url`,
 `tel`, `email`, `password` | Регулярное выражение JavaScript
 (без
 ECMAScript 5
 флагов `global`, `ignoreCase`, and
 `multiline` | Значение должно соответствовать шаблону. | `Нарушение ограничения
**patternMismatch**` |
| `min (en-US)` | `range`, `number` | Валидное число | Значение в поле должно быть больше или равно значению атрибута |
 Нарушение ограничения
 **`rangeUnderflow`** |
| `date`, `month`, `week` | Валидная дата |
| `datetime`, `datetime-local`, `time` | Валидная дата и время |
| `max (en-US)` | `range`, `number` | Валидное число | Значение в поле должно быть меньше или равно значению атрибута |
 Нарушение ограничения
 **`rangeOverflow`** |
| `date`, `month`, `week` | Валидная дата |
| `datetime`, `datetime-local`, `time` | Валидная дата и время |
| `required (en-US)` | `text`, `search`, `url`,
 `tel`, `email`, `password`,
 `date`, `datetime`, `datetime-local`,
 `month`, `week`, `time`,
 `number`, `checkbox`, `radio`,
 `file`; а также элементы `<select>`
 и `<textarea>` (en-US) | *Нет*, так как это булев атрибут: его наличие означает
 *true*, а отсутствие — *false* | В поле обязательно должно быть значение (если установлен атрибут) | **`valueMissing (en-US)`**
 constraint violation
  |
| `step (en-US)` | `date` | Целое число дней |
 Если для шага не задан литерал `any`, значением должно быть
 **min** + целое число, кратное шагу
  |
 Нарушение ограничения
 **`stepMismatch`** |
| `month` | Целое число месяцев |
| `week` | Целое число недель |
| `datetime`, `datetime-local`, `time` | Целое число секунд |
| `range`, `number` | Целое число |
| `minlength (en-US)` | `text`, `search`, `url`,
 `tel`, `email`, `password`; а также
 элемент `<textarea>` (en-US)/td>
  | Целое число |
 Если атрибут не пустой, количество символов (точек кода) содержимого
 поля не должно быть меньше значения, указанного в атрибуте. Все символы
 новой строки нормализованы до одного символа (в отличие от CRLF-пар) для
 `<textarea>` (en-US).
  |
 Нарушение ограничения
 **`tooShort`** |
| `maxlength (en-US)` | `text`, `search`, `url`,
 `tel`, `email`, `password`; а также
 элемент `<textarea>` (en-US) | Целое число |
 Количество символов (точек кода) содержимого поля не должно превышать
 значение, указанное в атрибуте
  |
 Нарушение ограничения
 **`tooLong`** |

Процесс валидации ограничений
-----------------------------

Валидация ограничений выполняется с помощью Constraint Validation API либо на отдельном элементе формы, либо на уровне формы, на самом элементе `<form>`. Способы валидации:

* Вызов метода `checkValidity()` или `reportValidity()` связанного с формой DOM-интерфейса, (`HTMLInputElement` (en-US), `HTMLSelectElement` (en-US), `HTMLButtonElement`, `HTMLOutputElement` (en-US) или `HTMLTextAreaElement` (en-US)), который оценивает ограничения только на данном элементе, позволяя скрипту получить эту информацию. Метод `checkValidity()` возвращает логическое значение, указывающее, соотвествует ли значение элемента его ограничениям. (Обычно это делает браузер при определении того, какой CSS-псевдоклассов применяется: `:valid` или `:invalid`.) Напротив, метод `reportValidity()` сообщает пользователю о любых нарушениях ограничений.
* Вызов метода `checkValidity()` или `reportValidity()` интерфейса `HTMLFormElement` (en-US).
* Отправка самой формы.

Вызов метода `checkValidity()` называется *статической* валидацией ограничений, а вызов метода `reportValidity()` или отправка формы называется *интерактивной* валидацией ограничений.

**Примечание:**- Если элементу `<form>` задан атрибут `novalidate`, интерактивная валидация ограничений не произойдёт.

* Вызов метода `submit()` интерфейса `HTMLFormElement` (en-US) не запускает валидацию ограничений. Другими словами, этот метод отправляет данные формы на сервер, даже если ограничения нарушены. Вместо него вызовите метод `click()` кнопки отправки формы.

Сложные ограничения с помощью Constraint Validation API
-------------------------------------------------------

С помощью JavaScript и Constraint Validation API можно реализовать более сложные ограничения, например, ограничения, касающиеся сразу нескольких полей или ограничения, включающие сложные вычисления.

По сути, идея заключается в том, чтобы при наступлении определённого события поля формы (например, **onchange**) запускать JavaScript, чтобы определить, нарушено ограничение, и затем с помощью метода `field.setCustomValidity()`, задать результат валидации: пустая строка означает, что ограничение соблюдается, а любая другая строка означает, что есть ошибка и эта строка является сообщением об ошибке, которое нужно показать пользователю.

### Ограничение, объединяющее несколько полей: Валидация почтового индекса

Формат почтового индекса в разных странах отличается. Мало того, что в большинстве стран может быть дополнительный префикс с кодом страны (например, `D —` в Германии, `F —` во Франции или Швейцарии), в некоторых странах, почтовые индексы содержат фиксированное количеством цифр; другие, например, Великобритания, имеют ещё более сложную структуру, допускающую в определённых местах ещё и наличие букв.

**Примечание:** Далее представлена не полная библиотека валидации почтового индекса, а скорее демонстрация ключевых концепций.

В качестве примера мы добавим скрипт, выполняющий валидацию органичений простой формы:

```html
<form>
  <label for="ZIP">ZIP : </label>
  <input type="text" id="ZIP" />
  <label for="Country">Country : </label>
  <select id="Country">
    <option value="ch">Switzerland</option>
    <option value="fr">France</option>
    <option value="de">Germany</option>
    <option value="nl">The Netherlands</option>
  </select>
  <input type="submit" value="Validate" />
</form>
```

Получим следующую форму:

Сначала запишем функцию, проверяющую само ограничение:

```js
function checkZIP() {
  // Для каждой страны определяем шаблон, которому должен следовать почтовый индекс
  var constraints = {
    ch: [
      "^(CH-)?\\d{4}$",
      "Switzerland ZIPs must have exactly 4 digits: e.g. CH-1950 or 1950",
    ],
    fr: [
      "^(F-)?\\d{5}$",
      "France ZIPs must have exactly 5 digits: e.g. F-75012 or 75012",
    ],
    de: [
      "^(D-)?\\d{5}$",
      "Germany ZIPs must have exactly 5 digits: e.g. D-12345 or 12345",
    ],
    nl: [
      "^(NL-)?\\d{4}\\s\*([A-RT-Z][A-Z]|S[BCE-RT-Z])$",
      "Nederland ZIPs must have exactly 4 digits, followed by 2 letters except SA, SD and SS",
    ],
  };

  // Прочитать id страны
  var country = document.getElementById("Country").value;

  // Получить поле NPA
  var ZIPField = document.getElementById("ZIP");

  // Создать валидатор ограничения
  var constraint = new RegExp(constraints[country][0], "");
  console.log(constraint);

  // Валидировать индекс
  if (constraint.test(ZIPField.value)) {
    // Индекс соответствует ограничению, мы используем ConstraintAPI, чтобы сообщить об этом
    ZIPField.setCustomValidity("");
  } else {
    // Индекс не соответствует ограничению , мы используем ConstraintAPI, чтобы
    // показать сообщение, описывающее формат, требуемый для данной страны
    ZIPField.setCustomValidity(constraints[country][1]);
  }
}
```

Затем мы связываем его с событием **onchange** для `<select>` и с событием **oninput** для `<input>`:

```js
window.onload = function () {
  document.getElementById("Country").onchange = checkZIP;
  document.getElementById("ZIP").oninput = checkZIP;
};
```

### Ограничение размера загружаемого файла

Ещё одним распространённым ограничением является лимит размера загружаемых файлов. Данная проверка на стороне клиента перед отправкой на сервер требует сочетания Constraint Validation API и особенно метода `field.setCustomValidity()` с другим JavaScript API, в данном случае — File API.

Вот часть HTML:

```html
<label for="FS">Select a file smaller than 75 kB : </label>
<input type="file" id="FS" />
```

Она отображает:

JavaScript считывает выбранный файл, с помощью метода `File.size()` получает его размер, сравнивает его с лимитом и вызывает Constraint Validation API, чтобы сообщить браузеру о нарушении:

```js
function checkFileSize() {
  var FS = document.getElementById("FS");
  var files = FS.files;

  // Если выбран хотя бы один файл
  if (files.length > 0) {
    if (files[0].size > 75 \* 1024) {
      // Проверить ограничение
      FS.setCustomValidity("Размер файла не должен превышать 75 kB");
      return;
    }
  }
  // Если нарушения ограничений нет
  FS.setCustomValidity("");
}
```

Наконец мы связываем метод с нужным событием:

```js
window.onload = function () {
  document.getElementById("FS").onchange = checkFileSize;
};
```

Визуальное оформление нарушения ограничений
-------------------------------------------

Помимо установки ограничений, веб-разработчики хотят управлять тем, какие сообщения показываются пользователям и как они оформлены.

### Управление внешним видом элементов

Изменять внешний вид элементов можно с помощью CSS-псевдоклассов.

#### CSS-псевдоклассы :required и :optional

Псевдоклассы `:required` и `:optional` позволяют писать селекторы, соответствующие элементам формы, которые имеют или не имеют атрибут `required`

#### CSS-псевдокласс :placeholder-shown

Смотрите `:placeholder-shown`

#### CSS-псевдоклассы :valid и :invalid

Псевдоклассы `:valid` и `:invalid` используются для представления элементов <input>, содержимое которых является валидным или не валидным соответственно. Эти классы позволяют пользователю оформлять валидные или не валидные элементы формы, чтобы облегчить определение элементов, которые имеют корректный или некорректный формат.

### Управление текстом нарушения ограничений

Следующее может помочь с управлением текстом нарушения ограничений:

* Метод element.setCustomValidity(message) (en-US) для элементов:
    + `<fieldset>`. Примечание: Добавление кастомного сообщения валидации на элемент fieldset не предотвращает отправку формы в большинстве браузеров.
    + `<input>`
    + `<output>`
    + `<select>`
    + Кнопка отправки формы в виде элемента `<button>` или `input` `submit` с указанным типом submit (en-US). Другие типы кнопок не участвуют в валидации ограничений.
    + `<textarea>` (en-US)
* Интерфейс `ValidityState` описывает объект, возвращаемый свойством validity (en-US) перечисленных выше типов элементов. Он представляет разные способы определения не валидности значения. Вместе они помогают объяснить, почему значение элемента не проходит валидацию, если оно не валидно.


Разрешение использования изображений из разных источников и canvas - HTML

Разрешение использования изображений из разных источников и canvas
==================================================================

HTML предоставляет атрибут `crossorigin` для изображений, которые в сочетании с соответствующим заголовком CORS позволяют использовать изображения, определённые элементом `<img>`, загруженные из внешних источников, в `<canvas>` , как если бы они были загружены из текущего источника.

Дополнительные сведения об использовании атрибута `crossorigin` смотрите в разделе атрибуты параметров CORS.

Безопасность и испорченные холсты canvas
----------------------------------------

Поскольку пиксели в растровом изображении canvas могут поступать из различных источников, включая изображения или видео, полученные с других хостов, неизбежно могут возникнуть проблемы с безопасностью.

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

Если источником внешнего содержимого является элемент HTML `<img>` или SVG `<svg>`, то попытка извлечения содержимого холста не допускается.

Если внешнее содержимое поступает из изображения, полученного либо из `HTMLCanvasElement`, либо из `ImageBitMap`, и источник изображения не соответствует тем же правилам происхождения, попытки прочитать содержимое холста блокируются.

Вызов любого из следующих методов на испорченном холсте приведёт к ошибке:

* Вызов `getImageData()` в контексте canvas
* Вызов `toBlob()` на самом элементе `<canvas>`
* Вызов `toDataURL()` на canvas

Попытка обратиться к ним, когда холст испорчен, приведёт к возникновению ошибки безопасности `SecurityError`. Это защищает пользователей от доступа к личным данным с помощью изображений для извлечения информации с удалённых веб-сайтов без разрешения.

Хранение изображений из внешнего источника
------------------------------------------

В этом примере мы хотим разрешить извлечение изображений из внешнего источника и сохранение их в локальном хранилище. Реализация этого требует настройки сервера, а также написания кода для самого веб-сайта.

### Конфигурация веб-сервера

Первое, что нам нужно, - это сервер, настроенный на размещение изображений с заголовком `Access-Control-Allow-Origin`, настроенным на разрешение доступа к файлам изображений из разных источников.

Давайте предположим, что мы обслуживаем наш сайт с помощью Apache. Рассмотрим стандартный файл конфигурации сервера Apache HTML5 для образов CORS, показанный ниже:

```xml
<IfModule mod\_setenvif.c>
  <IfModule mod\_headers.c>
    <FilesMatch "\.(bmp|cur|gif|ico|jpe?g|png|svgz?|webp)$">
      SetEnvIf Origin ":" IS_CORS
      Header set Access-Control-Allow-Origin "*" env=IS_CORS
    </FilesMatch>
  </IfModule>
</IfModule>
```

Вкратце, это настраивает сервер на разрешение графических файлов (тех, что с расширениями ".bmp", ".cur", ".gif", ".ico", ".jpg", ".jpeg", ".png", ".svg", ".svgz" и ".webp") для получения доступа из любой точки интернета.

### Реализация возможности сохранения

Теперь, когда сервер настроен так, чтобы разрешить извлечение изображений из разных источников, мы можем написать код, который позволяет пользователю сохранять их в локальном хранилище, как если бы они обслуживались из того же домена, на котором выполняется код.

Ключевым моментом является использование атрибута `crossorigin` путём установки `crossOrigin` (en-US) в элементе `HTMLImageElement` , на который будет загружено изображение. Это даёт браузеру команду на запрос доступа к другому источнику при попытке загрузить данные изображения.

#### Запуск загрузки

Код, который запускает загрузку (скажем, когда пользователь нажимает кнопку "Загрузить"), выглядит следующим образом:

```js
function startDownload() {
  let imageURL =
    "https://cdn.glitch.com/4c9ebeb9-8b9a-4adc-ad0a-238d9ae00bb5%2Fmdn\_logo-only\_color.svg?1535749917189";

  downloadedImg = new Image();
  downloadedImg.crossOrigin = "Anonymous";
  downloadedImg.addEventListener("load", imageReceived, false);
  downloadedImg.src = imageURL;
}
```

Здесь мы используем жёстко закодированный URL-адрес (`imageURL`), но он запросто может поступать откуда угодно. Чтобы начать загрузку изображения, мы создаём новый объект `HTMLImageElement` с помощью конструктора `Image()`. Затем изображение настраивается так, чтобы разрешить загрузку из другого источника. Для этого его атрибут `crossOrigin` устанавливается на `"Anonymous"` (то есть разрешение неавторизованной загрузки изображения из перекрёстного источника). Обработчик событий добавляется к событию `load (en-US)`, запускаемому на элементе изображения, что означает, что данные изображения были получены.

Наконец, атрибут `src` (en-US) изображения устанавливается в URL-адрес загружаемого изображения; это инициирует начало загрузки.

#### Получение и сохранение изображения

Код, обрабатывающий недавно загруженные изображения, находится в методе `imageReceived()`:

```js
function imageReceived() {
  let canvas = document.createElement("canvas");
  let context = canvas.getContext("2d");

  canvas.width = downloadedImg.width;
  canvas.height = downloadedImg.height;

  context.drawImage(downloadedImg, 0, 0);
  imageBox.appendChild(canvas);

  try {
    localStorage.setItem("saved-image-example", canvas.toDataURL("image/png"));
  } catch (err) {
    console.log("Error: " + err);
  }
}
```

`imageReceived()` вызывается для обработки события `"load"` в элементе `HTMLImageElement`, который получает загруженное изображение. Это событие срабатывает, как только все загруженные данные становятся доступными. Он начинается с создания нового элемента `<canvas>`, который мы будем использовать для преобразования изображения в URL-адрес данных и получения доступа к контексту 2D-рендеринга холста (`CanvasRenderingContext2D`) в переменной `context`.

Размер холста настраивается в соответствии с полученным изображением, затем изображение рисуется на холсте с помощью `drawImage()`. Затем холст вставляется в документ, чтобы изображение было видно.

Теперь пришло время действительно сохранить изображение локально. Для этого мы используем механизм локального хранения Web Storage API, доступ к которому осуществляется через `localStorage` глобально. Метод canvas `toDataURL()` используется для преобразования изображения в data:// URL, представляющий изображение PNG, которое затем сохраняется в локальном хранилище с помощью `setItem()`.

Вы можете проверить или переделать этот пример на Glitch.

Смотрите также
--------------

* Using Cross-domain images in WebGL and Chrome 13
* HTML Specification - the `crossorigin` attribute
* Веб хранилище (API)


Элемент - HTML

Элемент
=======

На этой странице собраны все элементы HTML. Они сгруппированы по функциям, чтобы помочь вам найти то, что вам нужно для реализации ваших идей. Хотя это руководство написано для относительных новичков в программировании, мы хотим, чтобы оно было полезным для всех.

Основные элементы
-----------------

Основные элементы являются основой любого HTML документа. Вы увидите эти элементы в исходном коде для всех веб-страниц после задания типа документа на первой строке на странице. DOCTYPE определяет, какую версию (X) HTML эта страница использует. Элементы страницы находятся между открывающим тегом <HTML> и закрывающим </ HTML>. Элемент`<html>` называется корневым элементом.

| Элемент | Описание |
| --- | --- |
| `<html>` | Представляет собой корень (элемент верхнего уровня) HTML-документа, поэтому его так же называют корневым элементом. Все другие элементы должны быть потомками этого элемента (должны находиться внутри него). |

Метаданные документа
--------------------

Метаданные содержат информацию о странице. Они включают в себя информацию о стилях, скрипты и данные, чтобы помочь программному обеспечению (поисковые системы, браузеры и т.д.) использовать и отображать страницу. Метаданные для стилей и скрипты могут быть определены на странице или ссылке на другой файл, который имеет информацию.

| Элемент | Описание |
| --- | --- |
| `<base>` | Определяет основной адрес (URL), используемый для всех относительных адресов (URLs) в документе. Может быть только один **`<base>`** элемент в одном документе. |
| `<head>` | Содержит машиночитаемую информацию (metadata) о документе, например его заголовок, скрипты и страницы стилей. |
| `<link>` | Определяет отношения между текущим документом и внешним ресурсом. Этот элемент чаще всего используется для ссылки на stylesheets, а также для создания иконок сайта (как для иконок в стиле "favicon", так и для иконок домашних экранов и приложений мобильных устройств) среди прочего. |
| `<meta>` | Представляет такие метаданные, которые не могут быть представлены другими HTML-метатегами, такими как `<base>`, `<link>`, `<script>`, `<style>` или `<title>`. |
| `<style>` | Содержит стилевую информацию для документа или его части. По умолчанию стилевые инструкции внутри этого элемента считаются написанными на CSS. |
| `<title>` | Определяет заголовок документа, который отображается в заголовке окна браузера или на вкладке страницы. Он содержит только текст, а теги внутри элемента игнорируются. |

Секционирование корня
---------------------

| Элемент | Описание |
| --- | --- |
| `<body>` | Представляет собой контент (содержимое) документа HTML. В документе может быть только один элемент `<body>`. |

Секционирование содержания
--------------------------

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

| Элемент | Описание |
| --- | --- |
| `<address>` | Задаёт контактные данные для ближайшего родительского `<article>` или `<body>` ; В последнем случае применяется ко всему документу, визуально выделяется курсивом. |
| `<article>` | Представляет самостоятельную часть документа, страницы, приложения или сайта, предназначенную для независимого распространения или повторного использования. Этот элемент может представлять статью на форуме, статью в журнале или газете, запись в блоге или какой-либо другой самостоятельный фрагмент содержимого. |
| `<aside>` | Представляет собой часть документа, чьё содержимое только косвенно связанно с основным содержимым документа. Чаще всего представлен в виде боковой панели, сносок или меток. |
| `<footer>` | Представляет собой нижний колонтитул (футер, подвал) для своего ближайшего секционного контента или секционного корня. Футер обычно содержит информацию об авторе раздела, информацию об авторском праве или ссылки на связанные документы. |
| `<header>` | Представляет собой вводный контент, обычно группу вводных или навигационных средств. Он может содержать другие элементы-заголовки, а также логотип, форму поиска, имя автора и другие элементы. |
| `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>` | **HTML-элементы `<h1>`–`<h6>`** представляют собой 6 уровней заголовков секций. `<h1>` это наибольший заголовок и `<h6>` - наименьший |
| `<main>` | Предназначен для основного контента (содержимого) `<body>` документа (страницы). Основной контент состоит из контента, который непосредственно относится к главной теме документа или её развивает. |
| `<nav>` | Определяет отдельную секцию документа, назначение которой обозначение ссылок навигации (как внутри текущего документа, так и ведущих на другую страницу). В качестве примера такой секции можно привести меню, якорные ссылки. |
| `<section>` | Представляет собой автономный раздел — который не может быть представлен более точным по семантике элементом — внутри HTML-документа. Как правило, но не всегда, разделы имеют заголовок. |

Текстовое содержание
--------------------

Используйте текстовые элементы HTML для организации блоков или разделов содержания, размещённые между тегами открытия <body> и закрытия </body>. Важное значение для accessibility и SEO, чтобы эти элементы определили цель или структуру этого контента.

| Элемент | Описание |
| --- | --- |
| `<blockquote>` | Указывает на то, что заключённый в нем текст является развёрнутой цитатой. Обычно он (текст) визуально выделяется наклонным (смотри Примечание (en-US), где говорится о том, как это изменить). URI на источник цитаты можно указать в атрибуте **cite**, тогда как текстовое представление источника может быть задано элементом `<cite>`. |
| `<dd>` | Предоставляет подробности или определение предшествующего термина (`<dt>`) в списке определений (`<dl>`). |
| `<div>` | Является универсальным контейнером для потокового контента. Он не влияет на контент или макет до тех пор, пока не будет стилизован с помощью CSS. |
| `<dl>` | Представляет собой список описаний. Этот элемент служит контейнером для списка пар терминов (определяемых элементом `<dt>`) и их описаний (определяемых элементами `<dd>`). Этот элемент обычно используют при создании глоссария или для отображения метаданных (списка пар ключ-значение). |
| `<dt>` | Определяет термин в описании или списке определений, как таковой должен использоваться внутри элемента `<dl>` . Обычно за ним следует элемент `<dd>`. Кроме того, несколько элементов `<dt>` идущие друг за другом будут содержать своё определение в следующем идущем за ним элементом`<dd>`. |
| `<figcaption>` | Представляет собой подпись (заголовок) или легенду, описывающую остальную часть содержимого родительского элемента `<figure>`. |
| `<figure>` | Представляет самостоятельный контент, часто с подписью (заголовком), которая указывается с помощью элемента (`<figcaption>`). Диаграмма и её подпись представляет собой единое целое. |
| `<hr>` | Служит для тематического разделения абзацев. Рисует горизонтальную прямую |
| `<li>` | Используется для создания элементов списка. Он также должен находиться в родительском элементе: упорядоченном списке (`<ol>`), неупорядоченном списке (`<ul>`), или меню (`<menu>`). В меню и неупорядоченных списках, элементы списка обычно отображаются с маркерами в виде круга. В упорядоченных списках, они обычно отображаются с маркерами в виде возрастающего счётчика слева, например числа или буквы. |
| `<menu>` | Представляет группу команд, которые пользователь может выполнить или активировать. Он включает как меню-списки, которые могут отображаться в верхней части экрана, так и контекстные меню, например, такие, что могут появиться под кнопкой после нажатия. |
| `<ol>` | Используется для упорядоченного списка — в частности для пронумерованного списка. |
| `<p>` | Представляет собой абзац. Абзацы обычно представлены в визуальной среде в виде блоков текста, отделённых от соседних блоков пустыми строками и/или отступом в первой строке, кроме этого HTML-абзацы могут представлять собой структурную группировку однотипного содержимого, например изображений или полей формы. |
| `<pre>` | Представляет собой предварительно отформатированный текст, который должен быть представлен точно так, как написано в HTML-файле. Текст обычно отображается с использованием непропорционального ("monospace") шрифта. Пробелы внутри этого элемента отображаются как записанные. |
| `<ul>` | Используется для неупорядоченного списка - в частности для маркированного списка. |

Встроенные текстовые семантики
------------------------------

Используйте встроенную в HTML текстовую семантику, чтобы определить смысл, структуру или стиль текста, линий или части текста.

| Элемент | Описание |
| --- | --- |
| `<a>` | Определяет гиперссылку для перехода на определённое место на странице или на другую страницу в Интернете. Также он может быть использован (в устаревшем варианте) для создания якоря — это место назначения для гиперссылок внутри страницы: так ссылки не ограничены только в перемещении между страницами. |
| `<abbr>` | Представляет собой аббревиатуру и, опционально, может показывать её расшифровку. Расшифровка записывается в атрибут `title`. Иные значения `title`, кроме расшифровки аббревиатуры не допускаются. |
| `<b>` | Является частью текста стилистически отличающейся от нормального текста, не носящий какого-либо специального значения или важности, и как правило выделен жирным шрифтом. |
| `<bdi>` | Изолирует от окружающего текста текстовый фрагмент, направление в котором может отличаться от направления окружающего текста (но не обязательно отличается). |
| `<bdo>` | Переопределяет текущее направление текста так, что текст внутри отображается в другом направлении. |
| `<br>` | Устанавливает перевод строки в тексте (возврат каретки). Он полезен при написании поэмы или адреса, где важно деление на строки. |
| `<cite>` | Представляет из себя ссылку на источник цитаты. Он должен включать в себя название произведения или URL, который может быть в сокращённом виде в соответствии с правилами, используемых для добавления метаданных цитирования. |
| `<code>` | Отображает его содержимое в стиле, предназначенном для указания на то, что текст является коротким фрагментом компьютерного кода. По умолчанию текст содержимого отображается с использованием шрифта монопространства по умолчанию пользовательского агента. |
| `<data>` | \*Связывает данное содержимое с машиночитаемым представлением. Если содержимое относится к времени или дате, необходимо использовать элемент `<time>`. |
| `<dfn>` | Используется для указания термина, определяемого в контексте фразы или предложения. Элемент `<p>`, пара `<dt>`/`<dd>` или элемент `<section>`, который является ближайшим предком `<dfn>` считается определением термина. |
| `<em>` | Отмечает акцентируемый текст. Элемент `<em>` может быть вложенным, причём каждый уровень вложенности указывает на большую степень акцента. |
| `<i>` (en-US) | Представляет собой отрывок текста, выделяемый среди прочего по определенным причинам, например: идиоматический текст, технические термины, систематические обозначения и прочее. Обычно отмечается курсивом, от чего и получил свое название (от англ. *Italic*). |
| `<kbd>` | Указывает на то, что текст внутри элемента описывает пользовательский ввод с клавиатуры, голосовой ввод или ввод с использованием любого другого типа устройств ввода текста. По общему соглашению, user agent использует моноширинный шрифт для отображения содержимого элемента `<kbd>` по умолчанию, хотя это и не указывается HTML стандартом явно. |
| `<mark>` | Представляет текст, выделенный в справочных целях из-за своей *актуальности* в определённом контексте. Например, он может быть использован на странице с результатом поиска, в которой выделяется каждый экземпляр искомого слова. |
| `<q>` (en-US) | Indicates that the enclosed text is a short inline quotation. Most modern browsers implement this by surrounding the text in quotation marks. This element is intended for short quotations that don't require paragraph breaks; for long quotations use the `<blockquote>` element. |
| `<rp>` (en-US) | Used to provide fall-back parentheses for browsers that do not support display of ruby annotations using the `<ruby>` element. One `<rp>` element should enclose each of the opening and closing parentheses that wrap the `<rt>` (en-US) element that contains the annotation's text. |
| `<rt>` (en-US) | Specifies the ruby text component of a ruby annotation, which is used to provide pronunciation, translation, or transliteration information for East Asian typography. The `<rt>` element must always be contained within a `<ruby>` element. |
| `<ruby>` | Предназначен для добавления небольшой аннотации сверху или снизу от заданного текста. Такая форма записи преимущественно используется для идеографической письменности вроде китайского языка, но может применяться и для других языков, если требуется написать один текст над другим. |
| `<s>` (en-US) | Renders text with a strikethrough, or a line through it. Use the `<s>` element to represent things that are no longer relevant or no longer accurate. However, `<s>` is not appropriate when indicating document edits; for that, use the del and ins elements, as appropriate. |
| `<samp>` (en-US) | Used to enclose inline text which represents sample (or quoted) output from a computer program. Its contents are typically rendered using the browser's default monospaced font (such as Courier or Lucida Console). |
| `<small>` (en-US) | Represents side-comments and small print, like copyright and legal text, independent of its styled presentation. By default, it renders text within it one font-size smaller, such as from `small` to `x-small`. |
| `<span>` | Является основным строковым контейнером для фразового контента, который, по существу, ничего не представляет. Он может использоваться для группировки элементов в целях стилизации (использование атрибутов `class` или `id`) или потому, что они имеет общие значения атрибутов, например `lang`. Он должен быть использован только когда нет другого подходящего по семантике элемента. `<span>` очень похож на элемент `<div>`, но `<div>` является блочным элементом, в то время как `<span>` является строчным. |
| `<strong>` | Указывает на то, что его содержание имеет большое значение, серьёзность или срочность. Браузеры обычно отображают содержимое жирным шрифтом. |
| `<sub>` (en-US) | Specifies inline text which should be displayed as subscript for solely typographical reasons. Subscripts are typically rendered with a lowered baseline using smaller text. |
| `<sup>` (en-US) | Specifies inline text which is to be displayed as superscript for solely typographical reasons. Superscripts are usually rendered with a raised baseline using smaller text. |
| `<time>` | Используется для представления либо времени в 24-часовом формате, либо точной даты по Григорианскому календарю (с опциональным указанием времени и часового пояса). |
| `<u>` (en-US) | The HTML **Unarticulated Annotation Element** (**`<u>`**) represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation. This is rendered by default as a simple solid underline, but may be altered using CSS. |
| `<var>` (en-US) | Represents the name of a variable in a mathematical expression or a programming context. It's typically presented using an italicized version of the current typeface, although that behavior is browser-dependent. |
| `<wbr>` | Предоставляет возможность переноса слова – позицию в тексте, где браузер может по желанию разбить строку, в противном случае его правила разрыва строки не будут создавать разрыв в этом месте. |

Изображения и мультимедиа
-------------------------

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

| Элемент | Описание |
| --- | --- |
| `<area>` | Определяет активную область на изображении и, при желании, связывает её с гипертекстовой ссылкой (en-US). Этот элемент используется только внутри элемента `<map>`. |
| `<audio>` | Используется для встраивания звукового контента в документ. Он может содержать один или более источников аудио, представленных с помощью атрибута `src` или элемента `<source>` – браузер выберет один наиболее подходящий. Он так же может предназначаться для потокового мультимедиа, используя интерфейс `MediaStream`. |
| `<img>` | Встраивает изображение в документ. Это замещаемый элемент. |
| `<map>` | Используется с элементами `<area>` для определения карты изображения (интерактивной области ссылок). |
| `<track>` | Используется как дочерний элемент медиа-элементов `<audio>` and `<video>`. Позволяет указать синхронизированные текстовые дорожки (или данные на основе времени), например, для автоматической обработки субтитров. Файлы треков используют формат WebVTT (`.vtt` файлы) — Web Video Text Tracks или Timed Text Markup Language (TTML). |
| `<video>` | Для встраивания видео контента в документ используйте **элемент HTML <video>**. Видео элемент может содержать один или несколько источников видео. Чтобы указать источник видео, необходимо использовать атрибут **src** или элемент `<source>`; браузер сам определит наиболее подходящий источник. |

Встроенное содержание
---------------------

Содержание мультимедийных HTML включает в себя другие материалы, даже если они не всегда легко взаимодействуют.

| Элемент | Описание |
| --- | --- |
| `<embed>` | Вставляет расширенный контент в выбранное место документа. Этот контент может быть представлен от внешнего приложения или другого источника интерактивного контента, такого как плагин для браузера, например. |
| `<iframe>` (en-US) | Represents a nested browsing context, embedding another HTML page into the current one. |
| `<object>` (en-US) | Represents an external resource, which can be treated as an image, a nested browsing context, or a resource to be handled by a plugin. |
| `<picture>` | Служит контейнером для одного или более элементов `<source>` и одного элемента `<img>` для обеспечения оптимальной версии изображения для различных размеров экрана. Браузер рассмотрит каждый из дочерних элементов `<source>` и выберет один, соответствующий лучшему совпадению; если совпадений среди элементов `<source>` найдено не будет, то будет выбран файл, указанный атрибутом `src` элемента `<img>` . Затем выбранное изображение отображается в пространстве, занятом элементом `<img>`. |
| `<portal>` (en-US) | Enables the embedding of another HTML page into the current one for the purposes of allowing smoother navigation into new pages. |
| `<source>` | Указывает несколько медиа-ресурсов для элементов `<picture>`, `<video>` и `<audio>`. Это пустой элемент. Он обычно используется для обслуживания одного и того же медиа-контента в нескольких форматах, поддерживаемых различными браузерами (en-US). |

SVG and MathML
--------------

You can embed SVG and MathML content directly into HTML documents, using the `<svg>` and `<math>` elements.

| Элемент | Описание |
| --- | --- |
| `<svg>` | Представляет собой контейнер, который определяет новую систему координат и область просмотра. Он используется, как самый внешний элемент документов SVG, но также может использоваться для встраивания фрагмента SVG в документ SVG или HTML. |
| `<math>` | Элементом верхнего уровня в MathML является тэг `<math>`. Каждый допустимый экземпляр MathML должен быть внутри этого контейнера. Он не допускает вложений, но внутри может быть произвольное число других дочерних элементов. |

Скриптинг
---------

Чтобы создавать динамический контент и веб-приложения, HTML поддерживает использование скриптовых языков, наиболее известным является JavaScript. Некоторые элементы поддерживают эту возможность.

| Элемент | Описание |
| --- | --- |
| `<canvas>` | Может быть использован для отрисовки графики при помощи скриптов (обычно используется JavaScript). Например, его можно использовать для отрисовки графиков, делать композиции фото или даже выполнять анимации. Вы можете (и должны) дать альтернативное содержание внутри блока `<canvas>`. Этот контент будет рендерится в обоих браузерах, в старых которые не поддерживают canvas и в браузерах с отключённым JavaScript. |
| `<noscript>` | Определяет секцию HTML кода, которая будет вставлена, если в браузере пользователя нет либо отключена поддержка JavaScript. |
| `<script>` | Используется для встраивания или подключения исполняемого JavaScript кода. Элемент `<script>` также может использоваться с другими языками, такими как GLSL (en-US) от WebGL. |

Разграничительные правки
------------------------

Эти элементы позволяют вам отметить определённые части текста.

| Элемент | Описание |
| --- | --- |
| `<del>` | Представляет диапазон текста, который был удалён из документа. Он может быть использован, например, при отображении "отслеживания изменений" или различий в исходном коде. Элемент `<ins>` можно использовать для противоположной цели: указание текста, который был добавлен в документ. |
| `<ins>` | Представляет собой диапазон текста, который был добавлен в документ |

Содержание таблиц
-----------------

Эти элементы используются для создания и обработки табличных данных.

| Элемент | Описание |
| --- | --- |
| `<caption>` | Определяет название (заголовок) таблицы. Если этот элемент используется, он *всегда* должен быть первым вложенным элементом тэга `<table>` (en-US). Внешний вид и расположение заголовка по отношению к самой таблице может быть изменено с помощью стилей CSS `caption-side` (en-US) and `text-align`. |
| `<col>` | Определяет столбец в таблице и используется для определения общей семантики на всех ячейках. Обычно он находится в элементе `<colgroup>` (en-US). |
| `<colgroup>` (en-US) | Defines a group of columns within a table. |
| `<table>` (en-US) | Represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data. |
| `<tbody>` (en-US) | Encapsulates a set of table rows (`<tr>` (en-US) elements), indicating that they comprise the body of the table (`<table>` (en-US)). |
| `<td>` | Определяет ячейку таблицы которая содержит данные. Участвует в *табличной модели*. |
| `<tfoot>` | Определяет набор строк суммирующих столбцы таблицы. |
| `<th>` (en-US) | Defines a cell as header of a group of table cells. The exact nature of this group is defined by the `scope` and `headers` attributes. |
| `<thead>` (en-US) | Defines a set of rows defining the head of the columns of the table. |
| `<tr>` (en-US) | Defines a row of cells in a table. The row's cells can then be established using a mix of `<td>` (data cell) and `<th>` (en-US) (header cell) elements. |

Формы
-----

HTML содержит некоторое количество элементов, которые используются вместе для создания форм, которые пользователь может заполнить и отправить на сервер. Доступно множество информации по этой теме в руководстве по HTML формам.

| Элемент | Описание |
| --- | --- |
| `<button>` | Создаёт интерактивную кнопку, которая может быть использована в формах или в любом другом месте документа, который требует простой, стандартной кнопки. По умолчанию, кнопки HTML обычно представлены в стиле, аналогичном стилю хост-платформы, на которой работает user agent, но вы можете изменить внешний вид кнопки, используя CSS. |
| `<datalist>` | Содержит набор опций (`<option>`), доступных для выбора. Выбранное значение будет установлено для элемента `<input>`, с атрибутом `list`. |
| `<fieldset>` | Используется для группировки нескольких элементов управления в веб-форме. |
| `<form>` | Представляет (собой) раздел документа, содержащий интерактивные элементы управления, которые позволяют пользователю отправлять информацию на веб-сервер. |
| `<input>` | Используется для создания интерактивных элементов управления в веб-формах для получения данных от пользователя; в зависимости от устройства и user agent, доступен широкий выбор типов входных данных и виджетов управления. Из-за огромного количества возможных сочетаний типов ввода и атрибутов это один из самых мощных и сложных элементов HTML. |
| `<label>` | Представляет собой подпись к элементу пользовательского интерфейса. |
| `<legend>` | Представляет собой заголовок содержания родительского элемента `<fieldset>`. |
| `<meter>` | Представляет собой скалярное значение в пределах известного диапазона или дробного значения. |
| `<optgroup>` | Позволяет группировать опции, находящиеся внутри элемента `<select>`. |
| `<option>` | Используется для определения пункта списка контейнера `<select>`, элемента `<optgroup>`, или элемента `<datalist>`. Элемент `<option>` может представлять раздел меню всплывающих окон и других перечней или списков HTML документа. |
| `<output>` | Является контейнерным элементом, в котором сайт или приложение могут выводить результаты вычислений или действий пользователя. |
| `<progress>` | Отображает индикатор, показывающий ход выполнения задачи, обычно отображаемый в виде прогресс бара (индикатора выполнения). |
| `<select>` | Представляет собой элемент управления который содержит меню опций: |
| `<textarea>` (en-US) | Represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form. |

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

HTML содержит в себе элементы, которые помогают создавать интерактивные объекты пользовательского интерфейса.

| Элемент | Описание |
| --- | --- |
| `<details>` | Используется для раскрытия скрытой (дополнительной) информации. |
| `<dialog>` | Определяет диалоговое окно или другой интерактивный элемент, такой как инспектор или окно. Элементы `<form>` могут интегрироваться с диалогом с помощью указания атрибута `method="dialog"`. Когда отправляется такая форма, диалог закрывается с returnValue равным value нажатой кнопки submit. |
| `<summary>` | The **HTML Disclosure Summary element** (**`<summary>`**) element specifies a summary, caption, or legend for a `<details>` element's disclosure box. Clicking the `<summary>` element toggles the state of the parent `<details>` element open and closed. |

Веб-компоненты
--------------

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

**Примечание:** Эти элементы определены в World Wide Web Consortium (W3C) Web Components collection of specifications скорее, чем в HTML спецификации. К тому же, спецификация Веб-компонентов не завершена и является темой для обсуждений.

| Элемент | Описание |
| --- | --- |
| `<slot>` | Является частью набора технологии Web Components, является заполнителем внутри веб компонента, который можно заполнить собственной разметкой, которая позволяет создавать отдельные деревья DOM и представлять их вместе. |
| `<template>` | Представляет собой механизм для отложенного создания клиентского контента, который не отображается во время загрузки страницы, но может быть инициализирован при помощи JavaScript. |

Устаревшие и осуждаемые элементы
--------------------------------

**Предупреждение:** Эти HTML-элементы являются устаревшими, и их использование не рекомендуется. **Вы не должны использовать их для новых проектов, а также должны заменить их в старых проектах как можно быстрее.** Они перечислены здесь только в информационных целях.

| Элемент | Описание |
| --- | --- |
| `<acronym>` | Позволяет явно указать, что данная последовательность букв, являющуюся акронимом или аббревиатурой. |
| `<bgsound>` (en-US) | Sets up a sound file to play in the background while the page is used; use `<audio>` instead. |
| `<big>` (en-US) | Renders the enclosed text at a font size one level larger than the surrounding text (`medium` becomes `large`, for example). The size is capped at the browser's maximum permitted font size. |
| `<center>` (en-US) | Displays its block-level or inline contents centered horizontally within its containing element. |
| `<content>` (en-US) | An obsolete part of the Web Components suite of technologies—was used inside of Shadow DOM (en-US) as an insertion point, and wasn't meant to be used in ordinary HTML. It has now been replaced by the `<slot>` element, which creates a point in the DOM at which a shadow DOM can be inserted. |
| `<dir>` (en-US) | Container for a directory of files and/or folders, potentially with styles and icons applied by the user agent. Do not use this obsolete element; instead, you should use the `<ul>` element for lists, including lists of files. |
| `<font>` | Определяет размер шрифта, цвета и лицо для его содержимого |
| `<frame>` (en-US) | Defines a particular area in which another HTML document can be displayed. A frame should be used within a `<frameset>` (en-US). |
| `<frameset>` (en-US) | Used to contain `<frame>` (en-US) elements. |
| `<image>` | Элемент HTML `<image>` был экспериментальным элементом, предназначенный для отображения изображений. Он никогда не был реализован, вместо него должен использоваться стандартный элемент `<img>`. |
| `<marquee>` | Used to insert a scrolling area of text. You can control what happens when the text reaches the edges of its content area using its attributes. |
| `<menuitem>` (en-US) | HTML-элемент `<marquee>` используется для создания на странице прокручивающегося текста (бегущей строки). |
| `<nobr>` (en-US) | Prevents the text it contains from automatically wrapping across multiple lines, potentially resulting in the user having to scroll horizontally to see the entire width of the text. |
| `<noembed>` (en-US) | An obsolete, non-standard way to provide alternative, or "fallback", content for browsers that do not support the embed element or do not support the type of embedded content an author wishes to use. This element was deprecated in HTML 4.01 and above in favor of placing fallback content between the opening and closing tags of an `<object>` (en-US) element. |
| `<noframes>` (en-US) | Provides content to be presented in browsers that don't support (or have disabled support for) the `<frame>` (en-US) element. Although most commonly-used browsers support frames, there are exceptions, including certain special-use browsers including some mobile browsers, as well as text-mode browsers. |
| `<param>` (en-US) | Defines parameters for an `<object>` (en-US) element. |
| `<plaintext>` (en-US) | Renders everything following the start tag as raw text, ignoring any following HTML. There is no closing tag, since everything after it is considered raw text. |
| `<rb>` (en-US) | Used to delimit the base text component of a ruby annotation, i.e. the text that is being annotated. One `<rb>` element should wrap each separate atomic segment of the base text. |
| `<rtc>` (en-US) | Embraces semantic annotations of characters presented in a ruby of `<rb>` (en-US) elements used inside of `<ruby>` element. `<rb>` (en-US) elements can have both pronunciation (`<rt>` (en-US)) and semantic (`<rtc>` (en-US)) annotations. |
| `<shadow>` | An obsolete part of the Web Components technology suite that was intended to be used as a shadow DOM insertion point. You might have used it if you have created multiple shadow roots under a shadow host. |
| `<spacer>` | Allows insertion of empty spaces on pages. It was devised by Netscape to accomplish the same effect as a single-pixel layout image, which was something web designers used to use to add white spaces to web pages without actually using an image. However, `<spacer>` is no longer supported by any major browser and the same effects can now be achieved using simple CSS. |
| `<strike>` (en-US) | Places a strikethrough (horizontal line) over text. |
| `<tt>` (en-US) | Creates inline text which is presented using the user agent default monospace font face. This element was created for the purpose of rendering text as it would be displayed on a fixed-width display such as a teletype, text-only screen, or line printer. |
| `<xmp>` (en-US) | Renders text between the start and end tags without interpreting the HTML in between and using a monospaced font. The HTML2 specification recommended that it should be rendered wide enough to allow 80 characters per line. |


Категории контента - HTML

Категории контента
==================

Каждый элемент HTML принадлежит некоторому количеству категорий контента, которые объединяют элементы с общим набором характеристик. Такая группировка является свободной, то есть не задаёт на самом деле отношение между элементами таких типов, но помогает определить и описать их поведение и правила, которым они должны следовать, особенно когда дело доходит до сложных деталей. Также возможна ситуация, когда элемент не входит *ни в одну* из этих категорий.

Существует три типа категорий контента:

* Основные категории контента, описывающие общие для многих элементов правила;
* Категории контента для элементов форм, описывающие общие правила для элементов форм;
* Особые категории контента, описывающие редкие категории, актуальные только для нескольких элементов, возможно, лишь в особом контексте.

**Примечание:** Более подробное обсуждение данных категорий контента и их сравнительных особенностей выходит за рамки данной статьи; можно обратиться к соответствующим разделам спецификации HTML (на английском).

![Диаграмма Венна, показывающая, как взаимодействуют различные категории контента.](/ru/docs/Web/HTML/Content_categories/content_categories_venn.png)

Основные категории контента
---------------------------

### Метаданные

Элементы, принадлежащие к *категории метаданных,* изменяют отображение или поведение HTML-документа, связывают его с другими документами и предоставляют другую *дополнительную* информацию о документе.

Элементами метаданных являются: `<base>`, `<link>`, `<meta>`, `<noscript>`, `<script>`, `<style>` и `<title>`.

### Основной поток

Элементы основного потока обычно содержат текст и встроенный контент.

`<a>`, `<abbr>`, `<address>`, `<article>`, `<aside>`, `<audio>`, `<b>`,`<bdo>`, `<bdi>`, `<blockquote>`, `<br>`, `<button>`, `<canvas>`, `<cite>`, `<code>`, `<data>`, `<datalist>`, `<del>`, `<details>`, `<dfn>`, `<div>`, `<dl>`, `<em>`, `<embed>`, `<fieldset>`, `<figure>`, `<footer>`, `<form>`, `<h1>` (en-US), `<h2>` (en-US), `<h3>` (en-US), `<h4>` (en-US), `<h5>` (en-US), `<h6>` (en-US), `<header>`, `<hgroup>`, `<hr>`, `<i>` (en-US), `<iframe>` (en-US), `<img>`, `<input>`, `<ins>`, `<kbd>`, `<label>`, `<main>`, `<map>`, `<mark>`, `<math>`, `<menu>`, `<meter>`, `<nav>`, `<noscript>`, `<object>` (en-US), `<ol>`, `<output>`, `<p>`, `<pre>`, `<progress>`, `<q>` (en-US), `<ruby>`, `<s>` (en-US), `<samp>` (en-US), `<script>`, `<section>`, `<select>`, `<small>` (en-US), `<span>`, `<strong>`, `<sub>` (en-US), `<sup>` (en-US), `<svg>`, `<table>` (en-US), `<template>`, `<textarea>` (en-US), `<time>`, `<ul>`, `<var>` (en-US), `<video>`, `<wbr>` и Текст.

Несколько других элементов, которые тоже принадлежат к этому типу, но требуют определённых условий:

* `<area>`, только внутри элемента `<map>`
* `<link>`, при наличии атрибута `itemprop`
* `<meta>`, при наличии атрибута `itemprop`
* `<style>`, при наличии атрибута `scoped`
### Секционный контент

Секционный контент является подмножеством основного потока, он создаёт разделы документа определяя области элементов `<header>`, `<footer>` и заголовочного контента.

Элементы этой категории это: `<article>`, `<aside>`, `<nav>` и `<section>`.

### Заголовочный контент

Заголовочный контент задаёт заголовок секции, явно отмеченной структурным элементом или неявно – самим заголовочным.

Данной категории принадлежат такие элементы, как `<h1>` (en-US), `<h2>` (en-US), `<h3>` (en-US), `<h4>` (en-US), `<h5>` (en-US), `<h6>` (en-US) и `<hgroup>`.

**Примечание:** *Э*лемент `<header>` сам по себе не является заголовочным, хотя с большой вероятностью содержит контент такого типа.

**Примечание:** Стоит заметить, что элемент `<hgroup>` был удалён из спецификации W3C HTML до приведения HTML 5 к окончательному варианту, но до сих пор является частью спецификации WHATWG и по крайней мере частично поддерживается большинством браузеров.

### Фразовый контент

Фразовый контент определяет текст и его формат. Серии фразового контента образуют параграфы.

К данной категории принадлежат следующие элементы: `<abbr>`, `<audio>`, `<b>`, `<bdo>`, `<br>`, `<button>`, `<canvas>`, `<cite>`, `<code>`, `<data>`, `<datalist>`, `<dfn>`, `<em>`, `<embed>`, `<i>` (en-US), `<iframe>` (en-US), `<img>`, `<input>`, `<kbd>`, `<label>`, `<mark>`, `<math>`, `<meter>`, `<noscript>`, `<object>` (en-US), `<output>`, `<progress>`, `<q>` (en-US), `<ruby>`, `<samp>` (en-US), `<script>`, `<select>`, `<small>` (en-US), `<span>`, `<strong>`, `<sub>` (en-US), `<sup>` (en-US), `<svg>`, `<textarea>` (en-US), `<time>`, `<var>` (en-US), `<video>`, `<wbr>` и обычный текст (не только состоящий из символов пробелов).

Ещё несколько элементов входят в данную категорию при соблюдении особых условий:

* `<a>`, если содержит в себе только фразовый контент
* `<area>`, только внутри элемента `<map>`
* `<del>`, если содержит в себе только фразовый контент
* `<ins>`, если содержит в себе только фразовый контент
* `<link>`, при наличии атрибута `itemprop`
* `<map>`, если содержит в себе только фразовый контент
* `<meta>`, при наличии атрибута `itemprop`
### Встроенный контент

Встроенный контент импортирует в документ другой ресурс или вставляет содержимое на другом языке разметки или принадлежащее другому пространству имён. Элементами данной категории являются: `<audio>`, `<canvas>`, `<embed>`, `<iframe>` (en-US), `<img>`, `<math>`, `<object>` (en-US), `<svg>`, `<video>`.

### Интерактивный контент

 К интерактивному контенту относятся элементы, которые специально разработаны для взаимодействия с пользователем. В данную категорию входят `<a>`, `<button>`, `<details>`, `<embed>`, `<iframe>` (en-US), `<label>`, `<select>` и `<textarea>` (en-US).
 Некоторые элементы считаются интерактивным контентом только при соблюдении определённых условий:

* `<audio>`, если указан атрибут `controls`
* `<img>`, если указан атрибут `usemap`
* `<input>`, если атрибут `type` не скрыт
* `<menu>`, если атрибут `type` имеет значение `toolbar`
* `<object>` (en-US), если указан атрибут `usemap` (en-US)
* `<video>`, если указан атрибут `controls`
### Явный контент

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

### Контент форм

Контент форм включает в себя элементы, у которых есть владелец формы, обозначенный атрибутом **form**. Владельцем формы является либо элемент `<form>`, либо элемент, id которого указан в атрибуте **form**.

* `<button>`
* `<fieldset>`
* `<input>`
* `<label>`
* `<meter>`
* `<object>` (en-US)
* `<output>`
* `<progress>`
* `<select>`
* `<textarea>` (en-US)

Данная категория включает несколько подкатегорий:

listed

Элементы, перечисленные в IDL коллекциях form.elements (en-US) и fieldset.elements. Включают `<button>`, `<fieldset>`, `<input>`, `<object>` (en-US), `<output>`, `<select>`, и `<textarea>` (en-US).

labelable

Элементы, которые могут ассоциироваться с элементами `<label>`. Включают `<button>`, `<input>`, `<meter>`, `<output>`, `<progress>`, `<select>` и `<textarea>` (en-US).

submittable

Элементы, которые могут использоваться для построения набора данных формы при отправке на сервер. Включают `<button>`, `<input>`, `<object>` (en-US), `<select>` и `<textarea>` (en-US).

resettable

Элементы, которые могут быть затронуты при сбросе данных формы. Включают `<input>`, `<output>`,`<select>` и `<textarea>` (en-US).

Вторичные категории
-------------------

Существуют некоторые вторичные классификации элементов, о которых тоже полезно знать.

### Элементы поддержки скриптов

Элементы поддержки скриптов – это элементы, которые напрямую не влияют на отрисовку документа. Вместо этого они служат для внедрения скриптов, путём либо содержания кода скрипта напрямую, либо указания данных, которые будут использованы скриптами.

Элементами поддержки скриптов являются:

* `<script>`
* `<template>`
Прозрачная модель контента
--------------------------

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

Например, элементы `<del>` и `<ins>` являются прозрачными:
```

<p>Мы почитаем следующие истины <del><em>священными & неоспоримыми</em></del> <ins>само собой разумеющимися</ins>.</p>
```

Если удалить эти элементы, данный фрагмент всё равно будет представлять собой валидный HTML.
```

<p>Мы почитаем следующие истины <em>священными & неоспоримыми</em> само собой разумеющимися.</p>
```

Прочие модели контента
----------------------

Корень задания разделов.


Режим совместимости (Quirks Mode) и стандартный режим (Standards Mode) - HTML

Режим совместимости (Quirks Mode) и стандартный режим (Standards Mode)
======================================================================

В самом начале веба страницы обычно писались в двух версиях: одна для браузера Netscape Navigator, другая для браузера Microsoft Internet Explorer. Когда W3C были созданы новые веб стандарты, браузеры не могли их сразу использовать, так как это могло привести к некорректному отображению большинства существующих сайтов. Для правильного отображения устаревших сайтов и сайтов, поддерживающих новые стандарты, браузерами были разработаны два режима отображения.

На сегодняшний день существует три режима отображения, которые используются движками разметки (layout engines) браузеров: режим совместимости (quirks mode), частично стандартный режим (almost standards mode) и стандартный режим (full standards mode). В режиме совместимости (**quirks mode)**, разметка эмулирует нестандартное поведение браузеров Navigator 4 и Internet Explorer 5. Этот режим необходим для поддержки сайтов, созданных до начала широкого применения веб стандартов. В стандартном режиме (**full standards mode)** поведение браузера соответствует (будем надеяться) описанному в спецификациях HTML и CSS. В частично стандартном режиме (**almost standards mode)** реализовано лишь незначительное количество так называемых "странностей" (quirks).

Как браузеры понимают, какой режим использовать?
------------------------------------------------

Браузеры используют тег DOCTYPE, чтобы определить в каком режиме обрабатывать документ. Для отображения страницы в стандартном режиме необходимо добавить тег DOCTYPE в HTML-код страницы как показано в примере ниже:

```html
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>
  </head>
  <body></body>
</html>
```

Тег DOCTYPE, указанный в примере, - `<!DOCTYPE html>` - самый простой способ обеспечить стандартный режим отображения; использование этого тега рекомендовано стандартом HTML5. Для предыдущих версий HTML рекомендованы другие варианты, но все существующие на текущий момент браузеры используют такой тег DOCTYPE для отображения страницы в стандартном режиме, даже Internet Explorer 6. На сегодняшний день не существует веских причин для использования более сложного тега DOCTYPE. Использование какого-либо другого тега DOCTYPE может привести к переключению браузера в частично стандартный режим отображения или в режим совместимости.

Необходимо удостовериться, что тег DOCTYPE находится в самом начале HTML документа. Если на странице будет что-либо до тега DOCTYPE, например, комментарий или декларирование XML, то браузеры Internet Explorer 9 и выше будут переведены в режим совместимости.

В стандарте HTML5 тег DOCTYPE используется исключительно для активации стандартного режима отображения. Предыдущие версии HTML придавали дополнительное значение использованию тега DOCTYPE, но браузеры использовали тег DOCTYPE исключительно для переключения между режимом совместимости и стандартным режимом.

Смотрите также детальное описание того, как разные браузеры выбирают режимы.

### XHTML

Если страница написана в XHTML формате с указанием типа MIME `application/xhtml+xml` в заголовке `Content-Type`, то не нужно указывать DOCTYPE для активации стандартного режима, так как подобные документы всегда отображаются в стандартном режиме. Важно иметь в виду, что Internet Explorer 8 вместо контента такой страницы отображает диалоговое окно загрузки как для неизвестного формата, поскольку поддержка XHTML реализована в Internet Explorer, начиная с 9 версии.

Если страница написана в XHTML формате с использованием типа MIME `text/html`, браузер будет интерпретировать его как HTML, поэтому для использования браузером стандартного режима отображения необходимо указать тег DOCTYPE.

Как узнать, какой режим используется?
-------------------------------------

Если страница отображается в режиме совместимости или ограниченном режиме, Firefox выведет сообщение об этом в консоль в инструментах разработчика. Если такого предупреждения нет, то Firefox использует обычный режим.

Значение `document.compatMode` в JavaScript показывает, отображается ли документ в режиме совместимости. Если значение равно `"BackCompat"`, значит документ в режиме совместимости. В противном случае значение будет равно `"CSS1Compat"`.


Справочная информация по HTML атрибутам - HTML

Справочная информация по HTML атрибутам
=======================================

У элементов HTML есть **атрибуты**; это дополнительные значения, которые настраивают элементы или регулируют их поведение различным способом, чтобы соответствовать критериям пользователей.

Список атрибутов
----------------

| Имя атрибута | Элементы | Описание |
| --- | --- | --- |
| `hidden` | Глобальный атрибут | Предотвращает генерирование данного элемента, в то время как сохраняет дочерние элементы, например, элементы script, active. |
| `high` | `<meter>` | Указывает нижнюю границу верхнего диапазона. |
| `href` | `<a>`, `<area>`, `<base>`, `<link>` | URL связанного ресурса. |
| `hreflang` | `<a>`, `<area>`, `<link>` | Указывает язык связанного ресурса. |
| `http-equiv` | `<meta>` |  |
| `icon` | `<command>` | Указывает картинку, которая будет представлять команду. |
| `id` | Глобальный атрибут | Часто используется с CSS для стилизации заданного элемента. Значение атрибута должно быть уникальным. |
| `ismap` | `<img>` | Показывает, что изображение часть серверной карты изображений. |
| `itemprop` | Глобальный атрибут |  |
| `kind` | `<track>` | Указывает вид дорожки текста. |
| `label` | `<track>` | Указывает читабельный заголовок дорожки текста. |
| `lang` | Глобальный атрибут | Определяет язык для используемого элемента. |
| `language` | `<script>` | Определяет язык скрипта, используемый в элементе. |
| `list` | `<input>` | Задаёт список предустановленных опций для предложения пользователю. |
| `loop` | `<audio>`, `<bgsound>` (en-US), `<marquee>`, `<video>` | Указывает, следует ли медиа элементам начинать проигрывание сначала, после их завершения. |
| `low` | `<meter>` | Указывает верхнюю границу нижнего диапазона. |
| `manifest` | `<html>` | Задаёт URL кешированного манифеста документа. |
| `max` | `<input>`, `<meter>`, `<progress>` | Указывает максимальное допустимое значение. |
| `maxlength` | `<input>`, `<textarea>` (en-US) | Определяет максимальное количество символов, допустимых в элементе. |
| `media` | `<a>`, `<area>`, `<link>`, `<source>`, `<style>` | Задаёт подсказку медиа, для которой, связанный ресурс был спроектирован. |
| `method` | `<form>` | Определяет, какой HTTP метод использовать, когда отправляются данные формы. Может быть GET (по умолчанию) или POST. |
| `min` | `<input>`, `<meter>` | Показывает минимальное допустимое значение. |
| `multiple` | `<input>`, `<select>` | Показывает могут ли быть выбраны множественные значения в input типа email или file. |
| `name` | `<button>`, `<form>`, `<fieldset>`, `<iframe>` (en-US), `<input>`, `<object>` (en-US), `<output>`, `<select>`, `<textarea>` (en-US), `<map>`, `<meta>`, `<param>` (en-US) | Имя элемента. К примеру, используется сервером для определения полей отправленной формы. |
| `novalidate` | `<form>` | Этот атрибут указывает, что форма не должна проверяться, когда передаётся на сервер. |
| `open` | `<details>` | Указывает, отображать ли детали при загрузки страницы. |
| `optimum` | `<meter>` | Указывает оптимальное числовое значение. |
| `pattern` | `<input>` | Определяет регулярное выражение, которое будет проверять входные данные элемента. |
| `ping` | `<a>`, `<area>` |  |
| `placeholder` | `<input>`, `<textarea>` (en-US) | Предоставляет подсказку пользователю, касательно того, что можно ввести в поле. |
| `poster` | `<video>` | URL указывающий блок постера для показа, пока пользователь играет или ищет. |
| `preload` | `<audio>`, `<video>` | Указывает загружать ли ресурс целиком, его часть или не загружать вовсе. |
| `pubdate` | `<time>` | Указывает, что эта дата и время являются ли датой ближайшего элемента предка `<article>`. |
| `radiogroup` | `<command>` |  |
| `readonly` | `<input>`, `<textarea>` (en-US) | Указывает, можно ли редактировать элемент. |
| `rel` | `<a>`, `<area>`, `<link>` | Задаёт отношение целевого объекта к объекту ссылки. |
| `required` | `<input>`, `<select>`, `<textarea>` (en-US) | Указывает, необходимо ли заполнять этот элемент или нет. |
| `reversed` | `<ol>` | Указывает, отображать ли список по убыванию, вместо того, чтобы показывать его по возрастанию. |
| `rows` | `<textarea>` (en-US) | Определяет количество строк в textarea. |
| `rowspan` | `<td>`, `<th>` (en-US) | Определяет количество строк ячейки таблицы, которые следует охватывать. |
| `sandbox` | `<iframe>` (en-US) |  |
| `spellcheck` | Глобальный атрибут | Указывает, разрешена ли проверка правописания для этого элемента. |
| `scope` | `<th>` (en-US) |  |
| `scoped` | `<style>` |  |
| `seamless` | `<iframe>` (en-US) |  |
| `selected` | `<option>` | Определяет значение, которое будет выделено при загрузки страницы. |
| `shape` | `<a>`, `<area>` |  |
| `size` | `<input>`, `<select>` | Определяет ширину элемента (в пикселях). Если у элемента значение атрибута `type` — `text` или `password`, тогда это количество символов. |
| `sizes` | `<link>` |  |
| `span` | `<col>`, `<colgroup>` (en-US) |  |
| `src` | `<audio>`, `<embed>`, `<iframe>` (en-US), `<img>`, `<input>`, `<script>`, `<source>`, `<track>`, `<video>` | URL встраиваемого содержимого. |
| `srcdoc` | `<iframe>` (en-US) |  |
| `srclang` | `<track>` |  |
| `srcset` | `<img>` |  |
| `start` | `<ol>` | Определяет первый номер, если это не 1. |
| `step` | `<input>` |  |
| `style` | Глобальный атрибут | Определяет CSS стили, которые перепишут установленные ранее стили. |
| `summary` | `<table>` (en-US) |  |
| `tabindex` | Глобальный атрибут | Переписывает порядок Tab по умолчанию браузера и следует вместо него заданному. |
| `target` | `<a>`, `<area>`, `<base>`, `<form>` |  |
| `title` | Глобальный атрибут | Текст, который будет отображаться в всплывающей подсказке, когда на него наведут указатель. |
| `type` | `<button>`, `<input>`, `<command>`, `<embed>`, `<object>` (en-US), `<script>`, `<source>`, `<style>`, `<menu>` | Определяет тип элемента. |
| `usemap` | `<img>`, `<input>`, `<object>` (en-US) |  |
| `value` | `<button>`, `<option>`, `<input>`, `<li>`, `<meter>`, `<progress>`, `<param>` (en-US) | Определяет значение элемента по умолчанию, которое будет отображаться после загрузки страницы. |
| `width` | `<canvas>`, `<embed>`, `<iframe>` (en-US), `<img>`, `<input>`, `<object>` (en-US), `<video>` | Примечание: в некоторых случаях, таких как `<div>`, это устаревший атрибут, в этом случае используйте свойство CSS `width` вместо него. В других случаях, таких как `<canvas>`, ширина должна быть задана этим атрибутом. |
| `wrap` | `<textarea>` (en-US) | Указывает, следует ли переносить текст. |
| `border` | `<img>`, `<object>` (en-US), `<table>` (en-US) | Ширина границы.Примечание: это устаревший атрибут, используйте свойство CSS `border`. |
| `buffered` | `<audio>`, `<video>` | Содержит отрезок времени уже буферизованного медиа. |
| `charset` | `<meta>`, `<script>` | Определяет кодировку страницы или скрипта. |
| `checked` | `<command>`, `<input>` | Указывает, следует ли отметить элемент при загрузки страницы. |
| `cite` | `<blockquote>`, `<del>`, `<ins>`, `<q>` (en-US) | Содержит URI, который указывает на источник цитаты или изменения. |
| `class` | Глобальный атрибут | Часто используется вместе с CSS, чтобы стилизовать элементы с общими свойствами. |
| `code` | `<applet>` | Указывает URL файла класса аплета для загрузки и выполнения. |
| `codebase` | `<applet>` | Этот атрибут предоставляет абсолютный или относительный URL директории, файлы аплета .class, на которые ссылаются в хранимом атрибуте кода. |
| `color` | `<basefont>` (en-US), `<font>`, `<hr>` | Этот атрибут устанавливает цвет текста, используя либо название цвета, либо шестнадцатеричный формат #RRGGBB.Примечание: это устаревший атрибут. Используйте CSS-свойство `color` (en-US). |
| `cols` | `<textarea>` (en-US) | Определяет количество столбцов в textarea. |
| `colspan` | `<td>`, `<th>` (en-US) | Определяет диапазон количества столбцов ячейки. |
| `content` | `<meta>` | Значение, ассоциированное с `http-equiv` или `name` зависит от контекста. |
| `contenteditable` | Глобальный атрибут | Указывает, редактируется ли содержимое элемента. |
| `contextmenu` | Глобальный атрибут | Определяет ID элемента `<menu>` который послужит, как контекстное меню элемента. |
| `controls` | `<audio>`, `<video>` | Указывает, следует ли отображать пользователю кнопки воспроизведения. |
| `coords` | `<area>` | Набор значений, задающий координаты области для активного участка. |
| `data` | `<object>` (en-US) | Задаёт URL ресурса. |
| `data-*` | Глобальный атрибут | Позволяет прикрепить произвольные атрибуты для HTML-элемента. |
| `datetime` | `<del>`, `<ins>`, `<time>` | Указывает дату и время, ассоциированное с элементом. |
| `default` | `<track>` | Указывает, что дорожка должна быть доступна, если пользовательские настройки не говорят об обратном. |
| `defer` | `<script>` | Указывает, что скрипт должен быть запущен, после того как страница будет проанализирована. |
| `dir` | Глобальный атрибут | Определяет направление текста. Допустимые значения ltr (Слева направо) или rtl (Справа налево). |
| `dirname` | `<input>`, `<textarea>` (en-US) |  |
| `disabled` | `<button>`, `<command>`, `<fieldset>`, `<input>`, `<optgroup>`, `<option>`, `<select>`, `<textarea>` (en-US) | Указывает, может ли пользователь взаимодействовать с элементом. |
| `download` | `<a>`, `<area>` | Указывает, что ссылка используется для загрузки. |
| `draggable` | Глобальный атрибут | Определяет, можно ли перетаскивать элемент. |
| `dropzone` | Глобальный атрибут | Указывает, что элемент принимает содержимое элемента, которое перетаскивают на него. |
| `enctype` | `<form>` | Определяет тип содержимого для данных формы, когда `method` — POST. |
| `for` | `<label>`, `<output>` | Описывает элементы, которые принадлежат им. |
| `form` | `<button>`, `<fieldset>`, `<input>`, `<label>`, `<meter>`, `<object>` (en-US), `<output>`, `<progress>`, `<select>`, `<textarea>` (en-US) | Указывает форму, которая является владельцем элемента. |
| `formaction` | `<input>`, `<button>` | Указывает действие элемента, перезаписывающее действие, указанное в форме `<form>`. |
| `headers` | `<td>`, `<th>` (en-US) | ID элементов `<th>`, которые применяются к этому элементу. |
| `height` | `<canvas>`, `<embed>`, `<iframe>` (en-US), `<img>`, `<input>`, `<object>` (en-US), `<video>` | Примечание: в некоторых экземплярах, таких как `<div>`, это устаревший атрибут, в этом случае используйте свойство CSS `height`. В других экземплярах, таких как `<canvas>`, высота должна быть задана этим атрибутом. |
| `accept` | `<form>`, `<input>` | Список типов, которые принимает сервер, обычно тип файла. |
| `accept-charset` | `<form>` | Список поддерживаемых наборов символов. |
| `accesskey` | Глобальный атрибут | Определяет клавишную комбинацию для активизации или добавления фокуса к элементу. |
| `action` | `<form>` | URI адрес программы, которая обработает данные, переданные через форму. |
| `align` | `<applet>`, `<caption>`, `<col>`, `<colgroup>` (en-US), `<hr>`, `<iframe>` (en-US), `<img>`, `<table>` (en-US), `<tbody>` (en-US), `<td>`, `<tfoot>` , `<th>` (en-US), `<thead>` (en-US), `<tr>` (en-US) | Задаёт горизонтальное выравнивание элемента. |
| `alt` | `<applet>`, `<area>`, `<img>`, `<input>` | Альтернативный текст, в случае, если изображение не может быть отображено. |
| `async` | `<script>` | Указывает, что скрипт должен быть выполнен асинхронно. |
| `autocomplete` | `<form>`, `<input>` | Показывает, могут ли управляющие элементы в форме по умолчанию иметь собственные значения для автодополнения в форме. |
| `autofocus` | `<button>`, `<input>`, `<select>`, `<textarea>` (en-US) | На этом элементе следует автоматически сфокусироваться после загрузки страницы. |
| `autoplay` | `<audio>`, `<video>` | Аудио и видео нужно воспроизвести как можно скорее. |
| `autosave` | `<input>` | Предыдущее значения следует сохранить в выпадающем списке при загрузки страницы. |
| `bgcolor` | `<body>`, `<col>`, `<colgroup>` (en-US), `<marquee>`, `<table>` (en-US), `<tbody>` (en-US), `<tfoot>`, `<td>`, `<th>` (en-US), `<tr>` (en-US) | Цвет фона элемента.Примечание: это устаревший атрибут. Используйте свойство CSS `background-color`. |

Содержимое в сравнении с IDL атрибутами
---------------------------------------

В HTML, большинство атрибутов имеют две грани: **атрибут содержимого** и **IDL атрибут**.

Атрибут содержимого — это атрибут как вы его устанавливаете из содержимого (HTML-код), и его можно устанавливать или получать с помощью `element.setAttribute()` или `element.getAttribute()`. Атрибут содержимого всегда строка, даже когда ожидаемое значение должно быть число. Например, для того чтобы установить `maxlength` элемента `<input>` в 42 используя атрибут содержимого, вам нужно вызвать `setAttribute("maxlength", "42")` на этом элементе.

IDL-атрибут также известен как свойство JavaScript. Это атрибуты, которые вы можете читать или устанавливать используя JavaScript-свойства наподобие `element.foo`. IDL-атрибут всегда собирается использовать (но может преобразовать) основной атрибут содержимого для возврата, когда вы получаете его и сохраняет в атрибут содержимого, когда вы устанавливаете его. Другими словами, IDL-атрибуты, в сущности, отражают атрибуты содержимого.

Большую часть времени, IDL атрибуты возвращают их значения такими, какими они используются. Например, по умолчанию `type` для элементов `<input>` — "text", поэтому если вы установите `input.type="foobar"`, элемент `<input>` будет иметь тип text (по виду и по поведению) но значение атрибута содержимого "type" будет "foobar". Однако, IDL-атрибут `type` возвратит строку "text".

IDL-атрибуты не всегда строки; например, `input.maxlength` число (long со знаком). Когда используете IDL атрибуты, вы читаете или устанавливаете значения желаемого типа, поэтому `input.maxlength` всегда намеревается вернуть число и когда вы устанавливаете `input.maxlength`, это требует число. Если вы передадите другой тип, это автоматически конвертируется в число, по стандартным правилам преобразования типов в JavaScript.

IDL атрибуты могут отображать другие типы такие как unsigned long, URLs, booleans, и т.д. К несчастью нет ясных правил и способа, чтобы IDL атрибуты работали в связке с их соответствующими атрибутами содержимого в зависимости от атрибута. Большую часть времени, будет следовать правилам из спецификации, но иногда нет. HTML спецификации пытаются сделать это как можно дружелюбнее для разработчиков, но по различным причинам (по большинству историческим), некоторые атрибуты работают странно (`select.size`, например) и вам следует прочитать спецификацию для точного понимания того, как они работают.

Смотрите также
--------------

* HTML-элементы


style - HTML

style
=====

Глобальный атрибут **стиля** содержит объявления стилей CSS, которые могут применяться к элементу. Обратите внимание: рекомендуется, чтобы стили были определены в отдельном файле или файлах. Этот атрибут и элемент `<style>` имеют в основном назначение для быстрого добавления стиля, например, для целей тестирования.

**Примечание:** этот атрибут не должен использоваться для передачи семантической информации. Даже если весь стиль удаляется, страница должна оставаться семантически корректной. Обычно он не должен использоваться для скрытия несущественной информации; это должно быть сделано с использованием `скрытого` (en-US) атрибута.

Спецификации
------------

| Specification |
| --- |
| HTML Standard # the-style-attribute |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Все глобальные атрибуты.


class - HTML

class
=====

Глобальный атрибут **`class`** это разделённый пробелом список регистров зависимых классов элемента. Классы позволяют CSS и Javascript выбирать и получать доступ с помощью селекторов класса или функций, таких как методы DOM `document.getElementsByClassName`.

Интерактивный пример
--------------------

Хотя спецификация не предъявляет требований к именам классов, веб-разработчикам рекомендуется использовать имена, описывающие семантическое назначение элемента, а не представление элемента. Например, *атрибут* описывает атрибут, а не *курсив*, хотя элемент этого класса может быть представлен *курсивом*. Семантические имена остаются логичными даже при изменении представления страницы.

Спецификация
------------

| Specification |
| --- |
| HTML Standard # global-attributes:classes-2 |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотреть также
--------------

* Все глобальные атрибуты.


contenteditable - HTML

contenteditable
===============

 (Mozilla / 5.0 (Windows NT 6.3, WOW64; rv: 29.0) Gecko / 20100101 Firefox / 29.0)
 Атрибут **`contenteditable`** global attribute - это перечисляемый атрибут, указывающий, должен ли элемент редактироваться пользователем. Если это так, браузер изменит свой виджет, чтобы разрешить редактирование. Атрибут должен принимать одно из следующих значений:

* true или *пустую строку*, которое показывает, что элемент должен быть редактируемым;
* false, которое показывает, что элемент должен быть нередактируемым.

Если атрибут не указан, то его значение *наследуется* от своего родительского элемента.

Этот атрибут *принимает одно из определённых значений* и не является *булевским*. Это значит, что точное использование одного из значений `true, false` или пустая строка обязательно и такое сокращение, как `<label contenteditable>Пример метки</label>` неразрешено. Верное использование — `<label contenteditable="true">Пример метки</label>`.

 Вы можете установить цвет, используемый для вставки текста caret (en-US)
 со свойством CSS `caret-color` (en-US).

Спецификации
------------

| Specification |
| --- |
| HTML Standard # attr-contenteditable |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Создание контента для редактирования (en-US)
* Все глобальные атрибуты
* `HTMLElement.contentEditable` и `HTMLElement.isContentEditable` (en-US)


tabindex - HTML

tabindex
========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2018.

* Learn more
* See full compatibility
* Report feedback

**Примечание:** Максимальное значение для tabindex не должно превышать 32767 (W3C 17.11.1)

Глобальный атрибут **tabindex** - целое число, определяющее должен ли данный элемент участвовать в последовательной навигации по всей странице с помощью клавиатуры, в каком порядке. Содержит одно из нескольких видов значений:

* если представлено *отрицательное значение* – элемент может быть выделен, однако не участвует в последовательной навигации;
* если представлен **0** – элемент может быть выделен и достигнут с помощью последовательной навигации, однако порядок навигации определён платформой;
* если представлено *положительное целое значение* – элемент будет достигнут (и выделен) с помощью последовательной навигации, а порядок навигации определён этим самым значением. В случае, если несколько элементов содержат одно и то же значение **tabindex**, их порядок навигации определён относительным расположением в документе (DOM).

Элементы со значением 0, некорректным значением, или элементы с отсутствующим значением **tabindex** должны быть расположены после элементов с положительным целым числом.

Для более полного объяснения навигации смотри данную статью (en-US).

Спецификации
------------

| Specification |
| --- |
| HTML Standard # attr-tabindex |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Все глобальные атрибуты.
* `HTMLElement.tabindex` (en-US) отражает этот атрибут.
* Проблемы доступности (юзабилити): смотри Don't Use Tabindex Greater than 0 | Adrian Roselli.


data-* - HTML

data-\*
=======

The **data-\*** Глобальные атрибуты образуют класс атрибутов, называемых пользовательскими атрибутами данных, которые позволяют обмениваться проприетарной информацией между HTML и его представлением DOM посредством сценариев.

Интерактивный пример
--------------------

 Все такие пользовательские данные доступны через интерфейс `HTMLElement` элемента, для которого установлен атрибут. Свойство `HTMLElement.dataset` (en-US) предоставляет к ним доступ.
 Символ \* может быть заменён любым именем, соответствующим производственному правилу имён xml, со следующими ограничениями:

* имя не должно начинаться с xml, в любом случае для этих букв используется регистр;
* имя не должно содержать точку с запятой (U + 003A);
* имя не должно содержать заглавных букв.

Обратите внимание, что свойство `HTMLElement.dataset` (en-US) является `DOMStringMap`, и имя настраиваемого атрибута данных data-test-value будет доступно через HTMLElement.dataset. testValue (или HTMLElement.dataset ["testValue"]), поскольку любая тире (U + 002D) заменяется заглавной буквой следующей буквы, преобразуя имя в camelcase.

### Использование

Добавляя атрибуты data- \*, даже обычные элементы HTML могут стать довольно сложными и мощными программными объектами. Например, «спрайт» космического корабля в игре может быть простым элементом `<img>` с атрибутом класса и несколькими атрибутами data- \*:

```html
<img class="spaceship cruiserX3" src="shipX3.png"
 data-ship-id="324" data-weapons="laserI laserII" data-shields="72%"
 data-x="414354" data-y="85160" data-z="31940"
 onclick="spaceships[this.dataset.shipId].blasted()">
</img>
```

Более подробное руководство по использованию атрибутов данных HTML см. В разделе Using data attributes.

Specifications
--------------

| Specification |
| --- |
| HTML Standard # attr-data-\* |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* All global attributes.
* The `HTMLElement.dataset` (en-US) property that allows to access and modify these values.
* Using data attributes


itemid - HTML

itemid
======

Глобальный атрибут **`itemid`** предоставляет микроданные в форме уникального глобального идентификатора элемента. Атрибут `itemid` может быть указан только для элемента, который имеет оба атрибута `itemscope` и `itemtype`. Также, `itemid` может быть указан только для элементов, обладающих атрибутом `itemscope`, соответствующий ссылке `itemtype` или определяющий словарь, поддерживающий глобальные идентификаторы.

Точное значение глобального идентификатора `itemtype` обеспечивается определением этого идентификатора в пределах указанного словаря. Словарь определяет, могут ли сосуществовать несколько элементов с одним и тем же глобальным идентификатором, и, если да, то как обрабатываются элементы с одним и тем же идентификатором.

**Примечание:** Определение Whatwg.org указывает, что `itemid` должен быть URL. Однако, следующий пример правильно иллюстрирует, что URN, также может быть использован. Это несоответствие может отражать неполную природу спецификации микроданных.

Пример
------

### HTML

```html
<dl
 itemscope
 itemtype="http://vocab.example.net/book"
 itemid="urn:isbn:0-330-34032-8">
  <dt>Title</dt>
  <dd itemprop="title">The Reality Dysfunction</dd>
  <dt>Author</dt>
  <dd itemprop="author">Peter F. Hamilton</dd>
  <dt>Publication date</dt>
  <dd><time itemprop="pubdate" datetime="1996-01-26">26 January 1996</time></dd>
</dl>
```

### Структура данных

|  |  |  |
| --- | --- | --- |
| itemscope | itemtype: itemid | http://vocab.example.net/book: urn:isbn:0-330-34032-8 |
| itemprop | title | The Reality Dysfunction |
| itemprop | author | Peter F. Hamilton |
| itemprop | pubdate | 1996-01-26 |

### Результат

Спецификации
------------

| Specification |
| --- |
| HTML Standard # attr-itemid |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Другие различные глобальные атрибуты
* Другие глобальные атрибуты, связанные с микроданными
    + `itemprop`
    + `itemref`
    + `itemscope`
    + `itemtype`


id - HTML

id
==

**Глобальный атрибут (en-US) `id`** устанавливает элементу уникальный идентификатор (ID), имя которого должно быть уникальным в документе (на странице). Его назначением является идентификация элемента при связывании (использование идентификатора фрагмента), скриптинге или стилизации (с помощью CSS).

Интерактивный пример
--------------------

Значение этого атрибута "непрозрачная" строка: это означает, что веб-автор не должен использовать его для передачи какой-либо информации. Особое значение, например семантическое, получать из этой строки не надо.

Значение `id` не должно содержать пропусков (пробелов, табуляции и т.д). Браузеры обрабатывают пробелы, как часть уникального идентификатора. В отличии от атрибута `class`, который позволяет разделять пробелами значение (указывать несколько классов через пробел), элементы могут иметь только один ID.

**Примечание:** Использование символов отличных от ASCII букв, цифр, `'_'`, `'-'` и `'.'` может вызвать проблемы, связанные с совместимостью, т.к. они не были разрешены в HTML 4. Несмотря на то, что в HTML5 ограничение было снято, для совместимости ID должен начинаться с латинской буквы.

Спецификации
------------

| Specification |
| --- |
| HTML Standard # global-attributes:the-id-attribute-2 |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Все глобальные атрибуты.
* `Element.id` отражает этот атрибут.


lang - HTML

lang
====

Глобальный атрибут `lang` помогает определить язык элемента: язык, на котором написаны нередактируемые элементы, или язык, на котором пользователем должны быть написаны редактируемые элементы. Атрибут содержит единственный "языковой тег" (`language tag`) в формате, определённом в *Tags for Identifying Languages (BCP47).*

Интерактивный пример
--------------------

Если значение атрибута — *пустая строка* (`lang=""`), язык устанавливается, как *неизвестный*. Если тег языка недействителен согласно BCP47, он устанавливается, как *недействительный*.

**Примечание:** ## Синтаксис языкового тегаПодробный синтаксис BCP47 достаточно подробен, чтобы отмечать специфичные языковые диалекты, но в большинстве случаев его использование намного проще.Языковой тег состоит из *языковых вложенных тегов*, разделённых дефисом, где каждый вложенный тег указывает на определённое свойство языка. 3 наиболее распространённых вложенных тега:

Языковой подтег

Обязателен. Двух-или-трёх-символьный код, определяющий базовый язык, обычно записываемый в нижнем регистре. К примеру, код английского языка является `en`, а для Бадеши — `bdz`.

Подтег скрипта

Необязателен. Данный подтег определяет систему записи, и всегда состоящий из 4 символов с первой заглавной буквой. К примеру, французский язык Брайля — это `fr-Brai`, а `ja-Kana` — это японский язык, написанный с использованием алфавита Катакана (Katakana). Если язык написан типичным способом, например, английский с латинским алфавитом, нет необходимости использовать данный подтег.

Подтег региона

Необязателен. Данный подтег определяет диалект основного языка из определённого места и состоит из двух букв в ALLCAPS, соответствующих коду страны, или трёх цифр, соответствующих региону, который не относится к стране. К примеру, `es-ES` — это испанский язык, на котором разговаривают в Испании, а `es-013` означает испанский язык, на котором разговаривают в Центральной Америке. "Международный испанский" было бы просто `es`.Подтег скрипта предшествует подтегу региона, если присутствуют оба тега — `ru-Cyrl-BY` — это русский язык, написанный кириллицей, на котором разговаривают в Беларуси.Чтобы найти правильный подтег кода языка, используйте the Language Subtag Lookup.

Даже если указан атрибут **lang**, то он может не учитываться, поскольку атрибут \*\*xml:lang \*\*имеет приоритет над **lang**.

Для псевдокласса CSS `:lang`, два недопустимых названия языка будут разными, если их имена различны. Хотя, `:lang(es)` соответствует обоим `lang="es-ES"` и `lang="es-419"`, но `:lang(xyzzy)` не соответствует `lang="xyzzy-Zorp!"`.

Спецификации
------------

| Specification |
| --- |
| HTML Standard # attr-lang |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Все глобальные атрибуты.
* `Content-Language` HTTP Header


is - HTML

is
==

Глобальный атрибут **`is`** позволяет указать, что стандартный HTML-элемент должен вести себя как определённый пользовательский встроенный элемент (см Using custom elements для информации).

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

Примеры
-------

Следующий код взят из нашего примеры word-count-web-component (см. в живую).

```js
// Создание класса для элемента
class WordCount extends HTMLParagraphElement {
  constructor() {
    // Всегда вызывайте super первым в конструкторе
    super();

    // Содержимое конструктора опущено для краткости
    ...

  }
}

// Определение нового элемента
customElements.define('word-count', WordCount, { extends: 'p' });
```

```html
<p is="word-count"></p>
```

Спецификации
------------

| Specification |
| --- |
| HTML Standard # attr-is |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* All global attributes.


accesskey - HTML

accesskey
=========

Глобальный атрибут **accesskey** даёт возможность быстро перейти к элементу с помощью комбинации клавиш. Значение атрибута состоит из одного печатного символа (в том числе спец. символы, акценты и другие, которые можно написать с клавиатуры).

Интерактивный пример
--------------------

**Примечание:** Спецификация WHATWG допускает использования нескольких символов разделённых пробелом. Однако, на момент написания, эта функциональность не поддерживается в современных браузерах. IE и Edge в таком случае будет использовать первый символ, игнорируя остальные.

Активация элементов с помощью Accesskey зависит от браузера и платформы:

|  | Windows | Linux | macOS |
| --- | --- | --- | --- |
| Firefox | `Alt`+ `Shift`+`*key*` |
 В Firefox 57 и новее: `Control` + `Option` +
 `*key*` -OR- `Control` + `Alt` +
 `*key*`В Firefox 14 и новее: `Control`+ `Alt`+
 `*key*`В Firefox 13 и старше, `Control`+`*key*` |
| Internet Explorer | `Alt` + `*key*` | N / A |
| Google Chrome | `Alt` + `*key*` | `Control`+ `Alt`+`*key*` |
| Safari | `Alt` + `*key*` | N / A | `Control`+ `Alt`+`*key*` |
| Opera 15+ | `Alt` + `*key*` | `Control`+ `Alt`+`*key*` |
| Opera 12 | `Shift`+ `Esc` показывает список элементов, доступных
 для быстрого перехода. Перейти на нужный элемент можно нажав
 соответствующий символ (`*key*`)
  |
|

Обратите внимание, что в Firefox пользователь может настроить свой модификатор активации.

Проблемы с доступностью
-----------------------

В добавок к слабой поддержке браузерами всех возможностей в спецификации, у атрибута `accesskey` есть проблемы с доступностью:

* Значение атрибута `accesskey` может конфликтовать с комбинациями клавиш системы, браузера или вспомогательными инструментами доступности.
* Определённые значения атрибута `accesskey` могут отсутствовать на некоторых клавиатурах. Это особенно сильно проявляется, если вы используете язык отличный от английского.
* Числовые значения атрибута могут `accesskey` затруднить работу с сайтом для людей с расстройствами мышления. Например, когда числовые значения не имеют логической связи со связанным элементом.
* Не существует стандартизированного способа информировать пользователя о наличии атрибута `accesskey` на элементе. Неинформированный пользователь может случайно активировать элемент с атрибутом `accesskey`.

Ввиду этих причин рекомендуется не использовать атрибут `accesskey` для обычных сайтов и веб-приложений.

* WebAIM: Keyboard Accessibility - Accesskey
Спецификации
------------

| Specification |
| --- |
| HTML Standard # the-accesskey-attribute |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `Element.accessKey`
* `HTMLElement.accessKeyLabel` (en-US)
* Все глобальные атрибуты .