<embed>: Вложение расширенных элементов - HTML

<embed>: Вложение расширенных элементов
=======================================

\*\*HTML-элемент `<embed>` \*\*вставляет расширенный контент в выбранное место документа. Этот контент может быть представлен от внешнего приложения или другого источника интерактивного контента, такого как плагин для браузера, например.

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

**Примечание:** Этот раздел посвящён только элементу, который является частью стандарта HTML5, и никак не касается ранних, нестандартизированных его реализаций.

Имейте ввиду, что большинство современных браузеров посчитали устаревшей и удалили поддержку встраивания плагинов, так что использование `<embed>`, как правило, не рекомендуется, если вы хотите, чтобы ваш сайт одинаково работал у всех его пользователей.

| Категории контента | Flow content (en-US), phrasing content (en-US), embedded content, interactive content, palpable content. |
| --- | --- |
| Допустимое содержимое | Отсутствует, это empty element. |
| Пропуск тегов | Должен иметь открывающий тег, закрывающий тег должен быть пропущен |
| Допустимые родители | Любой элемент, который допускает встроенный контент |
| Допустимые ARIA-роли | `application (en-US)`, `document (en-US)`, `img (en-US)`, `presentation (en-US)` |
| DOM-интерфейс | `HTMLEmbedElement` (en-US) |

Атрибуты
--------

Атрибуты этого элемента включают все глобальные атрибуты.

`height`

Отображает высоту ресурса в CSS пикселях. Это должно быть абсолютное значение; проценты *не* допустимы.

`src`

Ссылка на встраиваемый ресурс.

`type`

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

`width`

Отображает ширину ресурса в CSS пикселях. Это должно быть абсолютное значение; проценты *не* допустимы.

Примечание
----------

Вы можете использовать свойство `object-position`, чтобы настроить расположение встроенного объекта в рамке элемента, а также свойство `object-fit`, чтобы контролировать регулирование размер объекта в соответствии с рамкой.

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

```html
<embed type="video/quicktime" src="movie.mov" width="640" height="480" />
```

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

| Specification |
| --- |
| HTML Standard # the-embed-element |

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

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

**Примечание:** До версии 45, Firefox не отображает содержимое HTML-ресурса, но сообщает о том, что для отображения контента требуется плагин (см. Firefox bug 730768).

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

* Другие элементы, используемые для встраивания различного рода контента: `<audio>`, `<canvas>`, `<iframe>` (en-US), `<img>`, `<math>`, `<object>` (en-US), `<svg>`, and `<video>`.
* Свойства, для позиционирования и определения размера внедрённого контента в его фрейме: `object-position` and `object-fit`


<button> - элемент кнопки - HTML

<button> - элемент кнопки
=========================

Описание
--------

**HTML-элемент *`<button>`*** создаёт кликабельную кнопку, которая может быть использована в формах или в любом другом месте документа, который требует простой, стандартной кнопки. По умолчанию, кнопки HTML обычно представлены в стиле, аналогичном стилю хост-платформы, на которой работает user agent, но вы можете изменить внешний вид кнопки, используя CSS.

| Категории контента | Общий поток (en-US), текстовый контент (en-US), интерактивный контент (en-US), listed (en-US), labelable (en-US), и submittable (en-US) form-associated (en-US) элемент, очевидный контент. |
| --- | --- |
| Допустимое содержимое | Текстовый контент (en-US). |
| Пропуск тегов | Нет, открывающий и закрывающий теги обязательны. |
| Допустимые родители | Любой элемент с поддержкой текстового контента (en-US). |
| Допустимые ARIA-роли | `checkbox`, `link (en-US)`, `menuitem (en-US)`, `menuitemcheckbox (en-US)`, `menuitemradio (en-US)`, `radio (en-US)`, `switch (en-US)`, `tab (en-US)` |
| DOM-интерфейс | `HTMLButtonElement` |

Атрибуты
--------

Элемент поддерживает глобальные атрибуты (en-US).

`autofocus`

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

`autocomplete`
Non-standard

Использование данного атрибута на элементе `<button>` не описано в стандарте и используется только в Firefox браузере. По умолчанию, в отличие от прочих браузеров, Firefox сохраняет назначенное динамически отключённое состояние для элемента `<button>` при последующих загрузках страницы. Установка для данного атрибута значения `off` отключает подобное поведение. Смотрите Firefox bug 654072.

`disabled`

Булевый атрибут, указывающий, что пользователь не может взаимодействовать с кнопкой. Если атрибут не установлен, то кнопка наследует его от элемента-контейнера, в котором она расположена, например от `<fieldset>`; если отсутствует элемент-контейнер, с установленным атрибутом **disabled**, то кнопка доступна для взаимодействия.Firefox по умолчанию, в отличие от прочих браузеров, сохраняет назначенное динамически отключённое состояние для элемента `<button>`, даже при обновлении страницы. Чтобы изменить поведение браузера в этом случае, используйте атрибут `autocomplete`.

`form`

Атрибут **form** позволяет указать элемент `<form>`, с которым связана кнопка. Данный атрибут должен хранить значение **id** элемента `<form>`. Если данный атрибут не установлен, то элемент `<button>` будет связан с родительским элементом `<form>`, если последний существует.Атрибут работает независимо от расположения элементов в документе, поэтому он позволяет связать элемент `<button>` с формой, даже в случае, если `<button>` не является наследником элемента `<form>`.

`formaction`

Ссылка на обработчик формы. Если атрибут определён — он переопределит атрибут `action` у формы-родителя.

`formenctype`

Если `button` имеет тип `submit`, то этот атрибут определяет тип контента, отправляемого на сервер. Возможные значения данного атрибута:

* `application/x-www-form-urlencoded`: значение по умолчанию, если атрибут не указан.
* `multipart/form-data`: следует использовать это значение, если форма содержит элемент `<input>` со значением атрибута `type` `file`.
* `text/plain` Если этот атрибут определён, он переопределяет атрибут `enctype` у формы-родителя.

`formmethod`

Если `button` имеет тип `submit`, то этот атрибут определяет метод HTTP-запроса для отправки данных на сервер. Возможные варианты:

* `post`: данные формы включаются в тело сообщения и отправляются на сервер.
* `get`: данные формы отправляются на сервер в виде ссылки, состоящей из URI атрибута `action` и непосредственно данных, отделённых знаком '?'. Данные формы будут иметь вид ключ/значение и разделены амперсандом, например name=Name&id=35. Следует использовать этот метод только если нет побочных эффектов и данные формы содержат лишь ASCII-символы.Если этот атрибут определён, он переопределяет атрибут `method` у формы-родителя.

`formnovalidate`

Булевый атрибут. Указывает, что данные формы не будут валидироваться при отправке.Если этот атрибут определён, он переопределяет атрибут `novalidate` у формы-родителя.

`formtarget`

Если `button` имеет тип `submit`, этот атрибут является именем или ключевым словом,указывающим, где отображать ответ, полученный после отправки формы. This is a name of, or keyword for, a *browsing context* (for example, tab, window, or inline frame). If this attribute is specified, it overrides the `target` attribute of the button's form owner. The following keywords have special meanings:

* `_self`: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.
* `_blank`: Load the response into a new unnamed browsing context.
* `_parent`: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as `_self`.
* `_top`: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as `_self`.

`name`

Название кнопки, которая отправляется вместе с данными формы.

`type`

Устанавливает тип кнопки. Достпуные значения:

* `submit`: Кнопка отправляет данные формы на сервер. Это значение по умолчанию, если атрибут не указан или если атрибут динамически изменен на пустое или недопустимое значение.
* `reset`: Кнопка сбрасывает все элементы управления к их начальным значениям. Удаляет данные, введенные в форму.
* `button`: Кнопка не имеет поведения по умолчанию. При этом на странице могут быть скрипты, активируемые при возникновении определённых событий на кнопке.
* `menu`: Кнопка открывает всплывающее меню, определяемое с помощью соответствующего `<menu>` элемента.

`value`

Начальное значение кнопки.

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

```html
<button name="button">Тык!</button>
```

### Clicking and focus

Whether clicking on a `<button>` causes it to (by default) become focused varies by browser and OS. The results for `<input>` of `type="button"` and `type="submit"` are the same.

| Desktop Browsers | Windows 8.1 | OS X 10.X |
| --- | --- | --- |
| Firefox | Yes - Firefox 30.0 | No (even with a `tabindex`) Firefox 63 |
| Chrome | Yes - Chrome 35 | Yes - Chrome 65 |
| Safari | N/A | No (even with a `tabindex`) Safari 12 (bug 22261) |
| Internet Explorer | Yes - Internet Explorer 11 | N/A |
| Presto | Yes - Opera 12 | Yes - Opera 12 |

| Mobile Browsers | iOS 7.1.2 | Android 4.4.4 |
| --- | --- | --- |
| Safari Mobile | No (even with a `tabindex`) | N/A |
| Chrome 35 | No (even with a `tabindex`) | Yes |

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

| Specification |
| --- |
| HTML Standard # the-button-element |

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

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


<bdo>: Элемент переопределения направления текста - HTML

<bdo>: Элемент переопределения направления текста
=================================================

**HTML - элемент переопределения двунаправленного текста** (**`<bdo>`**) переопределяет текущее направление текста так, что текст внутри отображается в другом направлении.

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

Текстовые символы рисуются от заданной точки в указанном направлении; индивидуальная ориентация символов не меняется (к примеру, символы не зеркалятся).

| Категории контента (en-US) | Потоковый контент (en-US), фразовый контент (en-US), palpable content. |
| --- | --- |
| Допустимый контент | Фразовый контент (en-US). |
| Закрывающий тег | Нет, открывающий и закрывающий теги обязательны. |
| Допустимые родители | Все элементы, принимающие фразовый контент (en-US), |
| Допустимые ARIA-роли | Любые |
| DOM-интерфейс | `HTMLElement` до Gecko 1.9.2 (Firefox 4) включительно, Firefox реализует интерфейс `HTMLSpanElement` (en-US) для этого элемента. |

Атрибуты
--------

Этот элемент поддерживает глобальные атрибуты (en-US).

`dir`

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

* `ltr`: Указывает, что текст должен идти слева направо.
* `rtl`: Указывает, что текст должен идти справа налево.

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

```html
<!-- Переключение направления текста -->
<p>This text will go left to right.</p>
<p><bdo dir="rtl">This text will go right to left.</bdo></p>
```

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

Примечания
----------

Спецификация HTML 4 не указывала события для этого элемента; они были добавлены в XHTML.

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

| Specification |
| --- |
| HTML Standard # the-bdo-element |

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

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


<kbd>: Элемент ввода с клавиатуры - HTML

<kbd>: Элемент ввода с клавиатуры
=================================

**HTML-элемент ввода с клавиатуры** (**`<kbd>`**) указывает на то, что текст внутри элемента описывает пользовательский ввод с клавиатуры, голосовой ввод или ввод с использованием любого другого типа устройств ввода текста. По общему соглашению, user agent использует моноширинный шрифт для отображения содержимого элемента `<kbd>` по умолчанию, хотя это и не указывается HTML стандартом явно.

`<kbd>` можно использовать в различных комбинациях с `<samp>` (en-US) (Sample Output) элементом для отображения различных форм ввода с клавиатуры или ввода, базирующегося на визуальных сигналах.

| Content categories (en-US) | Flow content (en-US), phrasing content (en-US), palpable content. |
| --- | --- |
| Permitted content | Phrasing content (en-US). |
| Tag omission | Нет, открывающий и закрывающий теги обязательны. |
| Permitted parents | Any element that accepts phrasing content (en-US). |
| Permitted ARIA roles | Any |
| DOM interface | `HTMLElement` |

Атрибуты
--------

Этот элемент использует только глобальные атрибуты (en-US).

Usage notes
-----------

Other elements can be used in tandem with `<kbd>` to represent more specific scenarios:

* Nesting a `<kbd>` element within another `<kbd>` element represents an actual key or other unit of input as a portion of a larger input. See Representing keystrokes within an input below.
* Nesting a `<kbd>` element inside a `<samp>` (en-US) element represents input that has been echoed back to the user by the system. See Echoed input, below, for an example.
* Nesting a `<samp>` element inside a `<kbd>` element, on the other hand, represents input which is based on text presented by the system, such as the names of menus and menu items, or the names of buttons displayed on the screen. See the example under Representing onscreen input options below.

**Примечание:** You can define a custom style to override the browser's default font selection for the `<kbd>` element, although the user's preferences may potentially override your CSS.

Examples
--------

### Basic example

```html
<p>
  Use the command <kbd>help mycommand</kbd> to view documentation for the
  command "mycommand".
</p>
```

#### Result

### Representing keystrokes within an input

To describe an input comprised of multiple keystrokes, you can nest multiple `<kbd>` elements, with an outer `<kbd>` element representing the overall input and each individual keystroke or component of the input enclosed within its own `<kbd>`.

#### Unstyled

First, let's look at what this looks like as just plain HTML.

##### HTML

```html
<p>
  You can also create a new document using the keyboard shortcut
  <kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd
 >.
</p>
```

This wraps the entire key sequence in an outer `<kbd>` element, then each individual key within its own, in order to denote the components of the sequence.

##### Result

The output looks like this without a style sheet applied:

#### With custom styles

We can make more sense of this by adding some CSS:

##### CSS

We add new new style for `<kbd>` elements, `"key"`, which we can apply when rendering keyboard keys:

```css
kbd.key {
  border-radius: 3px;
  padding: 1px 2px 0;
  border: 1px solid black;
}
```

##### HTML

Then we update the HTML to use this class on the keys in the output to be presented:

```html
<p>
  You can also create a new document by pressing
  <kbd><kbd class="key">Ctrl</kbd>+<kbd class="key">N</kbd></kbd
 >.
</p>
```

##### Result

The result is just what we want!

### Echoed input

Nesting a `<kbd>` element inside a `<samp>` (en-US) element represents input that has been echoed back to the user by the system.

```html
<p>
  If a syntax error occurs, the tool will output the initial command you typed
  for your review:
</p>
<blockquote>
  <samp><kbd>custom-git ad my-new-file.cpp</kbd></samp>
</blockquote>
```

The result looks like this:

### Representing onscreen input options

Nesting a `<samp>` element inside a `<kbd>` element represents input which is based on text presented by the system, such as the names of menus and menu items, or the names of buttons displayed on the screen.

For example, you can explain how to choose the "New Document" option in the "File" menu using HTML that looks like this:

```html
<p>
  To create a new file, choose the menu option
  <kbd
 ><kbd><samp>File</samp></kbd
 >⇒<kbd><samp>New Document</samp></kbd></kbd
 >.
</p>

<p>
  Don't forget to click the <kbd><samp>OK</samp></kbd> button to confirm once
  you've entered the name of the new file.
</p>
```

This does some interesting nesting. For the menu option description, the entire input is enclosed in a `<kbd>` element. Then, inside that, both the menu and menu item names are contained within both `<kbd>` and `<samp>`, indicating an input which is selected from a screen widget.

Similarly, the representation of the keyboard shortcut is done by enclosing the entire keyboard shortcut text inside `<kbd>`, but by also wrapping each key in its own `<kbd>` element.

You don't need to do all this wrapping; you can choose to simplify it by leaving out the external `<kbd>` element. In other words, simplifying this to just `<kbd>Ctrl</kbd>+<kbd>N</kbd>` would be perfectly valid.

Depending on your style sheet , though, you may find it useful to do this kind of nesting.

The output from this HTML looks like this:

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

| Specification |
| --- |
| HTML Standard # the-kbd-element |

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

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

See also
--------

* `<code>`


<input> - HTML

<input>
=======

Описание
--------

**Элемент** **HTML `<input>`** используется для создания интерактивных элементов управления в веб-формах для получения данных от пользователя; в зависимости от устройства и user agent, доступен широкий выбор типов входных данных и виджетов управления. Из-за огромного количества возможных сочетаний типов ввода и атрибутов это один из самых мощных и сложных элементов HTML.

* *Content categories (en-US)* Flow content (en-US), listed, submittable, resettable, form-associated element, phrasing content (en-US).
 If the `type` has not the `hidden` value, labellable element, palpable content.
* *Permitted content* None, it is an empty element.
* *Tag omission* Must have a start tag and must not have an end tag.
* *Permitted parent elements* Any element that accepts phrasing content (en-US).
* *DOM interface* `HTMLInputElement` (en-US)
Атрибуты
--------

Этот элемент содержит глобальные атрибуты (en-US).

* Расширение файла, начинающееся с символа точки (U+002E). Наприм., '.jpg, .png, .doc)
* Валидный тип MIME без расширения
* `audio/*` для аудиофайлов
* `video/*` для видеофайлов
* `image/*` для файлов с изображениями

`type`

Тип элемента для отображения. Если этот атрибут не указан, по умолчанию используется `text`. Возможными значениями являются:

* `button`: Кнопка без предопределённого поведения.
* `checkbox`: Флажок («чекбокс»). Следует использовать атрибут **value** для определения значения, которое будет отдано этим элементом. Используйте атрибут **checked**, чтобы указать, должен ли флажок быть выставлен. Можно также использовать атрибут **indeterminate**, чтобы указать, что флажок находится в неопределённом состоянии (на большинстве платформ при этом рисуется горизонтальная линия поперёк флажка).
* `color`: Элемент управления цветом. Пользовательский интерфейс выбора цвета не имеет никаких других функций, кроме принятия простых цветов в виде текста (больше информации).
* `date`: Элемент управления для ввода даты (год, месяц и день, без времени).
* `datetime`: Элемент управления для ввода даты и времени (час, минута, секунда и доля секунды) в соответствии с часовым поясом UTC.
* `datetime-local`: Элемент управления для ввода даты и времени без часового пояса.
* `email`: Поле для редактирования адреса электронной почты. Перед отправкой проверяется, что входное значение содержит либо пустую строку, либо один действительный адрес электронной почты. Соответствуют CSS псевдоклассам `:valid` and `:invalid`.
* `file`: Элемент управления, который позволяет пользователю выбрать файл. Используйте атрибут **accept**, чтобы определить типы файлов, которые могут быть выбраны.
* `hidden`: Элемент управления, которые не отображается, но чьё значение отправлено на сервер.
* `image`: Кнопка вставки изображения. Вы должны использовать атрибут **src**, чтобы определить путь к изображению и атрибут **alt** - для определения альтернативного текста. Вы можете использовать атрибуты **height** и **width**, чтобы определить размер вставки изображения в пикселях.
* `month`: Элемент управления для ввода месяца и года без часового пояса.
* `number`: Элемент управления ввода числа(тип **float**).
* `password`: Однострочное текстовое поле, чьё значение скрыто символом "звёздочка". Используйте атрибуты **minlength** и **maxlength**, чтобы указать минимальную и максимальную длину значения, которое может быть введено.

**Примечание:** Любые формы, в которых присутствует важная информация(например, пароль), должны быть обработаны через HTTPS; в настоящий момент Firefox реализует составной механизм предупреждения, направленные против небезопасных форм для входа в систему - смотрите Небезопасные пароли (en-US).
* `radio`: Кнопка-переключатель, позволяет выбрать одно значение из множественного выбора.
* `range`: Элемент управления для ввода числа, точное значение которого не имеет значения. Этот тип управления использует следующие значения по умолчанию, если соответствующие атрибуты не указаны:
    + `min`: 0
    + `max`: 100
    + `value`: `min` + (`max`-`min`)/2, or `min` if `max` is less than `min`
    + `step`: 1
* `reset`: Кнопка сброса содержимого формы в состояние по умолчанию.
* `search`: Однострочное текстовое поле для ввода строк поиска; разрывы строк автоматически удаляются из входного значения.
* `submit`: Кнопка для отправления формы.
* `tel`: Элемент управления для ввода номера телефона; разрывы строк автоматически удаляются из входного значения, но никакой другой синтаксис не применяется. Можно использовать такие атрибуты как **pattern** и **maxlength**, чтобы ограничить вводимое значение.
 Псевдоклассы CSS `:valid` and `:invalid` применяются при необходимости..
* `text`: Однострочное текстовое поле. Переносы строк автоматически удаляются из входного значения.
* `time`: Элемент управления для ввода значения времени без часового пояса.
* `url`: Поле для редактирования URI. Введённое значение должно содержать либо пустую строку, либо допустимый абсолютный URL. В противном случае значение не будет принято. Переводы строк, лидирующие и завершающие пробельные символы будут автоматически удалены из введённого значения. Можно использовать такие атрибуты как **pattern** или **maxlength**, чтобы ограничить вводимые значения. Псевдоклассы CSS `:valid` and `:invalid` применяются при необходимости.
* `week`: Элемент управления для ввода даты, содержащей число неделя-год и номер недели без часового пояса.

`accept`

В случае, если значением атрибута **type** является `file`, данный атрибут определяет типы файлов, которые сервер может принять. В противном случае файл игнорируется. Значение должно быть списком уникальных спецификаторов типов содержания, разделённым запятыми:

`accesskey`

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

`mozactionhint`
Non-standard

Определяет "действие-подсказку", которая используется для определения того, как будет обозначаться клавиша enter на мобильных устройствах с виртуальной клавиатурой. Поддерживаемые значения: `go`, `done`, `next`, `search`, и `send`; они автоматически сопоставляются с необходимой строкой (являются чувствительными к регистру).

`autocomplete`

Этот атрибут указывает, разрешено ли автоматическое заполнение поля браузером. Разрешено по умолчанию, даже если не указано. Данный атрибут игнорируется, если атрибут **type** равен `hidden, password,` `checkbox`, `radio`, `file`, или **type** кнопка (`button`, `submit`, `reset`, `image`). Возможные значения:

* `off`: Пользователь должен каждый раз полностью вводить значение в поле или документ предусматривает свой собственный метод автозаполнения; браузер не делает автоматического заполнения записи.
* `on`: Браузер автоматически заканчивает значение поля, основываясь на значениях, которые вводились пользователем ранее.Если не атрибут **autocomplete** не указан в `<input>`, тогда браузер использует атрибут **autocomplete** формы, которая является родительской для данной формы. The form owner is either the `form` element that this `<input>` element is a descendant of or the form element whose **id** is specified by the **form** attribute of the input element. For more information, see the `autocomplete` attribute in `<form>`.

`autofocus`

This Boolean attribute lets you specify that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the **autofocus** attribute, which is a Boolean. It cannot be applied if the **type** attribute is set to `hidden` (that is, you cannot automatically set focus to a hidden control).

`autosave`

This attribute should be defined as a unique value. If the value of the type attribute is `search`, previous search term values will persist in the dropdown across page load.

`checked`

When the value of the **type** attribute is `radio` or `checkbox`, the presence of this Boolean attribute indicates that the control is selected by default; otherwise it is ignored.

`disabled`

This Boolean attribute indicates that the form control is not available for interaction. In particular, the `click` event will not be dispatched on disabled controls. Also, a disabled control's value isn't submitted with the form.

`form`

The form element that the input element is associated with (its *form owner*). The value of the attribute must be an **id** of a `<form>` element in the same document. If this attribute is not specified, this `<input>` element must be a descendant of a `<form>` element. This attribute enables you to place `<input>` elements anywhere within a document, not just as descendants of their form elements. An input can only be associated with one form.

`formaction`

The URI of a program that processes the information submitted by the input element, if it is a submit button or image. If specified, it overrides the `action` attribute of the element's form owner.

`formenctype`

If the input element is a submit button or image, this attribute specifies the type of content that is used to submit the form to the server. Possible values are:

* `application/x-www-form-urlencoded`: The default value if the attribute is not specified.
* `multipart/form-data`: Use this value if you are using an `<input>` element with the `type` attribute set to `file`.
* `text/plain` If this attribute is specified, it overrides the `enctype` attribute of the element's form owner.

`formmethod`

If the input element is a submit button or image, this attribute specifies the HTTP method that the browser uses to submit the form. Possible values are:

* `post`: The data from the form is included in the body of the form and is sent to the server.
* `get`: The data from the form are appended to the **form** attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.If specified, this attribute overrides the `method` attribute of the element's form owner.

`formnovalidate`

If the input element is a submit button or image, this Boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the `novalidate` attribute of the element's form owner.

`formtarget`

If the input element is a submit button or image, this attribute is a name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a *browsing context* (for example, tab, window, or inline frame). If this attribute is specified, it overrides the `target` attribute of the elements's form owner. The following keywords have special meanings:

* `_self`: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.
* `_blank`: Load the response into a new unnamed browsing context.
* `_parent`: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as `_self`.
* `_top`: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as `_self`.

`height`

If the value of the **type** attribute is `image`, this attribute defines the height of the image displayed for the button.

`inputmode`

A hint to the browser for which keyboard to display. This attribute applies when the value of the **type** attribute is text, password, email, or url. Possible values are:

* `verbatim`: Alphanumeric, non-prose content such as usernames and passwords.
* `latin`: Latin-script input in the user's preferred language with typing aids such as text prediction enabled. For human-to-computer communication such as search boxes.
* `latin-name`: As *latin*, but for human names.
* `latin-prose`: As *latin*, but with more aggressive typing aids. For human-to-human communication such as instant messaging for email.
* `full-width-latin`: As *latin-prose*, but for the user's secondary languages.
* `kana`: Kana or romaji input, typically hiragana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.
* `katakana`: Katakana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.
* `numeric`: Numeric input, including keys for the digits 0 to 9, the user's preferred thousands separator character, and the character for indicating negative numbers. Intended for numeric codes, e.g. credit card numbers. For actual numbers, prefer using <input type="number">
* `tel`: Telephone input, including asterisk and pound key. Use <input type="tel"> if possible instead.
* `email`: Email input. Use <input type="email"> if possible instead.
* `url`: URL input. Use <input type="url"> if possible instead.

`list`

В атрибуте указывает `id` элемента `<datalist>`, в котором находится список предопределённых значений для заполнения. Браузер отображает только те варианты, которые соответствуют введённым символами. Этот атрибут игнорируется, когда атрибут **type** принимает значения `hidden`, `checkbox`, `radio`, `file`, или **type** в качестве кнопки.

`max`

The maximum (numeric or date-time) value for this item, which must not be less than its minimum (**min** attribute) value.

`maxlength`

If the value of the **type** attribute is `text`, `email`,`search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters (in Unicode code points) that the user can enter; for other control types, it is ignored. It can exceed the value of the **size** attribute. If it is not specified, the user can enter an unlimited number of characters. Specifying a negative number results in the default behavior; that is, the user can enter an unlimited number of characters. The constraint is evaluated only when the value of the attribute has been changed.

`min`

The minimum (numeric or date-time) value for this item, which must not be greater than its maximum (**max** attribute) value.

`minlength`

If the value of the **type** attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters (in Unicode code points) that the user can enter; for other control types, it is ignored.

`multiple`

Этот Boolean атрибут указывает, может ли пользователь вводить несколько значений. Этот атрибут применяется, если для атрибута type задано значение `email` или `file`; в противном случае он игнорируется.

`name`

The name of the control, which is submitted with the form data.

`pattern`

A regular expression that the control's value is checked against. The pattern must match the entire value, not just some subset. Use the **title** attribute to describe the pattern to help the user. This attribute applies when the value of the **type** attribute is `text`, `search`, `tel`, `url` or `email`; otherwise it is ignored. The regular expression language is the same as JavaScript's. The pattern is not surrounded by forward slashes.

`placeholder`

A hint to the user of what can be entered in the control . The placeholder text must not contain carriage returns or line-feeds. This attribute applies when the value of the **type** attribute is `text`, `search`, `tel`, `url` or `email`; otherwise it is ignored.

**Примечание:** Do not use the `placeholder` attribute instead of a `<label>` element. Their purposes are different: the `<label>` attribute describes the role of the form element; that is, it indicates what kind of information is expected, the `placeholder` attribute is a hint about the format the content should take. There are cases in which the `placeholder` attribute is never displayed to the user, so the form must be understandable without it.

`readonly`

This Boolean attribute indicates that the user cannot modify the value of the control. This attribute is ignored if the value of the **type** attribute is `hidden`, `range`, `color`, `checkbox`, `radio`, `file`, or a button type.

`required`

This attribute specifies that the user must fill in a value before submitting a form. It cannot be used when the **type** attribute is `hidden`, `image`, or a button type (`submit`, `reset`, or `button`). The `:optional` and `:required` CSS pseudo-classes will be applied to the field as appropriate.

`selectionDirection`

The direction in which selection occurred. This is "forward" if the selection was made from left-to-right in an LTR locale or right-to-left in an RTL locale, or "backward" if the selection was made in the opposite direction. This can be "none" if the selection direction is unknown.

`size`

The initial size of the control. This value is in pixels unless the value of the **type** attribute is `text` or `password`, in which case, it is an integer number of characters. Starting in HTML5, this attribute applies only when the **type** attribute is set to `text`, `search`, `tel`, `url`, `email`, or `password`; otherwise it is ignored. In addition, the size must be greater than zero. If you don't specify a size, a default value of 20 is used.

`spellcheck`

Setting the value of this attribute to `true` indicates that the element needs to have its spelling and grammar checked. The value `default` indicates that the element is to act according to a default behavior, possibly based on the parent element's own `spellcheck` value. The value `false` indicates that the element should not be checked.

`src`

If the value of the **type** attribute is `image`, this attribute specifies a URI for the location of an image to display on the graphical submit button; otherwise it is ignored.

`step`

Works with the **min** and **max** attributes to limit the increments at which a numeric or date-time value can be set. It can be the string `any` or a positive floating point number. If this attribute is not set to `any`, the control accepts only values at multiples of the step value greater than the minimum.

`tabindex`

The position of the element in the tabbing navigation order for the current document.

`usemap`

The name of a `<map>` element to as an image map.

`value`

 The initial value of the control. This attribute is optional except when the value of the **type** attribute is `radio` or `checkbox`.
 Note that when reloading the page, Gecko and IE will ignore the value specified in the HTML source, if the value was changed before the reload.

`width`

If the value of the **type** attribute is `image`, this attribute defines the width of the image displayed for the button.

`x-moz-errormessage`
Non-standard

This Mozilla extension allows you to specify the error message to display when a field doesn't successfully validate.

Notes
-----

### File inputs

**Примечание:** Starting in Gecko 2.0, calling the `click()` method on an `<input>` element of type "file" opens the file picker and lets the user select files. See Using files from web applications for an example and more details.

You can't set the value of a file picker from a script; doing something like the following has no effect:

```js
var e = getElementById("someFileInputElement");
e.value = "foo";
```

### Error messages

If you want Firefox to present a custom error message when a field fails to validate, you can use the `x-moz-errormessage` attribute to do so:

```html
<input
 type="email"
 x-moz-errormessage="Please specify a valid email address." />
```

Note, however, that this is not standard and will not have an effect on other browsers.

Examples
--------

### A simple input box

```html
<!-- A basic input -->
<input type="text" name="input" value="Type here" />
```

### A common use-case scenario

```html
<!-- A common form that includes input tags -->
<form action="getform.php" method="get">
  First name: <input type="text" name="first\_name" /><br />
  Last name: <input type="text" name="last\_name" /><br />
  E-mail: <input type="email" name="user\_email" /><br />
  <input type="submit" value="Submit" />
</form>
```

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

| Specification |
| --- |
| HTML Standard # the-input-element |

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

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

[1] Распознаётся, но UI отсутствует.

[2] Отсутствует для `type="checkbox"` и `type="radio"`.

[3] В Safari `autocapitalize="words"` переводит в верхний регистр каждый второй символ слова.

[4] `datetime` был удалён из спецификации и браузеров в пользу `datetime-local`.

[5] См Firefox bug 1355389

[6] Ещё не имплементировано. Наблюдать: Firefox bug 888320 и TPE DOM/Date time input types.

### Gecko notes

Starting in Gecko 9.0, Firefox for Android lets users capture images using their camera and upload them, without having to leave the browser. Web developers can implement this feature by simply specifying setting the `accept` attribute's value to "image/\*" on their `file` input, like this:

`<input type="file" accept="image/*">`

Firefox for Android sets a default `background-image` gradient on all `type="text"`, `type="file"`, `type="button"`, and `type="submit"` inputs. This can be disabled using `background-image: none`.

Firefox for Android also sets a default `border` on all `<input type="file">` elements.

See also
--------

* Other form-related elements: `<form>`, `<button>`, `<datalist>`, `<legend>`, `<label>`, `<select>`, `<optgroup>`, `<option>`, `<textarea>` (en-US), `<fieldset>`, `<output>`, `<progress>` and `<meter>`.
* Cross-browser HTML5 placeholder text


<blockquote> - элемент цитаты - HTML

<blockquote> - элемент цитаты
=============================

Описание
--------

**HTML-элемент `<blockquote>`** (от англ. *Block Quotation*) указывает на то, что заключённый в нем текст является развёрнутой цитатой. Обычно он (текст) визуально выделяется наклонным (смотри Примечание (en-US), где говорится о том, как это изменить). URI на источник цитаты можно указать в атрибуте **cite**, тогда как текстовое представление источника может быть задано элементом `<cite>`.

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

| Категории контента | Основной контент, секционный корень, явный контент. |
| --- | --- |
| Допустимое содержимое | Основной контент. |
| Пропуск тегов | Нет, открывающий и закрывающий теги обязательны. |
| Допустимые родители | Любой элемент, который принимает основной контент. |
| Допустимые ARIA-роли | Любые |
| DOM-интерфейс | `HTMLQuoteElement` (en-US) |

Атрибуты
--------

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

`cite`

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

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

```html
<blockquote cite="http://developer.mozilla.org">
  <p>This is a quotation taken from the Mozilla Developer Center.</p>
</blockquote>
```

Результат:

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

| Specification |
| --- |
| HTML Standard # the-blockquote-element |

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

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

Примечание
----------

Чтобы изменить отступ элемента `<blockquote>`, используйте CSS - свойство `margin`.

Для коротких цитат используйте `элемент` `<q>` (en-US).

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

* Элемент `<q>` (en-US) для встроенных (строковых) цитат.
* Элемент `<cite>` для указания источника.


<area> - HTML

<area>
======

**HTML `<area>` элемент** определяет активную область на изображении и, при желании, связывает её с гипертекстовой ссылкой (en-US). Этот элемент используется только внутри элемента `<map>`.

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

| Категории содержимого (en-US) | Элементы потока, фразового контента. |
| --- | --- |
| Допустимое содержимое | Нет, это пустой элемент. |
| Пропуск тегов | Открывающий тег обязателен, закрывающего быть не должно. |
| Допустимые родители | Любой элемент, допускающий фразовый контент. У элемента `<area>` должен быть родитель `<map>`, но он не должен быть прямым родителем. |
| Допустимые ARIA-роли | Нет |
| DOM-интерфейс | `HTMLAreaElement` |

Атрибуты
--------

Этот элемент включает в себя только глобальные атрибуты.

`accesskey`

Specifies a keyboard navigation accelerator for the element. Pressing ALT or a similar key in association with the specified character selects the form control correlated with that key sequence. Page designers are forewarned to avoid key sequences already bound to browsers. This attribute is global since HTML5.

`alt`

С помощью этого атрибута задаётся альтернативный текст, описывающий изображение, если оно не доступно. Он должен быть сформулирован так, чтобы предоставить пользователю тот же выбор, что и изображение, которое отрисуется без альтернативного текста. В HTML4 данный атрибут обязателен, но так же может содержать и пустую строку (""). В HTML5 этот атрибут обязателен только при наличии атрибута **href**.

`coords`

Задаёт значения координат для активной области. Значение и количество значений зависят от значения указанного для атрибута **shape**. Для `rect` или прямоугольника задаются две пары значений x,y **coords**: лево, верх, право и низ. Для `circle`, значения `x,y,r` где `x,y` координаты центра круга, а `r` радиус. Для `poly` или многоугольника, значения задаются парой x и y для каждой вершины многоугольника: `x1,y1,x2,y2,x3,y3,` и т.д. В HTML4 значения задаются в пикселях или процентах, когда добавлен знак (%); в HTML5, значения — величины в пикселях.

`download`

Этот атрибут, если он добавлен, указывает, что ссылка используется для скачивания файла. Смотри `<a>` для полного описания атрибута `download`.

`href`

Ссылка для активной области. Это значение действующего URL. В HTML4, этот или **nohref** атрибут обязательный. В HTML5, данный атрибут можно пропустить при условии, что активная область не является ссылкой.

`hreflang`

Указывает язык связанного ресурса. Допустимые значения определяются BCP47. Используйте данный атрибут при наличии атрибута **href**.

`name`

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

`media`

A hint of the media for which the linked resource was designed, for example `print and screen`. If omitted, it defaults to `all`. Use this attribute only if the **href** attribute is present.

`nohref`

Indicates that no hyperlink exists for the associated area. Either this attribute or the **href** attribute must be present in the element.

**Примечание:** This attribute is obsolete in HTML5, instead omitting the **href** attribute is sufficient.

`referrerpolicy`
Экспериментальная возможность

A string indicating which referrer to use when fetching the resource:

* `"no-referrer"` meaning that the `Referer:` header will not be sent.
* "`no-referrer-when-downgrade`" meaning that no `Referer:` header will be sent when navigating to an origin without TLS (HTTPS). This is a user agent's default behavior, if no policy is otherwise specified.
* `"origin"` meaning that the referrer will be the origin of the page, that is roughly the scheme, the host and the port.
* "origin-when-cross-origin" meaning that navigations to other origins will be limited to the scheme, the host and the port, while navigations on the same origin will include the referrer's path.
* `"unsafe-url"` meaning that the referrer will include the origin and the path (but not the fragment, password, or username). This case is unsafe because it can leak origins and paths from TLS-protected resources to insecure origins.

`rel`

For anchors containing the **href** attribute, this attribute specifies the relationship of the target object to the link object. The value is a space-separated list of link types values (en-US). The values and their semantics will be registered by some authority that might have meaning to the document author. The default relationship, if no other is given, is void. Use this attribute only if the **href** attribute is present.

`shape`

The shape of the associated hot spot. The specifications for HTML 5 and HTML 4 define the values `rect`, which defines a rectangular region; `circle`, which defines a circular region; `poly`, which defines a polygon; and `default`, which indicates the entire region beyond any defined shapes. Many browsers, notably Internet Explorer 4 and higher, support `circ`, `polygon`, and `rectangle` as valid values for **shape**; these values are
Non-standard
.

`tabindex`

A numeric value specifying the position of the defined area in the browser tabbing order. This attribute is global in HTML5.

`target`

This attribute specifies where to display the linked resource. In HTML4, this is the name of, or a keyword for, a frame. In HTML5, it is a name of, or keyword for, a *browsing context* (for example, tab, window, or inline frame). The following keywords have special meanings:

* `_self`: Load the response into the same HTML4 frame (or HTML5 browsing context) as the current one. This value is the default if the attribute is not specified.
* `_blank`: Load the response into a new unnamed HTML4 window or HTML5 browsing context.
* `_parent`: Load the response into the HTML4 frameset parent of the current frame or HTML5 parent browsing context of the current one. If there is no parent, this option behaves the same way as `_self`.
* `_top`: In HTML4: Load the response into the full, original window, canceling all other frames. In HTML5: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as `_self`.Use this attribute only if the **href** attribute is present.

`type`

This attribute specifies the media type in the form of a MIME type for the link target. Generally, this is provided strictly as advisory information; however, in the future a browser might add a small icon for multimedia types. For example, a browser might add a small speaker icon when type is set to audio/wav. For a complete list of recognized MIME types, see https://www.w3.org/TR/html4/references.html#ref-MIMETYPES. Use this attribute only if the **href** attribute is present.

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

```html
<map name="primary">
  <area
 shape="circle"
 coords="75,75,75"
 href="left.html"
 alt="Click to go Left" />
  <area
 shape="circle"
 coords="275,75,75"
 href="right.html"
 alt="Click to go Right" />
</map>
<img usemap="#primary" src="http://placehold.it/350x150" alt="350 x 150 pic" />
```

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

Notes
-----

Under the HTML 3.2, 4.0, and 5 specifications, the closing tag `</area>` is forbidden.

The XHTML 1.0 specification requires a trailing slash: `<area />`.

The **id**, **class**, and **style** attributes have the same meaning as the core attributes defined in the HTML 4 specification, but only Netscape and Microsoft define them.

Netscape 1–level browsers do not understand the **target** attribute as it relates to frames.

HTML 3.2 defines only **alt**, **coords**, **href**, **nohref**, and **shape**.

HTML 5.1 defines obsolete the attribute **type** on this tag.

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

| Specification |
| --- |
| HTML Standard # the-area-element |

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

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


Элемент <picture> - HTML

Элемент <picture>
=================

**HTML-элемент `<picture>`** служит контейнером для одного или более элементов `<source>` и одного элемента `<img>` для обеспечения оптимальной версии изображения для различных размеров экрана. Браузер рассмотрит каждый из дочерних элементов `<source>` и выберет один, соответствующий лучшему совпадению; если совпадений среди элементов `<source>` найдено не будет, то будет выбран файл, указанный атрибутом `src` элемента `<img>` . Затем выбранное изображение отображается в пространстве, занятом элементом `<img>`.

Чтобы выбрать оптимальное изображение, user agent анализирует атрибуты `srcset`, `media`, и `type` элемента `<source>` и выбирает совместимое изображение, которое наилучшим образом соответствует текущему макету страницы, характеристикам устройства отображения и т. д.

Элемент `<picture>` часто используют для того, чтобы обеспечить HiDPI (Retina)-версию изображений для дисплеев с высоким разрешением, а также для добавления других форматов изображений, не поддерживаемых всеми браузерами.

| Категории контента | Потоковый контент, фразовый контент, встроенный контент |
| --- | --- |
| Допустимый контент | Ноль или более элементов `<source>`, затем один элемент `<img>`, при необходимости смешанный с элементами поддержки сценариев. |
| Пропуск тегов | Нет, открывающий и закрывающий теги обязательны. |
| Допустимые родители | Любой элемент, который разрешает встроенный контент |
| Допустимые ARIA-роли | Нет |
| DOM-интерфейс | `HTMLPictureElement` (en-US) |

Атрибуты
--------

Этот элемент содержит только универсальные атрибуты.

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

Эти примеры демонстрируют влияние различных атрибутов элемента `<source>` на выбор изображения, которое будет отображаться при их использовании внутри тега `<picture>`.

### Атрибут `media`

Атрибут `media` позволяет определить медиавыражение, которое веб-браузер будет анализировать для выбора элемента `<source>`. Если медиавыражение определяется как ложное `(false)`, то элемент `<source>` пропускается.

```html
<picture>
  <source srcset="mdn-logo-wide.png" media="(min-width: 600px)" />
  <img src="mdn-logo-narrow.png" alt="MDN" />
</picture>
```

### Атрибут `type`

Атрибут `type` позволяет вам обозначить MIME-тип данных, указанных в атрибуте `srcset` элемента `<source>`. Если браузер не поддерживает данный тип, то элемент `<source>` опускается.

```html
<picture>
  <source srcset="mdn-logo.svg" type="image/svg+xml" />
  <img src="mdn-logo.png" alt="MDN" />
</picture>
```

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

| Specification |
| --- |
| HTML Standard # the-picture-element |

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

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

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

* Элемент `<img>`
* Элемент `<source>`
* Позиционирование и определение размера изображения в рамках: `object-position` и `object-fit`


<dt>: Термин для определения - HTML

<dt>: Термин для определения
============================

**HTML-элемент `<dt>`** который определяет термин в описании или списке определений, как таковой должен использоваться внутри элемента `<dl>` . Обычно за ним следует элемент `<dd>`. Кроме того, несколько элементов `<dt>` идущие друг за другом будут содержать своё определение в следующем идущем за ним элементом`<dd>`.

Последующий элемент `<dd>` (*от англ. Description Details)* предоставляет определение или другой связанный текст, относящийся к термину, указанным с помощью `<dt>`.

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

| Категории контента | Нет |
| --- | --- |
| Допустимое содержимое | Потоковый контент, но без потомков `<header>`, `<footer>`, секционного контента или заголовочного контента. |
| Пропуск тегов | Открывающий тег обязателен. Конечный тег может быть опущен, если за этим элементом непосредственно следует другой элемент `<dt>` или `<dd>`, или если в родительском элементе нет больше содержимого. |
| Допустимые родители | Перед элементом `<dt>` или `<dd>`, внутри `<dl>` или (в WHATWG HTML) элемента `<div>` который внутри `<dl>`. |
| Допустимые ARIA-роли | Нет |
| DOM-интерфейс | `HTMLElement` До Gecko 1.9.2 (Firefox 4) включительно, Firefox реализует `HTMLSpanElement` (en-US) интерфейс для этого элемента. |

Атрибуты
--------

Этот элемент включает только глобальные атрибуты.

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

Для примера можно использовать образец для `<dl>` элемента.

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

| Specification |
| --- |
| HTML Standard # the-dt-element |

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

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

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

* `<dd>`, `<dl>`


<image> - HTML

<image>
=======

**Не стандартно:** Эта возможность не является стандартной и стандартизировать её пока никто не собирается. Не используйте её на сайтах, смотрящих во внешний мир: она будет работать не у всех пользователей. Также могут присутствовать большие несовместимости между реализациями и её поведение может в будущем измениться.

Глоссарий
---------

Элемент HTML `<image>` был экспериментальным элементом, предназначенный для отображения изображений. Он никогда не был реализован, вместо него должен использоваться стандартный элемент `<img>`.

**Примечание:** \*\*НИКОГДА НЕ ИСПОЛЬЗУЙТЕ ЕГО!\*\*Для отображения изображений используйте стандартный элемент `<img>`.

Следует обратить внимание, что до Firefox 22 элемент `<image>`, хоть и не поддерживался, был связан с `HTMLSpanElement` (en-US). Позже это было исправлено, и теперь он связан с `HTMLElement` в соответствии с требованиями спецификации.


<pre>: Предварительно отформатированный текстовый элемент - HTML

<pre>: Предварительно отформатированный текстовый элемент
=========================================================

**Элемент HTML `<pre>`** представляет собой предварительно отформатированный текст, который должен быть представлен точно так, как написано в HTML-файле. Текст обычно отображается с использованием непропорционального ("monospace") шрифта. Пробелы внутри этого элемента отображаются как записанные.

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

| Категории контента | Основной поток, Явный контент |
| --- | --- |
| Допустимое содержимое | Фразовый контент |
| Пропуск тегов | Нет, открывающий и закрывающий теги обязательны. |
| Допустимые родители | Любой элемент, который принимает содержимое потока |
| Неявные ARIA-роли | Нет соответствующей роли |
| Допустимые ARIA-роли | Любые |
| DOM-интерфейс | `HTMLPreElement` (en-US) |

Атрибуты
--------

Этот элемент включает в себя только глобальные атрибуты.

`cols`
Non-standard

Содержит *предпочтительное* количество символов, которое должна иметь строка. Это был нестандартный синоним `width`. Чтобы добиться такого эффекта, используйте CSS `width`.

`width`

Содержит *предпочтительное* количество символов, которое должна иметь строка. Хотя технически он все ещё реализован, этот атрибут не имеет визуального эффекта; чтобы достичь такого эффекта, используйте CSS `width`.

`wrap`
Non-standard

Подсказка, указывающая, как должен происходить перенос. В современных браузерах этот атрибут игнорируется, и никакого визуального эффекта не приводит; чтобы достичь такого эффекта, используйте CSS `white-space`.

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

### HTML

```html
<p>Использовать CSS для изменения цвета шрифта легко.</p>
<pre>
body {
  color: red;
}
</pre>
```

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

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

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

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

Комбинация элементов `<figure>` и `<figcaption>`, дополненная `id` и ARIA `role` и `aria-labelledby`, позволяет объявить предварительно отформатированный текст как изображение, а `figcaption` служит альтернативным описанием изображения.

### Пример

```html
<figure role="img" aria-labelledby="cow-caption">
  <pre>
  ____________________________
<  Я эксперт в своей области.  >
  ----------------------------
         \   ^__^
          \  (oo)\_______
             (__)\       )\/\
                 ||----w |
                 ||     ||
  </pre>
  <figcaption id="cow-caption">
    Корова говорит: «Я эксперт в своей области». Корова проиллюстрирована с
    использованием предварительно отформатированных текстовых символов.
  </figcaption>
</figure>
```

* MDN Understanding WCAG, Guideline 1.1 explanations (en-US)
* H86: Providing text alternatives for ASCII art, emoticons, and leetspeak | W3C Techniques for WCAG 2.0
Характеристики
--------------

| Specification |
| --- |
| HTML Standard # the-pre-element |

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

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

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

* CSS: `white-space`, `word-break`
* Связанный элемент: `<code>`


<em>: Элемент акцентирования - HTML

<em>: Элемент акцентирования
============================

**HTML `<em>` элемент** отмечает акцентируемый текст. Элемент `<em>` может быть вложенным, причём каждый уровень вложенности указывает на большую степень акцента.

| Категории контента | Потоковый контент, фразовый контент, явный контент. |
| --- | --- |
| Допустимый контент | Фразовый контент. |
| Пропуск тегов | Нет, открывающий и закрывающий теги обязательны. |
| Допустимые родители | Любой элемент, который принимает фразовый контент. |
| Допустимые ARIA-роли | Любые |
| DOM-интерфейс | `HTMLElement` до Gecko 1.9.2 (Firefox 4) включительно Firefox реализует интерфейс `HTMLSpanElement` (en-US) для этого элемента. |

Атрибуты
--------

К этому элементу применимы глобальные атрибуты.

Примечания по использованию
---------------------------

Элемент `<em>` предназначен для слов, которые имеют подчёркнутый акцент по сравнению с окружающим текстом, который часто ограничивается словом или словами предложения и влияет на смысл самого предложения.

Обычно этот элемент отображается курсивом. Однако его не следует использовать просто для применения курсивного стиля; для этой цели используйте свойство CSS `font-style`. Используйте элемент `<cite>`, чтобы пометить название произведения (книги, пьесы, песни и т. д.). Используйте элемент `<i>` (en-US), чтобы пометить текст в альтернативном тоне или настроении, который охватывает многие распространённые ситуации курсива, такие как научные имена или слова на других языках. Используйте элемент `<strong>`, чтобы пометить текст, который имеет большее значение, чем окружающий текст.

### < i> против <em>

Новые разработчики часто путаются, видя несколько элементов, которые дают аналогичные результаты. `<em>` и `<i>` являются общим примером, поскольку они оба выделяют текст курсивом. Какая разница? Что вы должны использовать?

По умолчанию визуальный результат тот же. Однако смысловое значение здесь другое. Элемент `<em>` представляет ударение на его содержании, в то время как элемент `<i>` представляет текст, который отличается от обычной прозы, например, иностранное слово, изречения вымышленного персонажа или когда текст ссылается на определение слова вместо представления его семантического значения. (Для названия произведения, например названия книги или фильма, следует использовать `<cite>`.)

Это означает, что правильное использование зависит от ситуации. Ни для чисто декоративных целей, это то, для чего предназначен CSS-стиль.

Примером для `<em>` может быть: -«Просто *сделай* это!», или: «Мы *должны* были что-то с этим сделать». Человек или программа, читающие текст, будут произносить слова, выделенные курсивом, с ударением, используя словесное ударение.

Примером для `<i>` может быть: *«Королева Мэри* отплыла прошлой ночью». Здесь нет никакого дополнительного акцента или важности на слове "Королева Мэри". Просто указывается, что речь идёт не о королеве по имени Мария, а о корабле по имени *Королева Мария*. Другим примером для `<i>` может быть: «Слово *'the'* это артикль».

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

Элемент `<em>` часто используется для указания неявного или явного контраста.

```html
<p>
  В HTML 5, что ранее называлось контентом <em>уровня блока</em> теперь
  называется контентом <em>потока</em>.
</p>
```

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

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

| Specification |
| --- |
| HTML Standard # the-em-element |

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

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

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

* `<i>` (en-US)


<canvas> - HTML

<canvas>
========

**HTML `<canvas>` Элемент** может быть использован для отрисовки графики через скрипты (обычно используется JavaScript). Например, его можно использовать для отрисовки графиков, делать композиции фото или даже выполнять анимации. Вы можете (и должны) дать альтернативное содержание внутри блока `<canvas>`. Этот контент будет рендерится в обоих браузерах, в старых которые не поддерживают canvas и в браузерах с отключённым JavaScript.

Больше статей о canvas canvas topic page.

| Content categories (en-US) | Flow content (en-US), phrasing content (en-US), embedded content (en-US), palpable content. |
| --- | --- |
| Permitted content | Transparent но без interactive content (en-US) descendants except(соглашаться?) для `<a>` элементы, `<button>` элементы, `<input>` элементы как `type` атрибут is `checkbox`, `radio`, или `button`. |
| Tag omission | Нет, открывающий и закрывающий теги обязательны. |
| Permitted parent elements | Any element that accepts phrasing\_content (en-US). |
| DOM interface | `HTMLCanvasElement` |

Атрибуты
--------

Этот элемент включает global attributes (en-US).

`height`

Высота в координатном пространстве в CSS пикселях. По умолчанию 150.

`moz-opaque`
Non-standard

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

`width`

Ширина в координатном пространстве в CSS пикселях. По умолчанию 300.

Описание
--------

### Обязательно `</canvas>` тег

В отличии от `<img>` элемента, `<canvas>` элемент **требует** закрытия тега (`</canvas>`).

### Определение размеров холста

Отображаемый размер холста может быть изменён используя stylesheet. Изображение масштабируется при рендеринге, чтобы соответствовать стилю размер. Если ваш рендеринг кажется искажённым, попытайтесь указать ваши атрибуты ширины и высоты точно в атрибутах `<canvas>`, и не используя CSS.

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

```html
<canvas id="canvas" width="300" height="300">
  Извините, ваш браузер нет поддерживает<canvas> элемент.
</canvas>
```

Если ваш холст не использует transparency, установите `moz-opaque` атрибут на canvas теге. Это информация может быть использована для оптимизации рендеринга. Однако, этот атрибут не был стандартизирован и работает только в браузерах основанных на движках рендеринга Mozilla .

```html
<canvas id="mycanvas" moz-opaque></canvas>
```

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

| Specification |
| --- |
| HTML Standard # the-canvas-element |

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

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

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

* MDN canvas portal
* Canvas tutorial
* Canvas cheat sheet
* Canvas-related demos
* Canvas introduction by Apple


<time> - HTML

<time>
======

**Элемент HTML** **`<time>`** используется для представления либо времени в 24-часовом формате, либо точной даты по Григорианскому календарю (с опциональным указанием времени и часового пояса).

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

**Примечание:** Этот элемент неуместно использовать, когда точная дата не определена, а также при использовании дат ранее введения Григорианского календаря (из-за проблем с работой с такими датами).

| Категории контента | Основной поток, фразовый контент, явный контент. |
| --- | --- |
| Допустимый контент | Фразовый контент. |
| Пропуск тегов | Нет, открывающий и закрывающий теги обязательны. |
| Допустимые родители | Любой элемент, который принимает фразовый контент. |
| Допустимые ARIA-роли | Любые |
| DOM-интерфейс | `HTMLTimeElement` |

Атрибуты
--------

Как и все другие элементы HTML, этот элемент поддерживает глобальные атрибуты (en-US).

`datetime`

Этот атрибут специфицирует время и дату и должен быть допустимой датой с возможным дополнительным указанием времени. Если значение элемента не может быть распознано как дата с возможным дополнительным указанием времени, элементу не будет сопоставлен временной срез (timestamp).

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

### Простой пример

#### HTML

```html
<p>Концерт начинается в <time>20:00</time>.</p>
```

#### Вывод

### пример `datetime`

#### HTML

```html
<p>Концерт состоялся <time datetime="2001-05-15 19:00">15 мая</time>.</p>
```

#### Вывод

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

| Specification |
| --- |
| HTML Standard # the-time-element |

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

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

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

* The `<data>` элемент, позволяющий обозначать другие типы данных.


<aside> - HTML

<aside>
=======

**HTML-элемент `<aside>`** представляет собой часть документа, чьё содержимое только косвенно связанно с основным содержимым документа. Чаще всего представлен в виде боковой панели, сносок или меток.

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

| Категории контента | Основной поток, секционный контент, явный контент. |
| --- | --- |
| Допустимое содержимое | Основной поток. |
| Пропуск тегов | Нет, открывающий и закрывающий теги обязательны. |
| Допустимые родители | Любой элемент, который разрешает контент основного потока в качестве содержимого. Обратите внимание, что элемент `<aside>` не должен быть потомком элемента `<address>`. |
| Допустимые ARIA-роли | `feed (en-US)`, `note (en-US)`, `presentation (en-US)`, `region (en-US)`, `search (en-US)` |
| DOM-интерфейс | `HTMLElement` |

Атрибуты
--------

К этому элементу применимы только глобальные атрибуты.

Примечание
----------

* Не используйте элемент `<aside>` для пометки текста в скобках, так как этот вид текста считается частью основного потокового контента.
Примеры
-------

```html
<article>
  <p>
    Мультфильм студии Уолта Диснея <em>Русалочка</em>
    был выпущен в 1989.
  </p>
  <aside>
    <p>Мультфильм заработал $87 миллионов во время первого выпуска.</p>
  </aside>
  <p>Подробнее об этом мультфильме...</p>
</article>
```

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

| Specification |
| --- |
| HTML Standard # the-aside-element |

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

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

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

* Связанные с этим разделом элементы: `<body>`, `<article>`, `<section>`, `<nav>`, `<h1>` (en-US), `<h2>` (en-US), `<h3>` (en-US), `<h4>` (en-US), `<h5>` (en-US), `<h6>` (en-US), `<hgroup>`, `<header>`, `<footer>`, `<address>`.
* Разделы и структура документа HTML5.
* ARIA: роль complementary (en-US)


<noscript> - элемент, который поможет при отключенном JS - HTML

<noscript> - элемент, который поможет при отключенном JS
========================================================

HTML-элемент **`<noscript>`** определяет секцию HTML кода, которая будет вставлена, если в браузере пользователя нет либо отключена поддержка JavaScript.

| Категории контента | метаданные, основной поток, фразовый контент. |
| --- | --- |
| Допустимый контент | Когда выполнение JavaScript отключено и когда он вложен в элемент `<head>`: в любом порядке, ноль или более элементов `<link>`, ноль или более элементов `<style>` и ноль или более элементов `<meta>`.Когда выполнение JavaScript отключено и когда он не вложен в элемент `<head>`: любой прозрачный контент, но среди его потомков не должно быть элемента `<noscript>`.В противном случае: основной поток или фразовый контент. |
| Пропуск тега | Нет, открывающий и закрывающий теги обязательны. |
| Допустимые родители | Любой элемент, который принимает фразовый контент или элемент `<head>` (только для HTML-документа). Оба варианта возможны только если нет элемента-предка `<noscript>`. |
| Неявная ARIA-роль | нет роли |
| Допустимые ARIA-роли | нет |
| DOM-интерфейс | `HTMLElement` |

Атрибуты
--------

Этот элемент включает в себя только глобальные атрибуты (en-US).

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

```html
<noscript>
  <!-- привязка к внешнему файлу -->
  <a href="http://www.mozilla.com/">Внешняя ссылка</a>
</noscript>
<p>Камни!</p>
```

### Результат с включённым JavaScript

Rocks!

### Результат с выключенным JavaScript

External Link

Rocks!

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

| Specification |
| --- |
| HTML Standard # the-noscript-element |

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

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


<audio> - элемент добавления аудио на страницу - HTML

<audio> - элемент добавления аудио на страницу
==============================================

**HTML-элемент `<audio>`** используется для встраивания звукового контента в документ. Он может содержать один или более источников аудио, представленных с помощью атрибута `src` или элемента `<source>` – браузер выберет один наиболее подходящий. Он так же может предназначаться для потокового мультимедиа, используя интерфейс `MediaStream`.

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

Приведённый выше пример показывает простое использование элемента `<audio>`. По аналогии с элементом `<img>` мы добавляем путь к мультимедиа, которое мы хотим встроить, в атрибут `src`. Мы можем добавить другие атрибуты, чтобы указать сведения, такие как автовоспроизведение и повтор, хотим ли мы отображать стандартные элементы управления звуком браузера и т.д.

Контент между открывающим и закрывающим тегами элемента `<audio>` (см. выше) отображается в браузерах, которые не поддерживают этот элемент.

Не все браузеры поддерживают одинаковые форматы аудио. Вы можете предоставить множество источников внутри вложенных элементов `<source>`, и тогда браузер будет использовать первый, который он понимает:

```html
<audio controls>
  <source src="myAudio.mp3" type="audio/mpeg" />
  <source src="myAudio.ogg" type="audio/ogg" />
  <p>
    Ваш браузер не поддерживает HTML5 аудио. Вот взамен
    <a href="myAudio.mp4">ссылка на аудио</a>
  </p>
</audio>
```

Другие примечания по использованию:

* если вы не укажете атрибут `controls`, тогда аудиоплеер не будет добавлять стандартные элементы управления звуком браузера. Вы можете создать ваши собственные элементы управления в помощью JavaScript и `HTMLMediaElement` API;
* чтобы обеспечить точный контроль над вашим аудиоконтентом, `HTMLMediaElement` инициирует (вызывает) множество различных событий;
* вы так же можете использовать Web Audio API для непосредственной генерации и управления потоками аудио из кода JavaScript;
* элементы `<audio>` не могут иметь субтитры, в отличие от элементов `<video>`. Смотрите "WebVTT и аудио" для более подробной информации.

Хороший источник информации по использованию HTML-элемента `<audio>` – это руководство для начинающих "Видео- и аудиоконтент".

Атрибуты
--------

К этому элементу применимы глобальные атрибуты.

`autoplay`

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

**Примечание:** Сайты, которые автоматически проигрывают аудио (или видео с аудиодорожкой) могут быть неприятными для пользователей, поэтому этого следует по возможности избегать. Если вам необходимо предлагать функцию автовоспроизведения, то вы должны сделать её Opt-in (вид подписки), то есть когда пользователь специально (сам) включил её. Тем не менее, это может быть полезно, при создании элементов мультимедиа, чей источник будет установлен позднее под контролем пользователя.

`controls`

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

`crossorigin`

Этот атрибут указывает, следует ли использовать CORS при загрузке мультимедиа или нет. Допустимые значения:

* `anonymous`: Запрос cross-origin (т.е. с HTTP-заголовком `Origin`) выполняется, но параметры доступа не передаются (т.е. нет cookie, не используется стандарт X.509 или базовая HTTP-аутентификация);
* `use-credentials`: Запрос cross-origin (т.е. с HTTP-заголовком `Origin`) выполняется вместе с передачей параметров доступа (т.е. есть cookie, используется стандарт X.509 или базовая HTTP-аутентификация).Если этот атрибут не задан, то CORS при загрузке мультимедиа не используется (т.е. без отправки HTTP-заголовка `Origin`). Если задан неправильно, то он обрабатывается так, как если бы использовалось значение `anonymous`. Для получения дополнительной информации смотрите "Настройки атрибутов CORS".

`loop`

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

`muted`

Атрибут логического типа, который указывает, будет ли звук изначально отключён. Значением по умолчанию является `false`.

`preload`

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

* `none`: указывает, что аудио не должно предварительно загружаться;
* `metadata`: указывает, что предварительно загружаются только метаданные аудио (например, продолжительность аудио);
* `auto`: указывает, что весь файл аудио может быть предварительно загружен, даже если пользователь не предполагает его использовать;
* *пустая строка*: синоним значения `auto`.Значение по умолчанию отличается для каждого браузера. Спецификация рекомендует установить значение `metadata`.

**Примечание:**

    + Атрибут `autoplay` имеет приоритет над `preload`. Если `autoplay` указан, браузер, очевидно, должен будет начать загрузку аудио для воспроизведения.
    + Спецификация не обязывает браузер придерживаться значения этого атрибута – это просто совет.

`src`

URL аудио для встраивания. Это является темой контроля доступа HTTP. Этот атрибут является необязательным; вы можете вместо него использовать элемент `<source>` внутри блока audio (`<audio></audio>`), чтобы указать аудио для встраивания.

События
-------

Этот элемент может инициировать (вызывать) различные события (en-US).

Взаимодействие с CSS
--------------------

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

Стандартные элементы управления имеют значение свойства `display`, равное `inline`, и зачастую хорошей идеей является установка этого свойства в значение `block`, чтобы улучшить контроль над позиционированием и разметкой, если вы не хотите, чтобы он находился внутри текстового блока или чего-то подобного.

Вы можете стилизовать стандартные элементы управления CSS-свойствами, которые влияют на блок как единое целое, например, вы можете задать `border` и `border-radius`, `padding`, `margin` и т.д. Тем не менее вы не можете стилизовать отдельные компоненты внутри аудиоплеера (например, изменить размер кнопок, иконок, размер шрифта и т.д.), и элементы управления в разных браузерах отличаются.

Чтобы получить внешний вид совместимый с разными браузерами, вам необходимо создать собственные элементы управления. Они могут быть размечены и стилизованы любым удобным для вас способом и затем может быть использован JavaScript вместе с API `HTMLMediaElement` для объединения функций, которые они выполняют.

"Основы стилизации видеопроигрывателя (en-US)" предоставляют некоторые полезные методы стилизации – они написаны в контексте `<video>`, но в значительной степени применимы и к `<audio>`.

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

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

Следующий пример показывает простое использования элемента `<audio>` для воспроизведения файла в формате OGG. Он будет автоматически воспроизводиться из-за атрибута `autoplay`. Также он содержит резервный контент, на случай отсутствия поддержи браузером элемента `<audio>`.

```html
<!-- Простое воспроизведение аудио -->
<audio src="AudioTest.ogg" autoplay>
  Ваш браузер не поддерживает элемент <code>audio</code>.
</audio>
```

### Элемент <audio> с элементом <source>

В этом примере указывается, какой аудиотрек будет добавлен с помощью атрибута `src` во вложенный элемент `<source>`, а не в непосредственно элемент `<audio>`. Всегда полезно включать MIME-тип файла в атрибут `type`, так как браузер может немедленно определить, может ли он воспроизвести этот файл, и не тратить на него время, если не может.

```html
<audio controls="controls">
  <source src="foo.wav" type="audio/wav" />
  Ваш браузер не поддерживает элемент <code>audio</code>.
</audio>
```

### Элемент <audio> с множеством элементов <source>

Этот пример включает множество элементов `<source>`. Браузер попытается загрузить источник из первого элемента `<source>` (Opus), если он не в состоянии воспроизвести его, тогда он перейдёт ко второму (Vorbis) и, наконец, к третьему (MP3), если все предыдущие по каким-либо причинам не могут быть воспроизведены браузером:

```html
<audio controls="">
  <source src="foo.opus" type="audio/ogg; codecs=opus" />
  <source src="foo.ogg" type="audio/ogg; codecs=vorbis" />
  <source src="foo.mp3" type="audio/mpeg" />
</audio>
```

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

Audio with spoken dialog should provide both captions and transcripts that accurately describe its content. Captions allow people who are experiencing hearing loss to understand an audio recording's content as the recording is being played, while transcripts allow people who need additional time to be able to review the recording's content at a pace and format that is comfortable for them.

If automatic captioning services are used, it is important to review the generated content to ensure it accurately represents the source audio.

In addition to spoken dialog, subtitles and transcripts should also identify music and sound effects that communicate important information. This includes emotion and tone:
```

1
00:00:00 --> 00:00:45
[Energetic techno music]

2
00:00:46 --> 00:00:51
Welcome to the Time Keeper's podcast! In this episode we're discussing which Swisswatch is a wrist switchwatch?

16
00:00:52 --> 00:01:02
[Laughing] Sorry! I mean, which wristwatch is a Swiss wristwatch?
```

* Субтитры и скрытые субтитры (en-US).
* Формат Web Video Text Tracks (WebVTT).
* WebAIM: субтитры, стенограммы и описания аудио.
* Понимание WCAG, Руководство 1.2 объяснения (en-US).
* Понимание критерия успешного исхода 1.2.1 | W3C Понимание WCAG 2.0
* Понимание критерия успешного исхода 1.2.2 | W3C Понимание WCAG 2.0
Техническая сводка
------------------

| Категории контента | Потоковый контент, фразовый контент, встроенный контент. Если элемент имеет атрибут `controls`, он так же принадлежит к категориям интерактивного и явного контента. |
| --- | --- |
| Допустимое содержимое | Если элемент имеет атрибут `src`: ноль или более элементов `<track>`, за которыми следует прозрачный контентет, который не содержит элементов `<audio>` или `<video>`. Иначе: ноль или более элементов `<source>`, за которыми следует ноль или более элементов `<track>`, за которыми следует прозрачный контент, который не содержит элементов `<audio>` или `<video>`. |
| Пропуск тегов | Ни одного; Оба тега, открывающий и закрывающий, являются обязательными. |
| Допустимые родители | Любой элемент, который разрешает встроенный контент в качестве содержимого. |
| Допустимые ARIA-роли | `application (en-US)` |
| DOM-интерфейс | `HTMLAudioElement` |

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

| Specification |
| --- |
| HTML Standard # the-audio-element |

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

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

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

* Медиа форматы для HTML-элементов audio и video.
* Web Audio API.
* `HTMLAudioElement`.
* `nsIDOMHTMLMediaElement`.
* `<source>`.
* `<video>`.
* Видео и аудио контент.
* Основы кросс-браузерного audio.


<template>: элемент шаблона контента - HTML

<template>: элемент шаблона контента
====================================

HTML-элемент шаблона контента **`<template>`** — это механизм для отложенного создания клиентского контента, который не отображается во время загрузки страницы, но может быть инициализирован при помощи JavaScript.

Шаблон можно представить себе как фрагмент контента страницы, сохранённый для последующего использования в документе. Хотя парсер и обрабатывает содержимое элемента **`<template>`** во время загрузки страницы, он делает это, только чтобы убедиться в валидности содержимого, само содержимое при этом не отображается.

| Категории контента | Метаданные, основной поток, фразовый контент, элементы поддержки скриптов |
| --- | --- |
| Допустимый контент | Нет ограничений |
| Пропуск тегов | Нет, открывающий и закрывающий теги обязательны. |
| Допустимые родители | Любые элементы, которые могут содержать метаданные, фразовый контент или элементы поддержки скриптов. Допускается вкладывать элемент в `<colgroup>` (en-US), у которого *отсутствует* атрибут `span` (en-US). |
| Неявные ARIA-роли | Нет соответствующей роли |
| Допустимые ARIA-роли | Нет |
| DOM-интерфейс | `HTMLTemplateElement` (en-US) |

Атрибуты
--------

Элемент может иметь общие атрибуты.

Однако у ``HTMLTemplateElement` (en-US)` есть свойство ``content` (en-US)`, которое возвращает доступный только для чтения ``DocumentFragment``, содержащий DOM-поддерево шаблона. Обратите внимание, что прямое использование значения ``content` (en-US)` может привести к непредсказуемому поведению, см. раздел ловушка `DocumentFragment` ниже.

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

Начнём с HTML.

```html
<table id="producttable">
  <thead>
    <tr>
      <td>UPC_Code</td>
      <td>Product_Name</td>
    </tr>
  </thead>
  <tbody>
    <!-- данные будут вставлены сюда -->
  </tbody>
</table>

<template id="productrow">
  <tr>
    <td class="record"></td>
    <td></td>
  </tr>
</template>
```

Для начала у нас есть таблица, в которую мы собираемся вставить контент с помощью Javascript. За таблицей следует шаблон, который описывает структуру HTML-фрагмента — строку таблицы.

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

```js
// Убеждаемся, что браузер поддерживает тег <template>,
// проверив наличие атрибута content у элемента template.
if ("content" in document.createElement("template")) {
  // Находим элемент tbody таблицы
  // и шаблон строки
  var tbody = document.querySelector("tbody");
  var template = document.querySelector("#productrow");

  // Клонируем новую строку и вставляем её в таблицу
  var clone = template.content.cloneNode(true);
  var td = clone.querySelectorAll("td");
  td[0].textContent = "1235646565";
  td[1].textContent = "Stuff";

  tbody.appendChild(clone);

  // Клонируем новую строку ещё раз и вставляем её в таблицу
  var clone2 = template.content.cloneNode(true);
  td = clone2.querySelectorAll("td");
  td[0].textContent = "0384928528";
  td[1].textContent = "Acme Kidney Beans 2";

  tbody.appendChild(clone2);
} else {
  // Иной способ заполнить таблицу, потому что
  // HTML-элемент template не поддерживается.
}
```

Как результат имеем HTML-таблицу с двумя новыми строками, добавленными с помощью JavaScript:
```

table {
  background: #000;
}
table td {
  background: #fff;
}
```

Ловушка `DocumentFragment`
--------------------------

`DocumentFragment` не подходит в качестве целевого объекта для многих событий, поэтому предпочтительнее клонировать или ссылаться на элементы внутри него.

Рассмотрим следующие HTML-разметку и JavaScript-код:

### HTML

```html
<div id="container"></div>

<template id="template">
  <div>Click me</div>
</template>
```

### JavaScript

```js
const container = document.getElementById("container");
const template = document.getElementById("template");

function clickHandler(event) {
  event.target.append(" — Clicked this div");
}

const firstClone = template.content.cloneNode(true);
firstClone.addEventListener("click", clickHandler);
container.appendChild(firstClone);

const secondClone = template.content.firstElementChild.cloneNode(true);
secondClone.addEventListener("click", clickHandler);
container.appendChild(secondClone);
```

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

В переменной `firstClone` у нас экземпляр (клон) `DocumentFragment`, и хотя у нас получилось отрисовать его внутри контейнера, клик по нему не срабатывает. В переменной `secondClone` у нас экземпляр (клон) ``HTMLDivElement``, клик по которому работает как ожидается.

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

| Specification |
| --- |
| HTML Standard # the-template-element |

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

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

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

* Веб-компоненты: `<slot>` (и устаревший: `<shadow>`)
* Использование шаблонов и слотов (en-US)


<progress>: Элемент индикатора выполнения - HTML

<progress>: Элемент индикатора выполнения
=========================================

\*\*HTML-элемент `<progress>` \*\*отображает индикатор, показывающий ход выполнения задачи, обычно отображаемый в виде прогресс бара (индикатора выполнения).

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

| Категории контента | Потоковый контент, фразовый контент, контент, ассоциированный с label, явный контент. |
| --- | --- |
| Допустимый контент | Фразовый контент, но среди его потомков не должно быть элемента `<progress>`. |
| Пропуск тегов | Нет, открывающий и закрывающий теги обязательны. |
| Допустимые родители | Любой элемент, который принимает фразовый контент. |
| Допустимые ARIA-роли | Нет |
| DOM-интерфейс | `HTMLProgressElement` (en-US) |

Атрибуты
--------

Этот элемент включает в себя глобальные атрибуты.

`max`

Этот атрибут описывает сколько затрат требует задача, указанная элементом `progress`. Атрибут `max`, в случае указания, должен быть положительным, также, возможно применение числа с плавающей точкой. Значение по умолчанию 1.

`value`

Этот атрибут указывает какая часть задачи была выполнена. Это может быть число с плавающей точкой от 0 до `max`, или между 0 и 1, если `max` не указан. Если атрибут `value` не указан, индикатор выполнения не определён; это указывает на то, что действие продолжается без указания на то, сколько времени оно займёт.

**Примечание:** Минимальное значение всегда 0, а атрибут `min` недопустим для прогресс-элемента. Вы можете использовать свойство CSS `-moz-orient` (en-US), чтобы указать, должен ли индикатор выполнения отображаться горизонтально (по умолчанию) или вертикально.

**Примечание:** Псевдокласс `:indeterminate` может быть использован для работы с неопределённым индикатором выполнения. Чтобы индикатор выполнения стал неопределённым после присвоения ему значения, вы должны удалить атрибут value с помощью `element.removeAttribute("value")`

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

```html
<progress value="70" max="100">70 %</progress>
```

### Result

### Дополнительные примеры

Смотрите `-moz-orient` (en-US).

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

| Specification |
| --- |
| HTML Standard # the-progress-element |

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

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

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

* <meter>
* `:indeterminate`
* `-moz-orient` (en-US)
* `::-moz-progress-bar`
* `::-ms-fill`
* `::-webkit-progress-bar` (en-US)
* `::-webkit-progress-value` (en-US)
* `::-webkit-progress-inner-element` (en-US)


<legend> - HTML

<legend>
========

**HTML-элемент `<legend>`** представляет собой заголовок содержания родительского элемента `<fieldset>`.

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

| Категории контента (en-US) | Нет |
| --- | --- |
| Допустимый контент | Фразовый контент (en-US). |
| Пропуск тегов | Нет, открывающий и закрывающий теги обязательны. |
| Допустимые родители | Является дочерним элементом тега `<fieldset>` |
| Допустимые ARIA-роли | Нет |
| DOM-интерфейс | `HTMLLegendElement` (en-US) |

Атрибуты
--------

Этот элемент включает только универсальные атрибуты (en-US).

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

Смотрите `<form>` для примеров использования элемента `<legend>`.

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

| Specification |
| --- |
| HTML Standard # the-legend-element |

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

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

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

* Другие связанные элементы: `<form>`, `<option>`, `<label>`, `<button>`, `<select>`, `<datalist>`, `<optgroup>`, `<fieldset>`, `<textarea>` (en-US), `<input>`, `<output>`, `<progress>` и `<meter>`.
* ARIA: Form role (en-US)


<tfoot> - HTML

<tfoot>
=======

*HTML* элемент подвала таблицы (`<tfoot>`) определяющий набор строк суммирующих столбцы таблицы.

Используемый контекст
---------------------

| Content categories | None. |
| --- | --- |
| Допустимое содержание | Ноль или более `<tr>` (en-US) элементов. |
| Tag omission | The start tag is mandatory. The end tag may be omitted if the `<tbody>` (en-US) element is immediately followed by an, eventually implicitly-defined, `<tbody>` (en-US), or if there is no more content in the parent `<table>` (en-US) element. |
| Разрешённые родительские элементы | A `<table>` (en-US) element. The `<tfoot>` must appear after any `<caption>`, `<colgroup>` (en-US) or `<thead>` (en-US) element. It can be before or after all `<tbody>` (en-US) and `<tr>` (en-US) elements, but not intermixed with them. The `<tfoot>` element cannot be placed after any `<tbody>` (en-US) and `<tr>` (en-US) element. This restriction has been softened in HTML5. |
| Нормативные документы | HTML5, section 4.9.7 (HTML4.01, section 11.2.3) |

Атрибуты
--------

Этот элемент включает в себя глобальные атрибуты (en-US).

`align`
Устарело

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

* left, выравнивание содержимого по левому краю ячейки
* center, выравнивание содержимого по центру ячейки
* right, выравнивание содержимого по правому краю ячейки
* justify, выравнивание по ширине ячейки: добавление пробелов к тексту содержимого ячейки до тех пор, пока содержимое не выровняется от одного края ячейки до другого
* char, выравнивание текстового содержимого по специальному символу с минимальным смещением, определённым `char` (en-US) и `charoff` (en-US) атрибутами Не реализовано (смотрите Firefox bug 2212).Если этот атрибут не задан, то значением по умолчанию является left.

**Примечание:** Do not use this attribute as it is obsolete (not supported) in the latest standard.\* To achieve the same effect as the left, center, right or justify values, use the CSS `text-align` property on it.

* To achieve the same effect as the char value, in CSS3, you can use the value of the `char` as the value of the `text-align` property Не реализовано.

`bgcolor`
Non-standard

Этот атрибут определяет цвет фона каждой ячейки столбца. Это один из 6-ти значного шестнадцатеричного кода определённого в sRGB, предваряется '#'. Может быть использован один из шестнадцати предопределённых строк.

**Примечание:** Do not use this attribute, as it is non-standard and only implemented some versions of Microsoft Internet Explorer: the `<tfoot>` element should be styled using CSS. To give a similar effect to the **bgcolor** attribute, use the CSS property `background-color`, on the relevant `<td>` or `<th>` (en-US) elements.

`char`
Устарело

This attribute is used to set the character to align the cells in a column on. Typical values for this include a period (.) when attempting to align numbers or monetary values. If `align` is not set to char, this attribute is ignored.

**Примечание:** Do not use this attribute as it is obsolete (and not supported) in the latest standard. To achieve the same effect as the `char`, in CSS3, you can use the character set using the `char` attribute as the value of the `text-align` property Не реализовано.

`charoff`
Устарело

This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the **char** attribute.

**Примечание:** Do not use this attribute as it is obsolete (and not supported) in the latest standard.

`valign`
Устарело

Этот атрибут задаёт вертикальное выравнивание текста в каждой строке ячеек заголовка таблицы. Возможные значения для этого атрибута:

* baseline, which will put the text as close to the bottom of the cell as it is possible, but align it on the baseline of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as bottom.
* bottom, which will put the text as close to the bottom of the cell as it is possible;
* middle, which will center the text in the cell;
* and top, which will put the text as close to the top of the cell as it is possible.

**Примечание:** Do not use this attribute as it is obsolete (and not supported) in the latest standard: instead set the CSS `vertical-align` property on it.

DOM интерфейс
-------------

Этот элемент реализует интерфейс `HTMLTableSectionElement` (en-US).

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

Пожалуйста обратитесь к странице `<table>` (en-US) для примера `<tfoot>`.

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

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

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

* Other table-related HTML Elements: `<caption>`, `<col>`, `<colgroup>` (en-US), `<table>` (en-US), `<tbody>` (en-US), `<td>`, `<th>` (en-US), `<thead>` (en-US), `<tr>` (en-US);
* CSS properties and pseudo-classes that may be specially useful to style the <tfoot> element:
    + the `:nth-child` pseudo-class to set the alignment on the cells of the column;
    + the `text-align` property to align all cells content on the same character, like '.'.


<details> - HTML

<details>
=========

HTML-элемент **`<details>`** используется для раскрытия скрытой (дополнительной) информации.

Виджет раскрытия обычно представлен на экране с использованием небольшого треугольника, который поворачивается, чтобы показать состояние открытия / закрытия, с меткой рядом с треугольником. Если первый дочерний элемент элемента `<details>` является `<summary>`, содержимое элемента `<summary>` используется в качестве метки для виджета раскрытия.

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

| Content categories | Flow content, sectioning root, interactive content, palpable content. |
| --- | --- |
| Permitted content | One `<summary>` element followed by flow content. |
| Tag omission | Нет, открывающий и закрывающий теги обязательны. |
| Permitted parents | Any element that accepts flow content. |
| Permitted ARIA roles | None |
| DOM interface | `HTMLDetailsElement` (en-US) |

Атрибуты
--------

Элемент поддерживает только глобальные атрибуты.

`open`

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

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

```html
<details>
  <summary>Some details</summary>
  <p>More info about the details.</p>
</details>

<details open>
  <summary>Even more details</summary>
  <p>Here are even more details about the details.</p>
</details>
```

### Result

>
> \*\*Примечание:\*\*Если приведённый выше пример не работает, см. Browser compatibility , чтобы определить поддерживает ли вообще ваш браузер эту функцию.
>
>
>

Примеры стилизации
------------------

Следуя более новой спецификации, Firefox отображает элемент summary как `display: list-item` и маркер можно стилизовать так же, как и элементы списка.

Следуя более старой спецификации, в Chrome and Safari существует пользовательский псевдо-элемент `::-webkit-details-marker`, с помощью которого можно стилизовать маркер.

Для кроссбраузерной стилизации маркера, чтобы скрыть дефолтный и добавить кастомный, необходимо для Firefox установить элементу `summary {display: block;}`, а для Chrome и Safari's установить `::-webkit-details-marker {display: none;}`. После этого дефолтный маркер будет скрыт, после чего можно установить свой маркер любым доступным способом стилизации. В примере ниже с помощью псевдоэлементов маркер возвращается обратно.

### HTML

```html
<details>
  <summary>Some details</summary>
  <p>More info about the details.</p>
</details>
```

### CSS

```css
summary {
  display: block;
}

summary::-webkit-details-marker {
  display: none;
}

summary::before {
  content: "\25B6";
  padding-right: 0.5em;
}

details[open] > summary::before {
  content: "\25BC";
}
```

### Result

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

| Specification |
| --- |
| HTML Standard # the-details-element |

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

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

See also
--------

* `<summary>`