<style> - элемент для указания стилей - HTML

<style> - элемент для указания стилей
=====================================

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

*HTML-элемент **<style>*** содержит стилевую информацию для документа или его части. По умолчанию стилевые инструкции внутри этого элемента считаются написанными на CSS.

* *Категории содержимого (en-US)*Metadata content, and if the `scoped` attribute is present: flow content.
* *Permitted content* Style information matching the language of the `type` attribute.
* *Tag omission* Нет, открывающий и закрывающий теги обязательны.
* *Допустимые родительские элементы* ...
* *Интерфейс DOM* `HTMLStyleElement` (en-US)
Атрибуты
--------

This element includes the global attributes.

`type`

Этот атрибут определяет язык стиля в виде MIME-типа (кодировка не указывается). Этот атрибут необязателен, и при отсутствии считается «`text/css`».

`media`

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

`scoped`

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

`title`

Specifies alternative style sheet sets.

`disabled`

If set, disables (does not apply) the style rules, specified within the element, to the `Document`.

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

### Простая таблица стилей

```html
<style type="text/css">
 body {
 color: red;
 }
</style>
```

### Таблица стилей с ограниченной областью действия

```html
<article>
  <div>
    Атрибут scoped позволяет включить элементы стиля в середине документа.
    Внутренние правила применяются только внутри родительского элемента.
  </div>
  <p>
    Этот текст должен быть чёрным. Если он красный, ваш браузер не поддерживает
    атрибут scoped.
  </p>
  <section>
    <style scoped>
 p {
 color: red;
 }
 </style>
    <p>Этот должен быть красным.</p>
  </section>
</article>
```

#### Live sample

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

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

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

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

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

* Элемент `<link>`, позволяющий использовать внешние таблицы стилей.


<code>: элемент отображения кода - HTML

<code>: элемент отображения кода
================================

**Элемент HTML `<code>`** отображает его содержимое в стиле, предназначенном для указания на то, что текст является коротким фрагментом компьютерного кода. По умолчанию текст содержимого отображается с использованием шрифта монопространства по умолчанию пользовательского агента.

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

| Content categories | Flow content, phrasing content, palpable content. |
| --- | --- |
| Permitted content | Phrasing content. |
| Tag omission | Нет, открывающий и закрывающий теги обязательны. |
| Permitted parents | Any element that accepts phrasing content. |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | Any |
| DOM interface | `HTMLElement` Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the `HTMLSpanElement` (en-US) interface for this element. |

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

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

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

Текстовый абзац, включающий `<code>`:

```html
<p>
  The function <code>selectAll()</code> highlights all the text in the input
  field so the user can, for example, copy or delete the text.
</p>
```

Вывод, генерируемый этим HTML, выглядит так:

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

Для представления нескольких строк кода, оберните элемент `<code>` в элемент `<pre>`. Элемент `<code>` сам по себе представляет только один элемент кода или строку кода.

CSS-правило может быть определено для того, чтобы селектор `code` переопределил шрифт браузера по умолчанию. Предпочтения, установленные пользователем, могут иметь приоритет над указанными CSS.

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

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

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

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

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

* `<samp>` (en-US)
* `<kbd>`
* `<command>` (deprecated)
* `<var>` (en-US)
* `<pre>`


<a> - элемент ссылки - HTML

<a> - элемент ссылки
====================

HTML-элемент `<a>` определяет гиперссылку для перехода на определённое место на странице или на другую страницу в Интернете. Также он может быть использован (в устаревшем варианте) для создания якоря — это место назначения для гиперссылок внутри страницы: так ссылки не ограничены только в перемещении между страницами.

```html
<a href="https://developer.mozilla.org">MDN</a>
```

| Категории контента | Основной поток, текстовый контент (en-US), интерактивный контент, скрытый контент. |
| --- | --- |
| Разрешённый контент | Логический контент, содержащий либо основной поток (исключая интерактивный контент), либо заголовочный контент (en-US). |
| Опускание тегов | Открывающий и закрывающий теги обязательны. |
| Разрешённые родительские элементы | Любые элементы, в которых разрешён текстовый контент или элементы, в которых разрешёны элементы основного потока. |
| DOM-интерфейс | `HTMLAnchorElement` |

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

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

`download`

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

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

* Атрибут может быть использован вместе с blob: URLs и `data: URLs`, чтобы пользователи могли проще скачать контент, который сгенерирован с помощью JavaScript (например, картинка, созданная с помощью онлайн-сайта для рисования).
* Если представлен HTTP-заголовок `Content-Disposition:,` и он содержит иное название, у HTTP-заголовка есть преимущество над атрибутом.
* Если этот атрибут установлен и `Content-Disposition:` установлен на `inline`, Firefox отдаёт преимущество `Content-Disposition`, но в тоже время Chrome отдаёт преимущество атрибуту `download`.
* Этот атрибут соблюдается только на ресурсах с тем же доменом.

`href`

Единственный обязательный атрибут для определения ссылки в HTML4, но больше необязательный в HTML5. Упущение этого атрибута создаёт ссылку-заполнитель. Атрибут `href` указывает ссылку: либо URL, либо якорь. Якорь — это название после символа `#`, который указывает на элемент (ID) на текущей странице. URL не ограничены только ссылками на HTTP, они могут использовать любой протокол, поддерживающийся браузером. Например, `file`, `ftp` и `mailto` работают в большинстве браузеров.

**Примечание:** Вы можете использовать специальное значение «top», чтобы создать ссылки в начало страницы, например: `<a href="#top">Вернуться наверх</a>`. Это поведение указано в Спецификациях HTML5.

`hreflang`

Этот атрибут сообщает язык документа по ссылке. Это чисто контрольная информация. Разрешённые значения определены в BCP47 для HTML5 и RFC1766 для HTML4. Используйте этот атрибут, только если задан `href`.

`ping`

Этот атрибут уведомляет указанные в нём URL, что пользователь перешёл по ссылке.

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

Этот атрибут сообщает, какую информацию передавать ресурсу по ссылке:

* `"no-referrer"` не отправляет заголовок `Referer`.
* `"no-referrer-when-downgrade"` не отправляет заголовок `Referer` ресурсу без TLS (HTTPS). Это стандартное поведение браузера, если не указана иная политика.
* `"origin"` отправляет такую информацию о текущей странице, как адрес, протокол, хост и порт.
* `"origin-when-cross-origin"` отправляет другим ресурсам только протокол, хост и порт, а внутри ресурса также отправляет путь.
* `"unsafe-url"` отправляет только ресурс и адрес (но не пароли или никнеймы). Это значение небезопасно, так как могут утечь ресурс и адрес с TLS-защищённых ресурсов на небезопасные.

`rel`

Для ссылок, которые содержат атрибут `href`, этот атрибут устанавливает отношения между ссылками. Значением является список значений (en-US), разделённый пробелами. Значения и их семантика будут зарегистрированы другими сайтами, которые могут иметь произвольное значение к документу автора. Значением по умолчанию является `void`, если не задано иное. Используйте этот тег, только если задан атрибут `href`.

`target`

Этот атрибут определяет, где показать содержимое по ссылке. В HTML4, это название и ключевое слово фрейма. В HTML5, это название или ключевое слово в браузере (например, вкладка, окно или iframe). У следующих ключевых слов специальные значения:

* `_self` загружает документ в текущем фрейме в HTML4 (или текущей вкладке в HTML5) как текущий. Это значение по умолчанию, если не указано иное значение.
* `_blank` загружает документ в новой окне в HTML4 или вкладке в HTML5.
* `_parent` загружает документ в родительском фрейме в HTML4 или в родительской вкладке в HTML5. Если нет родителя, параметр будет вести себя как`_self`: 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` в HTML4 загружает документ в новом окне, игнорируя другие фреймы. В HTML5 загружает в окне высшего уровня. Если родителя нет, опция ведёт себя как `_self`.Используйте этот атрибут только если указан `href`.

**Примечание:** Используя `target`, вы должны добавлять `rel="noopener noreferrer"`, чтобы избежать эксплуатацию API `window.opener`.

`type`

Этот атрибут определяет MIME-тип для документа по ссылке. Обычно это используется как контрольная информация, но в будущем браузеры могут добавлять маленькую иконку для медиафайлов. Например, браузер может добавить маленькую иконку мегафона, если тип файла установлен как `audio/wav`.Используйте этот атрибут только если указан `href`.

### Устаревшие

`charset`

Этот атрибут определяет кодировку документа по ссылке. Значением является разделённый пробелами или запятыми список кодировок. Значением по умолчанию является ISO-8859-1.

**Предупреждение:** Этот атрибут является устарелым в HTML5 и **не должен использоваться**. Чтобы достичь такого же эффекта, используйте HTTP-заголовок `Content-Type` на ссылающемся ресурсе.

`coords`

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

`name`

Этот атрибут обязателен в определении якоря на странице. Значение имени схоже со значением `id` и должен быть уникальным идентификатором и состоять из букв и цифр. Согласно спецификации HTML 4.01, и `id`, и `name` могут быть использованы с элементом `<a>`, пока у них идентичные значения.

`rev`

Этот атрибут определяет обратную ссылку, обратные отношения атрибута `rel`. Это полезно, чтобы отобразить, откуда пришёл объект как автор или документ.

`shape`

Этот атрибут используется, чтобы определить выбранный регион для ссылок на источник гипертекста, которые соединены с фигурой для создания изображения-карты. Значения для атрибута — `circle`, `default`, `polygon` и `rect`. Формат координат зависит от выбранной формы. Для `circle` — `x`, `y`, `r`, где `x` и `y` — пиксельные координаты центра круга и `r` — радиус в пикселях. Для rect — `x`, `y`, `w`, `h`, где `x` и `y` — координаты верхнего левого угла прямоугольника, а `w` и `h` — ширина и высота соответственно. Значениями `polygon` для координатор формы являются `x1`, `y1`, `x2`, `y2`... Каждая пара `x`, `y` определяет точку в полигоне, с последующей точкой становится прямой линией, и последняя точка объединяется с первой. Значение `default` для форм требует, чтобы полностью закрытая территория, например, изображение, было использовано.

**Примечание:** Желательно использовать атрибут `usemap` для элемента `<img>` и связанного элемента `<map>`, чтобы определить горячие точки вместо атрибутов формы.

### Нестандартные

`datafld`
Non-standard

Этот атрибут определяет название столбца из объекта исходных данных, который принимает связанные данные.

>
> \*\*Предупреждение:\*\*Этот атрибут нестандартный и **не должен использоваться**. Для достижения такого же эффекта, используйте скрипты и такие механизмы, как XMLHttpRequest, чтобы динамично заполнять страницу.
>
>
>

|  |  |  |  |  |
| --- | --- | --- | --- | --- |
| Поддержка | Gecko | Presto | WebKit | Trident |
| Не реализована | Не реализована | Не реализована | IE4, IE5, IE6, IE7 (Убрана в IE8) |
| Нормативный документ | Microsoft's Data Binding: dataFld Property (MSDN) |

`datasrc`
Non-standard

Этот атрибут сообщает ID объекта исходных данных, который принимает связанные данные с этим элементом.

>
> \*\*Предупреждение:\*\*Этот атрибут нестандартный и **не должен использоваться**. Для достижения такого же эффекта, используйте скрипты и такие механизмы, как XMLHttpRequest, чтобы динамично заполнять страницу.
>
>
>

|  |  |  |  |  |
| --- | --- | --- | --- | --- |
| Поддержка | Gecko | Presto | WebKit | Trident |
| Не реализована | Не реализована | Не реализована | IE4, IE5, IE6, IE7 (Убрана в IE8) |
| Нормативный документ | Microsoft's Data Binding: dataSrc Property (MSDN) |

`methods`
Non-standard

Значение этого атрибута предоставляет информацию о функциях, которые могут быть выполнены на объекте. Обычно значения даны HTTP-протоколом, когда он использован, но может (для похожих целей, как для атрибута `title`) быть полезным для включения контрольной информации в ссылке. Например, браузер может выбрать другой тип рендеринга для ссылки как функцию определённых методов; что-то, что может быть найдено, может иметь другую иконку, или внешняя ссылка может получить индикатор перехода с текущего сайта. Этот элемент не понимается или не поддерживается полностью даже браузером Internet Explorer 4, который определил этот атрибут. Значения `methods` (MSDN).

`urn`
Non-standard

Этот атрибут, предложенный Microsoft, определяет отношения уникального названия ресурса (URN) с ссылкой. Хотя он основан на стандартах работы нескольких лет назад, значение URN всё ещё не определено полностью, поэтому этот атрибут не имеет значения. Значения `urn` (MSDN).

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

### Ссылка на внешний сайт

```html
<a href="http://www.mozilla.com/">Внешняя ссылка</a>
```

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

Внешняя ссылка

### Создание кликабельной картинки

```html
<a href="https://developer.mozilla.org/ru/" target="\_blank">
  <img src="mdn\_logo.png" alt="MDN logo" />
</a>
```

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

### Создания ссылки для написания письма

```html
<a href="mailto:nowhere@mozilla.org">Отправить сообщение в никуда</a>
```

Результат выглядит примерно так: Отправить сообщение в никуда.

Для дополнительных деталей использования `mailto`, таких как тема, текст или другое, смотрите Email-ссылки или RFC 6068.

### Создание ссылки с номером телефона

С телефонами, способными выходить в Интернет и ноутбуками, которые привязаны к телефонам, ссылки с номером телефона становятся всё больше и больше полезными.

```html
<a href="tel:+491570156">+49 157 0156</a>
```

Для дополнительных деталей о протоколе `tel`, смотрите RFC 2806 и RFC 2396.

### Использование `download` для сохранения canvas как PNG

Если вы хотите позволить пользователю скачивать HTML canvas как картинку, вы можете создать ссылку с атрибутом `download` и данные canvas как `data: URL`:

```js
var link = document.createElement("a");
link.innerHTML = "download image";

link.addEventListener(
  "click",
  function (ev) {
    link.href = canvas.toDataURL();
    link.download = "mypainting.png";
  },
  false,
);

document.body.appendChild(link);
```

Вы можете посмотреть на это в действии: jsfiddle.net/codepo8/V6ufG/2/.

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

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

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

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

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

HTML 3.2 включает в себя только `name`, `href`, `rel`, `rev` и `title`.

Атрибут `target` не работает в браузерах, не поддерживающих фреймы, таких как Netscape 1 generation. Кроме того, `target` не допускается в «строгих» вариантах XHTML, но разрешён в формах frameset или «переходных» формах.

### Рекомендации по JavaScript

Часто якорь используется с событием `onclick`. Для избежания обновления страницы, `href` часто устанавливается на `#`, либо на `javascript:void(0)`. Оба этих значения могут привести к некоторым неожиданным ошибкам во время копирования ссылки или открытия ссылки в новой вкладке или окне. Помните об этом, чтобы сделать юзабилити удобнее, когда пользователи используют якори и вы не допускаете стандартного поведения.

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

* Другие элементы: `<abbr>`, `<em>`, `<strong>`, `<small>` (en-US), `<cite>`, `<q>` (en-US), `<dfn>`, `<time>`, `<code>`, `<var>` (en-US), `<samp>` (en-US), `<kbd>`, `<sub>` (en-US), `<sup>` (en-US), `<b>`, `<i>` (en-US), `<mark>`, `<ruby>`, `<rp>` (en-US), `<rt>` (en-US), `<bdo>`, `<span>`, `<br>`, `<wbr>`.


<option> - HTML

<option>
========

**HTML-элемент `<option>`** используется для определения пункта списка контейнера `<select>`, элемента `<optgroup>`, или элемента `<datalist>`. Элемент `<option>` может представлять раздел меню всплывающих окон и других перечней или списков HTML документа.

| Категория содержимого | Нет. |
| --- | --- |
| Допустимое содержимое | Текст, допускаются экранированные символы (например `é`). |
| Пропуск тегов | Открывающий тег обязателен. Закрывающий тег опционален если за этим элементом следует другой элемент `<option>`, или элемент `<optgroup>`, или если родительский элемент не имеет больше содержимого. |
| Допустимые родители | Элемент `<select>`, элемент `<optgroup>` или элемент `<datalist>`. |
| Допустимые ARIA-роли | Нет |
| DOM-интерфейс | `HTMLOptionElement` (en-US) |

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

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

`disabled` — отключён(о)

Если этот Boolean атрибут установлен, эта опция недоступна для выделения. Часто браузеры выделяют такой элемент управления серым цветом и ему недоступны любые события браузера, такие как клики мыши или события, связанные с фокусировкой. Если этот атрибут не установлен, этот элемент все ещё можно отключить (может не работать), если отключён внешний(one of its ancestors) элемент `<optgroup>`.

`label` — метка, ярлык

Этот атрибут - текст ярлыка, отображающий значение(смысл, описание) опции. Если `label` не указан (отсутствует), то его значение совпадает с текстовым содержанием элемента `<option>`.

`selected` — выбран(о)

(Если присутствует,) этот Boolean атрибут отображает то, что опция изначально выделена. Если элемент `<option>` принадлежит элементу `<select>`, чей атрибут `multiple` не установлен, только одна-единственная `<option>` элемента `<select>` может иметь атрибут `selected` .

`value` — значение, величина

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

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

См. `<select>` for examples.

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

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

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

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

See also
--------

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


<body> - HTML

<body>
======

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

|  |  |
| --- | --- |
| Категории контента | Секционный корень |
| Допустимое содержимое | Потоковый контент. |
| Пропуск тегов |
 Открывающий тег может быть пропущен, если первое, что находится внутри
 него, не является пробелом, комментарием, элементом
 `<script>` или элементом
 `<style>`. Закрывающий тег может быть пропущен
 если элемент `<body>` содержит контент или имеет
 открывающий тег, и за ним сразу не следует комментарий.
  |
| Допустимые родители |
 Этот элемент должен быть вторым в элементе
 `<html>` |
| Допустимые ARIA-роли | Отсутствуют |
| DOM-интерфейс | `HTMLBodyElement`* Элемент `<body>` представляет интерфейс
 `HTMLBodyElement`.
* Вы можете получить доступ к элементу `<body>` через
 свойство `document.body`.
 |

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

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

`alink`

Цвет текста гиперссылок, когда они выделены. *Этот метод не согласован, вместо него используйте CSS-свойство `color` (en-US) вместе с псевдоклассом `:active`.*

`background`

URI изображения для использования в качестве фона. *Этот метод не согласован, вместо него используйте CSS-свойство `background`.*

`bgcolor`

Цвет фона документа. *Этот метод не согласован, вместо него используйте CSS-свойство `background-color`.*

`bottommargin`

Отступ от нижнего края элемента `<body>`. *Этот метод не согласован, вместо него используйте CSS-свойство `margin-bottom`.*

`leftmargin`

Отступ от левого края элемента `<body>`. *Этот метод не согласован, вместо него используйте CSS-свойство `margin-left`.*

`link`

Цвет текста непосещенных гипертекстовых ссылок. *Этот метод не согласован, вместо него используйте CSS-свойство `color` (en-US) вместе с псевдоклассом `:link`.*

`onafterprint`

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

`onbeforeprint`

Функция для вызова, когда пользователь отправляет документ на печать.

`onbeforeunload`

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

`onblur`

Функция для вызова при потери документом фокуса.

`onerror`

Функция для вызова, когда документ не загружается должным образом.

`onfocus`

Функция для вызова, когда документ получает фокус.

`onhashchange`

Функция для вызова, когда изменяется часть идентификатора фрагмента (начинается с символа `'#'`) текущего адреса документа.

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

Функция для вызова при изменении предпочитаемых языков.

`onload`

Функция для вызова, когда документ закончил загрузку (страницы загружена).

`onmessage`

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

`onoffline`

Функция для вызова, когда происходит сбой сетевого соединения.

`ononline`

Функция для вызова, когда произошло восстановление сетевого соединения.

`onpopstate`

Функция для вызова, когда пользователь осуществил управление историей сеанса.

`onredo`

Функция для вызова, когда произошло продвижение пользователя вперёд по истории транзакций (например, обновление страницы).

`onresize`

Функция для вызова, когда размер документа был изменён.

`onstorage`

Функция для вызова, когда изменяется содержимое хранилища (Web Storage).

`onundo`

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

`onunload`

Функция для вызова, когда пользователь покидает страницу (закрытие вкладки или окна браузера).

`rightmargin`

Отступ от правого края элемента `<body>`. *Этот метод не согласован, вместо него используйте CSS-свойство `margin-right`.*

`text`

Основной цвет текста. *Этот метод не согласован, вместо него используйте CSS-свойство `color` (en-US).*

`topmargin`

Отступ от верхнего края элемента `<body>`. *Этот метод не согласован, вместо него используйте CSS-свойство `margin-top`.*

`vlink`

Цвет текста посещённой гипертекстовой ссылки. *Этот метод не согласован, вместо него используйте CSS-свойство `color` (en-US) вместе с псевдоклассом `:visited`.*

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

```html
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <p>Это параграф</p>
  </body>
</html>
```

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

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

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

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

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

* `<html>`
* `<head>`


<video> - HTML

<video>
=======

Для встраивания видео контента в документ используйте **элемент HTML <video>**. Видео элемент может содержать один или несколько источников видео. Чтобы указать источник видео, необходимо использовать атрибут **src** или элемент `<source>`; браузер сам определит наиболее подходящий источник.

Для просмотра списка поддерживаемых форматов, перейдите по ссылке Поддерживаемые аудио и видео элементами форматы мультимедийных файлов (en-US).

Контекст Использования
----------------------

* Допустимое содержимое. Если элемент имеет атрибут `src`: 0 или более элементов `<track>`, за которым следует прозрачный контент, который не содержит элементов мультимедиа: `<audio>` или `<video>`
 Иначе: 0 или более элементов `<source>`, за которыми следует 0 или более элементов `<track>`, затем прозрачным содержимым, которое не содержит элементы мультимедиа: `<audio>` или `<video>`.

| Content categories | Flow content, содержание фраз, встроенный контент. Если имеет атрибут `controls`: становится интерактивным элементом с осязаемым содержанием. |
| --- | --- |
| Tag omission | Нет, открывающий и закрывающий теги обязательны. |
| Допустимые родительские элементы | Любой элемент, который принимает встроенный контент. |
| DOM интерфейс | `HTMLVideoElement` |

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

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

`autoplay`

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

`autobuffer`
Non-standard

Логический атрибут; если указано, видео автоматически начнёт буферизацию, даже если оно не настроено на автоматический запуск. Используйте этот атрибут только тогда, когда очень вероятно, что пользователь будет смотреть видео. Видео буферизуется до тех пор, пока не заполнится кеш мультимедиа.

**Примечание:** несмотря на то, что в ранних версиях HTML5 атрибут `autobuffer` присутствовал, в последующих выпусках он был удалён. Также он был удалён из Gecko 2.0 и других браузеров, а в некоторых никогда не реализовывался. Спецификация определяет новый перечислимый атрибут `preload`, вместо `autobuffer` с другим синтаксисом. Firefox bug 548523

`buffered`

Атрибут для определения временных диапазонов буферизованных носителей. Этот атрибут содержит объект `TimeRanges` (en-US).

`controls`

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

`crossorigin`

This enumerated attribute indicates whether to use CORS to fetch the related image. CORS-enabled resources (en-US) can be reused in the `<canvas>` element without being *tainted*. The allowed values are:

anonymous

Sends a cross-origin request without a credential. In other words, it sends the `Origin:` HTTP header without a cookie, X.509 certificate, or performing HTTP Basic authentication. If the server does not give credentials to the origin site (by not setting the `Access-Control-Allow-Origin:` HTTP header), the image will be *tainted*, and its usage restricted.

use-credentials

Sends a cross-origin request with a credential. In other words, it sends the `Origin:` HTTP header with a cookie, a certificate, or performing HTTP Basic authentication. If the server does not give credentials to the origin site (through `Access-Control-Allow-Credentials:` HTTP header), the image will be *tainted* and its usage restricted.When not present, the resource is fetched without a CORS request (i.e. without sending the `Origin:` HTTP header), preventing its non-tainted used in `<canvas>` elements. If invalid, it is handled as if the enumerated keyword **anonymous** was used. See CORS settings attributes (en-US) for additional information.

`height`

Высота области отображения видео в пикселях.

`loop`

Логический атрибут; если указан, то по окончанию проигрывания, видео автоматически начнёт воспроизведение с начала.

`muted`

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

`played`

Атрибут `TimeRanges` (en-US), указывающий все диапазоны воспроизводимого видео.

`preload`

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

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

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

**Usage notes:**

    + The `autoplay` attribute has precedence over `preload`. If `autoplay` is specified, the browser would obviously need to start downloading the video for playback.
    + The specification does not force the browser to follow the value of this attribute; it is a mere hint.

`poster`

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

`src`

The URL of the video to embed. This is optional; you may instead use the `<source>` element within the video block to specify the video to embed.

`width`

Ширина области отображения видео в пикселях.

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

The `<video>` element can fire many different events (en-US).

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

```html
<!-- Simple video example -->
<video src="videofile.ogg" autoplay poster="posterimage.jpg">
  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="videofile.ogg">download it</a>
  and watch it with your favorite video player!
</video>

<!-- Video with subtitles -->
<video src="foo.ogg">
  <track kind="subtitles" src="foo.en.vtt" srclang="en" label="English" />
  <track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska" />
</video>
```

The first example plays a video, starting playback as soon as enough of the video has been received to allow playback without pausing to download more. Until the video starts playing, the image "posterimage.jpg" is displayed in its place.

The second example allows the user to choose between different subtitles.

Multiple Sources Example
------------------------

```html
<video
 width="480"
 controls
 poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif">
  <source
 src="https://archive.org/download/WebmVp8Vorbis/webmvp8\_512kb.mp4"
 type="video/mp4" />
  <source
 src="https://archive.org/download/WebmVp8Vorbis/webmvp8.ogv"
 type="video/ogg" />
  <source
 src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm"
 type="video/webm" />
  Your browser doesn't support HTML5 video tag.
</video>
```

You can try the preceding example on HTML5 video demo example with live preview code editor.

Server support
--------------

If the MIME type for the video is not set correctly on the server, the video may not show or show a gray box containing an X (if JavaScript is enabled).

If you use Apache Web Server to serve Ogg Theora videos, you can fix this problem by adding the video file type extensions to "video/ogg" MIME type. The most common video file type extensions are ".ogm", ".ogv", or ".ogg". To do this, edit the "mime.types" file in "/etc/apache" or use the "AddType" configuration directive in httpd.conf.
```

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg
```

If you serve your videos as WebM, you can fix this problem for the Apache Web Server by adding the extension used by your video files (".webm" is the most common one) to the MIME type "video/webm" via the "mime.types" file in "/etc/apache" or via the "AddType" configuration directive in httpd.conf.
```

AddType video/webm .webm
```

Your web host may provide an easy interface to MIME type configuration changes for new technologies until a global update naturally occurs.

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

Этот элемент реализует интерфейс `HTMLVideoElement`.

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

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

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

* Media formats supported by the audio and video elements (en-US)
* `<audio>`
* Using HTML5 audio and video (en-US)
* Manipulating video using canvas (en-US)
* `nsIDOMHTMLMediaElement`
* TinyVid - examples using ogg files in HTML5.
* The `video` element (HTML5 specification)
* Configuring servers for Ogg media (en-US)
* The state of HTML5 video


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

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

**HTML-элемент `<dd>`** (*от англ. Description Details*) предоставляет подробности или определение предшествующего термина (`<dt>`) в списке определений (`<dl>`).

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

| Категории контента | Нет |
| --- | --- |
| Допустимое содержимое | Потоковый контент |
| Пропуск тегов | Открывающий тег обязателен. Конечный тег может быть опущен, если за элементом `<dd>` непосредственно следует элемент `<dd>` или `<dt>`, или если в родительском элементе нет больше содержимого. |
| Допустимые родители | Элементы `<dl>` и `<div>`, находящийся внутри элемента `<dl>`. Может быть использован после `<dt>` или другого элемента `<dd>`. |
| Неявные ARIA-роли | `definition` (en-US) |
| Допустимые ARIA-роли | Нет |
| DOM-интерфейс | `HTMLElement` |

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

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

`nowrap`
Non-standard

Если значение атрибута установлено `yes`, текст определения не будет переноситься. Значение по умолчанию `no`.

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

Для примера смотрите образец для <dl> элемента (en-US).

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

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

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

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

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

* `<dl>`
* `<dt>`


<div>: базовый блочный элемент - HTML

<div>: базовый блочный элемент
==============================

**Элемент разделения контента HTML** (**`<div>`**) является универсальным контейнером для потокового контента. Он не влияет на контент или макет до тех пор, пока не будет стилизован с помощью CSS.

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

Являясь "чистым" контейнером, элемент `<div>`, по существу, не представляет ничего. Между тем, он используется для группировки контента, что позволяет легко его стилизовать, используя атрибуты `class` или `id`, помечать раздел документа, написанный на разных языках (используя атрибут `lang`), и так далее.

| Категории контента | Потоковый контент, явный контент. |
| --- | --- |
| Допустимое содержимое | Потоковый контент или (в WHATWG HTML), если родительским является элемент `<dl>`: один или несколько элементов `<dt>`, сопровождаемых одним или более элементами `<dd>`, в ряде случаев смешанных с элементами `<script>` и `<template>`. |
| Пропуск тегов | Ни одного; Оба тега, открывающий и закрывающий, являются обязательными. |
| Допустимые родители | Любой элемент, который разрешает потоковый контент в качестве содержимого.. Или (в WHATWG HTML): элемент `<dl>`. |
| Допустимые ARIA-роли | Любые |
| DOM-интерфейс | `HTMLDivElement` |

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

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

**Примечание:** Атрибут `align` устарел и вышел из употребления; не используйте его больше. Вместо этого, вам следует использовать свойства CSS или методы, такие как CSS Grid или CSS Flexbox для выравнивания и изменения положения элементов `<div>` на странице.

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

* Элемент `<div>` следует использовать только в том случае, если никакой другой семантический элемент (такой как `<article>` или `<nav>`) не подходит.
Примеры
-------

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

```html
<div>
  <p>Любой тип контента. Например, <p>, <table>. Все что угодно!</p>
</div>
```

Результат будет выглядеть так:

### Стилизованный пример

Этот пример создаёт прямоугольник с тенью, применяя стили к `<div>` с помощью CSS. Заметьте, что использование атрибута `class` на элементе `<div>` даёт применение стилей `"shadowbox"` (в дословном переводе означает "теневая коробка") к элементу.

#### HTML

```html
<div class="shadowbox">
  <p>Вот очень интересная заметка в прекрасном прямоугольнике с тенью.</p>
</div>
```

#### CSS

```css
.shadowbox {
  width: 15em;
  border: 1px solid #333;
  box-shadow: 8px 8px 5px #444;
  padding: 8px 12px;
  background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
}
```

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

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

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

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

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

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

* Семантические секционные элементы: `<section>`, `<article>`, `<nav>`, `<header>`, `<footer>`
* Элемент `<span>` для стилизации фразового контента.


<hgroup> - HTML

<hgroup>
========

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

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

HTML <hgroup> Элемент (HTML Headings Group Element - Элемент Группы Заголовков HTML) представляет заголовок раздела. Он определяет один заголовок, который участвует в схеме документа как заголовок явно или неявно заданного раздела, к которому он принадлежит.

Собственно текст для схематического алгоритма - это текст первого элемента заголовка HTML наивысшего ранга (т. Е. Первый `<h1>` (en-US), `<h2>` (en-US),  h3 ,  h4 ,  h5  или  h6  с наименьшим числом потомков), а rank - уровень этого элемента заголовка HTML.

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

| Категория информации | Flow content (en-US), heading content, palpable content. |
| --- | --- |
| Permitted content | One or more `<h1>` (en-US), `<h2>` (en-US), `<h3>` (en-US), `<h4>` (en-US), `<h5>` (en-US), and/or `<h6>` (en-US). |
| Tag omission | Нет, открывающий и закрывающий теги обязательны. |
| Permitted parent elements | Any element that accepts flow content (en-US). |
| DOM interface | `HTMLElement` |

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

This element only includes the global attributes (en-US).

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

```html
<hgroup>
  <h1>Главный заголовок</h1>
  <h2>Вторичный заголовок</h2>
</hgroup>
```

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

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

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

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


<map> - HTML

<map>
=====

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

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

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

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

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

`name`

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

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

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

Живой пример
------------

### Ожидаемые выходные данные

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

*Для ссылки `left.html`:*
![](/ru/docs/Web/HTML/Element/map/screen_shot_2017-02-02_at_10.48.40_pm.png)

*Для ссылки `right.html`:*
![](/ru/docs/Web/HTML/Element/map/screen_shot_2017-02-02_at_10.49.04_pm.png)

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

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

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

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

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

* `<a>`
* `<area>`


<label> - HTML

<label>
=======

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

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

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

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

`for`

ID labelable-элемента, который находится в том же документе, что и элемент label. Первый такой элемент в документе, ID которого совпадает со значением атрибута `for`, становится `labeled-*` контролом для данного `label`.

**Примечание:** Элемент *label* может иметь как атрибут *for*, так и отдельный элемент управления, если атрибут *for* указывает на содержащийся элемент управления.

`form`

Элемент формы, с которым связан label (его владелец формы). Если указано, значением атрибута является идентификатор элемента `<form>` в том же документе. Это позволяет размещать элементы label в любом месте документа, а не только как потомки их элементов формы.

**Примечание:** Этот атрибут содержимого был удалён из спецификации HTML 28 апреля 2016 г. Однако сценарии по-прежнему имеют доступ только для чтения `HTMLLabelElement.form` (en-US); он возвращает форму, членом которой является связанный элемент управления label, или значение NULL, если label не связана с элементом управления или элемент управления не является частью формы.

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

* <label> можно связать с элементом управления, поместив элемент управления внутри элемента <label> или используя атрибут `for`. Такой элемент управления называется помеченным элементом управления надписью. Один вход может быть связан с несколькими метками.
* Метки сами по себе не связаны с формами. Они только косвенно связаны с формами через элементы управления, с которыми они связаны.
Examples
--------

### Simple label example

```html
<label>Click me <input type="text" /></label>
```

### Using the "for" attribute

```html
<label for="username">Click me</label> <input type="text" id="username" />
```

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

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

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

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

See also
--------

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


<form> - HTML

<form>
======

Резюме
------

*Элемент HTML form* (`<form>`) представляет (собой) раздел документа, содержащий интерактивные элементы управления, которые позволяют пользователю отправлять информацию на веб-сервер.

Можно использовать `:valid` (en-US) и `:invalid` (en-US) CSS псевдоклассы для стилизации `<form>` элемента, в зависимости от того, валиден или нет конкретный элемент `elements` внутри формы.

Контекст Использования
----------------------

| Категория содержимого | Flow content (en-US) |
| --- | --- |
| Разрешённое содержимое | Flow content (en-US), но не содержащий `<form>` элементов |
| Пропуск тега | Нет. И открывающий и закрывающий тег должны быть. |
| Нормативный документ | HTML5, section 4.10.3 (HTML4.01, section 17.3) |

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

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

`accept`

Список типов содержимого, разделённых запятой, которые принимает сервер.

**Примечание:** Этот атрибут был удалён в HTML5 и его не следует больше использовать. Взамен, используйте `accept` атрибут заданного `<input>` элемента.

`accept-charset`

 Разделённые пробелами символьные кодировки, которые принимает сервер. Браузер использует их в том порядке, в котором они перечислены. Значение по умолчанию означает ту же кодировку что и у страницы.
 (В предыдущей версии HTML, различные кодировки могли быть разделены запятыми.)

`action`

URI-адрес программы, которая обрабатывает информацию переданную через форму. Это значение может быть переписано с помощью атрибута `formaction` на `<button>` или `<input>` элементе.

`autocomplete`

Указывает, могут ли элементы управления автоматически быть дописаны в форме браузером. Эта настройка может быть переписана с помощью атрибута `autocomplete` на элементе формы. Возможные значения:

* `off`: Пользователь должен явно ввести значение в каждое поле или документ предоставит свой собственный метод автодополнения; браузер автоматически не дополняет записи.
* `on`: Браузер может автоматически дополнить значения, основанные на значениях, которые пользователь уже вводил, в течение предыдущего использования формы.

>
> \*\*Примечание:\*\*Если вы установили значение `off` `для` `autocomplete` атрибута формы, из-за того, что документ предоставляет своё собственное автодополнение, то вам следует также установить значение `off` для `autocomplete` каждого `<input>` элемента формы, которые документ может автоматически дополнить. Подробнее, смотрите Google Chrome notes.
>
>
>

`enctype`

Когда значение атрибута method равно `post`, атрибут - MIME тип содержимого, которое используется, чтобы передать форму на сервер. Возможные значения:

* `application/x-www-form-urlencoded`: Значение по умолчанию, если атрибут не задан.
* `multipart/form-data`: Используйте это значение, если пользуетесь элементом `<input>` атрибутом `type` установленным в "file".
* `text/plain (HTML5)` Это значение может быть переписано атрибутом `formenctype` на элементе `<button>` или `<input>`.

`method`

HTTP (en-US) метод, который браузер использует, для отправки формы. Возможные значения:

* `post`: Соответствует HTTP POST методу ; данные из формы включаются в тело формы и посылаются на сервер.
* `get`: Соответствует GET методу; данные из формы добавляются к URI атрибута `action`, их разделяет '?', и полученный URI посылается на сервер. Используйте этот метод, когда форма содержит только ASCII символы и не имеет побочного эффекта.Это значение может быть переписано атрибутом `formmethod` на `<button>` или `<input>` элементе.

`name`

Имя формы. В HTML 4 его использование запрещено (`id` следует использовать взамен). Оно должно быть уникальным и не пустым среди всех форм в документе в HTML 5.

`novalidate`

Это Boolean атрибут показывает, что форма не проверяется на валидность, когда отправляется серверу. Если атрибут пропущен (и поэтому форма проверяется), эта настройка по умолчанию, может быть переписана атрибутом `formnovalidate` на `<button>` или `<input>` элементе, принадлежащем форме.

`target`

Имя или ключевое слово, показывающее где отображать ответ, который будет получен, после отправки формы. В HTML 4, это имя или ключевое слово для фрейма. В HTML5, это имя или ключевое слово, *контекста* *просмотра* (например, вкладка, окно, или линейный фрейм). Следующие ключевые слова имеют специальное значение:

* `_self`: Загружает ответ в том же самом фрейме HTML 4 (или HTML5 контексте просмотра) как текущий. Это значение по умолчанию, если атрибут не указан.
* `_blank`: Загружает ответ в новом безымянном окне HTML 4 или HTML5 контексте просмотра.
* `_parent`: Загружает ответ HTML 4 в родительском наборе фрейма для текущего фрейма или HTML5 родительский контекст просмотра для текущего просмотра. Если нет предка, эта опция действует точно так же как as `_self`.
* `_top`: HTML 4: Загружает ответ в полное, оригинальное окно, закрывая все другие фреймы. HTML5: Загружает ответ в верхний уровень контекста просмотра (т.е., контекст просмотра это предок текущего и не имеет других предков). Если нет предка, эта опция действует точно так же как as `_self`.HTML5: Это значение может быть перезаписано `formtarget` атрибутом на `<button>` или `<input>` элементе.

DOM\_interface
--------------

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

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

```html
<!-- Простая форма, которая пошлёт GET запрос -->
<form action="">
  <label for="GET-name">Name:</label>
  <input id="GET-name" type="text" name="name" />
  <input type="submit" value="Save" />
</form>

<!-- Простая форма, которая пошлёт POST запрос -->
<form action="" method="post">
  <label for="POST-name">Name:</label>
  <input id="POST-name" type="text" name="name" />
  <input type="submit" value="Save" />
</form>

<!-- Форма с fieldset, legend, и label -->
<form action="" method="post">
  <fieldset>
    <legend>Title</legend>
    <input type="radio" name="radio" id="radio" />
    <label for="radio">Click me</label>
  </fieldset>
</form>
```

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

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

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

* Другие элементы, которые используются для создания форм: `<button>`, `<datalist>`, `<fieldset>`, `<input>`, `<label>`, `<legend>`, `<meter>`, `<optgroup>`, `<option>`, `<output>`, `<progress>`, `<select>`, `<textarea>` (en-US).


<dfn>: Элемент определения - HTML

<dfn>: Элемент определения
==========================

**Элемент определения HTML** (***<dfn>***) используется для указания термина, определяемого в контексте фразы или предложения. Элемент`<p>`, пара`<dt>`/`<dd>` или `<section>` элемент, который является ближайшим предком `<dfn>` считается определением термина.

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

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

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

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

В HTML5 `title` атрибут имеет особое значение, как указано ниже.

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

Есть несколько не совсем очевидных аспектов использования элемента `<dfn>`. Мы рассмотрим их здесь.

### Определяемый термин

Определяемый термин устанавливается в соответствии с этими правилами:

1. Если `<dfn>` элемент имеет `title` атрибут, значение атрибута `title` считается определяемым термином. Элемент должен по-прежнему иметь текст внутри него, но этот текст может быть аббревиатурой (возможно, с использованием`<abbr>`) или другой формой термина.
2. Если объект `<dfn>` содержит единственный дочерний элемент и не имеет собственного текстового содержимого, а дочерний элемент является `<abbr>` элементом с атрибутом `title`, то строго значение `title` `<abbr>` элемента является определяемым термином.
3. В противном случае текстовое содержимое `<dfn>` элемента является определяемым термином. Это показано в примере ниже.

**Примечание:** Если `<dfn>` элемент имеет атрибут `title`, он *должен* содержать определяемый термин и никакой другой текст.

### Ссылки на `<dfn>` элементы

Если вы включаете атрибут `id` в `<dfn>` элемент, вы можете ссылаться на него, используя `<a>` элементы. Они должны ссылаться на использование термина, чтобы читатель смог быстро перейти к определению термина, если он ещё не знает его, нажав на ссылку термина.

Это показано ниже в примере Ссылки на определения.

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

Давайте рассмотрим несколько примеров различных сценариев использования.

### Базовая идентификация термина

В этом примере просто используется `<dfn>` элемент для нахождения местоположения термина в определении.

#### HTML

```html
<p>
  <strong>Элемент определения HTML</strong> (<strong
 ><dfn><dfn></dfn></strong
 >) используется для обозначения термина, определяемого в контексте фразы или
  предложения.
</p>
```

Поскольку `<dfn>` элемент не имеет `title`, текстовое содержимое самого `<dfn>` элемента используется в качестве определяемого термина.

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

Это выглядит так в вашем браузере:

### Ссылки на определения

Чтобы добавить ссылки к определениям, вы создаёте ссылку так же, как и всегда, с `<a>` элементом.
Элемент определения HTML `(<strong><dfn><dfn></dfn></strong>)` используется для обозначения термина, определяемого в контексте фразы или предложения.

#### HTML

```html
<p>
  <strong>Элемент определения HTML</strong> (<strong
 ><dfn id="definition-dfn"><dfn></dfn></strong
 >) используется для обозначения термина, определяемого в контексте фразы или
  предложения.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Graece donan, Latine
  voluptatem vocant. Confecta res esset. Duo Reges: constructio interrete.
  Scrupulum, inquam, abeunti;
</p>

<p>
  Negare non possum. Dat enim intervalla et relaxat. Quonam modo? Equidem e Cn.
  Quid de Pythagora? In schola desinis.
</p>

<p>
  Ubi ut eam caperet aut quando? Cur iustitia laudatur? Aperiendum est igitur,
  quid sit voluptas; Quid enim? Non est igitur voluptas bonum. Urgent tamen et
  nihil remittunt. Quid enim possumus hoc agere divinius?
</p>

<p>
  Из-за всего этого мы решили использовать элемент
  <code><a href="#definition-dfn"><dfn></a></code> для этого проекта.
</p>
```

Здесь мы видим определение - теперь с атрибутом `id` `«definition-dfn»`, который может использоваться в качестве цели для ссылки. Позднее создаётся ссылка с использованием `<a>` и с `href`атрибутом, установленным на `«#definition-dfn»`, чтобы установить ссылку обратно на определение.

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

Полученный контент выглядит так:

### Использование сокращений и определений вместе

В некоторых случаях вы можете использовать сокращение для термина при его определении. Это можно сделать с помощью `<dfn>` и `<abbr>` элементов вместе, например так:

#### HTML

```html
<p>
  <dfn><abbr title="Hubble Space Telescope">HST</abbr></dfn> является одним из
  самых производительных научных инструментов, когда-либо созданных. Он
  находится на орбите более 20 лет, просматривая небо и отправляя данные и
  фотографии беспрецедентного качества и детализации.
</p>

<p>
  Действительно, HST, возможно,
  <abbr title="Hubble Space Telescope"></abbr> сделал больше для развития науки,
  чем любое другое устройство, когда-либо созданное.
</p>
```

Обратите внимание на `<abbr>` элемент, вложенный в `<dfn>`. Первый устанавливает, что термин является аббревиатурой («HST») и определяет полный термин («Hubble Space Telescope (Космический телескоп „Хаббл")») в своём атрибуте `title`. Последнее указывает на то, что сокращённый термин представляет собой определяемый термин.

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

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

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

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

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

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

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

* Элементы, связанные со списками определений: `
``
``
`
* `<abbr>`


<meter> - HTML

<meter>
=======

**HTML-элемент `<meter>`** представляет собой скалярное значение в пределах известного диапазона или дробного значения.

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

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

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

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

`value`

Текущее числовое значение. Он должен быть между минимальным и максимальным значением (`min` атрибут и `max` атрибут), если они указаны. Если он не указан или имеет неверное значение, значение равно 0. Если указан, но не в пределах диапазона, заданного атрибутами `min` и `max`, значение будет равно ближайшему концу диапазона.

**Примечание:** Если атрибут `value` не находится в диапазоне от `0` до `1` (включительно), то атрибуты `min` и `max` должны определять диапазон, в котором будет находиться значение `value`.

`min`

Нижняя числовая граница измеряемого диапазона. Он должен быть меньше, чем максимальное значение (`max` атрибут), если указан. Если не определён, то минимальное значение равно 0.

`max`

Верхняя числовая граница измеряемого диапазона. Он должен быть больше, чем минимальное значение (`min` атрибут), если указан. Если не определён, то максимальное значение равно 1.

`low`

Верхняя числовая граница нижнего предела измеряемого диапазона. Он должен быть больше, чем минимальное значение (`min` атрибут), а также, меньше, чем значение high и максимальное значение(`high` атрибут и `max` атрибут, соответственно), если они указаны. Если не указан или меньше минимального значения, то значение `low` равно минимальному значению.

`high`

Нижняя числовая граница верхнего предела измеряемого диапазона. Он должен быть меньше, чем максимальное значение (`max` атрибут), а также, больше, чем значение low и минимальное значение (`low` атрибут и **min** атрибут, соответственно), если они указаны. Если не указан или больше максимального значения, то значение `high` равно максимальному значению.

`optimum`

Этот атрибут указывает оптимальное числовое значение. Он должен находиться в пределах диапазона (который определён атрибутами `min` и `max`). При использовании с атрибутами `low` и `high`, он указывает какая часть диапазона является предпочтительной. Например, если он находится между атрибутами `min` и `low`, нижний диапазон является предпочтительным.

`form`

Этот атрибут связывает элемент с элементом `form`, частью которого является элемент `meter`. Например, `meter` может отображать диапазон, соответствующий элементу `input` с `type` *number*. Этот атрибут используется только в случае, если элемент `meter` используется как элемент, связанный с формой; даже в этом случае он может быть опущен, если элемент является потомком элемента `form`.

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

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

#### HTML

```html
<p>
  Heat the oven to <meter min="200" max="500" value="350">350 degrees</meter>.
</p>
```

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

В Google Chrome, результат будет выглядеть приблизительно так:

![](/ru/docs/Web/HTML/Element/meter/screen_shot_2020-10-12_at_10.10.53_pm.png)

### Пример с диапазоном

Обратите внимание, что в этом примере атрибут **min** опущен; это разрешено, так как по умолчанию он будет равен 0.

#### HTML

```html
<p>
  He got a <meter low="69" high="80" max="100" value="84">B</meter> on the exam.
</p>
```

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

В Google Chrome, результат будет выглядеть приблизительно так:

![](/ru/docs/Web/HTML/Element/meter/screen_shot_2020-10-12_at_10.11.52_pm.png)

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

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

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

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

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

* `<progress>`


<slot> - HTML

<slot>
======

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

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

* Learn more
* See full compatibility
* Report feedback
HTML-элемент `<slot>` является частью набора технологии Web Components, является заполнителем внутри веб компонента, который можно заполнить собственной разметкой, которая позволяет создавать отдельные деревья DOM и представлять их вместе.

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

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

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

`name`

Название слота.***Именованный слот*** это элемент `<slot>` с атрибутом `name`.

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

```html
<template id="element-details-template">
  <style>
 details {
 font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
 }
 .name {
 font-weight: bold;
 color: #217ac0;
 font-size: 120%;
 }
 h4 {
 margin: 10px 0 -8px 0;
 background: #217ac0;
 color: white;
 padding: 2px 6px;
 border: 1px solid #cee9f9;
 border-radius: 4px;
 }
 .attributes {
 margin-left: 22px;
 font-size: 90%;
 }
 .attributes p {
 margin-left: 16px;
 font-style: italic;
 }
 </style>
  <details>
    <summary>
      <code class="name"
 ><<slot name="element-name">NEED NAME</slot>></code
 >
      <i class="desc"><slot name="description">NEED DESCRIPTION</slot></i>
    </summary>
    <div class="attributes">
      <h4>Attributes</h4>
      <slot name="attributes"><p>None</p></slot>
    </div>
  </details>
  <hr />
</template>
```

**Примечание:** вы можете увидеть этот полный пример в действии на странице element-details (смотрите его в режиме реального времени). Кроме того, вы можете найти в разделе Использование шаблонов и слотов (en-US).

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

| Specification |
| --- |
| HTML Standard # the-slot-element |
| DOM Standard # shadow-tree-slots |

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

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


<dl>: Элемент списка описаний - HTML

<dl>: Элемент списка описаний
=============================

**HTML-элемент `<dl>`** (*от англ.* *Description List*) представляет собой список описаний. Этот элемент служит контейнером для списка пар терминов (определяемых элементом `<dt>`) и их описаний (определяемых элементами `<dd>`). Этот элемент обычно используют при создании глоссария или для отображения метаданных (списка пар ключ-значение).

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

| Категории контента | Потоковый контент, и если потомки элемента `<dl>` включают одну группу имя-значение явный контент. |
| --- | --- |
| Допустимое содержимое | Либо: Ноль или более групп каждая из которых состоит из одного или более элементов `<dt>` за которым следует один или более элементов `<dd>`, необязательно смешанных с элементами `<script>` и `<template>`. Либо: Один или более элементов `<div>`, необязательно смешанных с элементами `<script>` и `<template>`. |
| Пропуск тегов | Нет, открывающий и закрывающий теги обязательны. |
| Допустимые родители | Любой элемент который принимает потоковый контент. |
| Допустимые ARIA-роли | `group (en-US)`, `presentation (en-US)` |
| DOM-интерфейс | `HTMLDListElement` (en-US) |

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

Для данного элемента доступны только глобальные атрибуты.

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

### Одиночные термин и определение

```html
<dl>
  <dt>Firefox</dt>
  <dd>
    A free, open source, cross-platform, graphical web browser developed by the
    Mozilla Corporation and hundreds of volunteers.
  </dd>

  <!-- Other terms and descriptions -->
</dl>
```

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

```html
<dl>
  <dt>Firefox</dt>
  <dt>Mozilla Firefox</dt>
  <dt>Fx</dt>
  <dd>
    A free, open source, cross-platform, graphical web browser developed by the
    Mozilla Corporation and hundreds of volunteers.
  </dd>

  <!-- Other terms and descriptions -->
</dl>
```

### Одиночный термин со множественными определениями

```html
<dl>
  <dt>Firefox</dt>
  <dd>
    A free, open source, cross-platform, graphical web browser developed by the
    Mozilla Corporation and hundreds of volunteers.
  </dd>
  <dd>
    The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, is a
    mostly herbivorous mammal, slightly larger than a domestic cat (60 cm long).
  </dd>

  <!-- Other terms and descriptions -->
</dl>
```

### Множественные термины и определения

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

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

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

```html
<dl>
  <dt>Name</dt>
  <dd>Godzilla</dd>
  <dt>Born</dt>
  <dd>1952</dd>
  <dt>Birthplace</dt>
  <dd>Japan</dd>
  <dt>Color</dt>
  <dd>Green</dd>
</dl>
```

Подсказка: Может быть полезно задать разделитель для пары ключ-значение при помощи CSS3, например:

```css
dt:after {
  content: ": ";
}
```

### Оборачивание групп имя-значение в `<div>` элементы

WHATWG HTML разрешает оборачивать каждую группу имя-значение в элементе `<dl>` в элемент `<div>`. Это может быть полезно, когда используются микроданные (en-US) или когда глобальные атрибуты применяются к целой группе, или для стилевых целей.

```html
<dl>
  <div>
    <dt>Name</dt>
    <dd>Godzilla</dd>
  </div>
  <div>
    <dt>Born</dt>
    <dd>1952</dd>
  </div>
  <div>
    <dt>Birthplace</dt>
    <dd>Japan</dd>
  </div>
  <div>
    <dt>Color</dt>
    <dd>Green</dd>
  </div>
</dl>
```

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

Не используйте данный элемент (как и элемент `<ul>`) просто для создания отступов на странице. Не смотря на то, что это работает, — это является плохой практикой и подменяет семантическое значение списка определений.

Чтобы изменить отступ определений терминов, воспользуйтесь CSS - свойством `margin`.

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

Каждый скринридер произносит содержимое элемента `<dl>` по-разному. Некоторые скринридеры, такие как VoiceOver на iOS, не будут озвучивать, что содержимое `<dl>` это список. В связи с этим, убедитесь, что содержимое каждого элемента списка написано таким образом, что оно сообщает о своём отношении с другими элементами списка в списке группы.

* CodePen - HTML Buddies: dt & dd
Спецификации
------------

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

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

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

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

* Элемент `<dt>`
* Элемент `<dd>`


<marquee> - HTML

<marquee>
=========

Определение
-----------

HTML-элемент `<marquee>` используется для создания на странице прокручивающегося текста (бегущей строки).

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

`behavior`

Описывает поведение прокрутки. Допустимые значения: `scroll`, `slide` `и alternate`. Если значение не указано, то используется `scroll`.

`bgcolor`

Задаёт цвет фона (можно использовать имя цвета или шестнадцатеричное значение).

`direction`

Задаёт направление прокрутки. `Допустимые значения: left`, `right`, `up` и `down`. Если значение не указано, то используется `left`.

`height`

Задаёт высоту в пикселях или процентах.

`hspace`

Задаёт поле (margin) слева.

`loop`

Задаёт количество прокруток. Если значение не указано, то используется -1, что означает бесконечную прокрутку

`scrollamount`

Задаёт сдвиг на каждом шаге в пикселях. По умолчанию 6.

`scrolldelay`

Задаёт интервал между каждым шагом в миллисекундах. По умолчанию 85. Обратите внимание, что значения меньше 60 будут проигнорированы и будет использовано 60, если не присутствует атрибут `truespeed`.

`truespeed`

По умолчанию значения меньше 60 в `scrolldelay` игнорируются. Однако, если присутствует `truespeed`, то они не игнорируются

`vspace`

Задаёт вертикальный отступ (margin) в пикселях или процентах.

`width`

Задаёт ширину в пикселях или процентах.

Обработчики событий
-------------------

`onbounce`

Срабатывает, когда marquee достиг конечного состояния. Срабатывает только в случаях, когда `behavior` имеет значение `alternate`.

`onfinish`

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

`onstart`

Срабатывает в начале прокрутки.

Методы
------

start

Запускает прокрутку marquee.

stop

Останавливает прокрутку marquee.

Examples
--------

```html
<marquee>This text will scroll from right to left</marquee>

<marquee direction="up">This text will scroll from bottom to top</marquee>

<marquee
 direction="down"
 width="250"
 height="200"
 behavior="alternate"
 style="border:solid">
  <marquee behavior="alternate">This text will bounce</marquee>
</marquee>
```

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

| Specification |
| --- |
| HTML Standard # the-marquee-element-2 |

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

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


<header> - HTML

<header>
========

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

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

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

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

Элемент `<header>` не относится к секционному контенту , а значит не создаёт новый раздел в структуре HTML-документа. При этом элемент `<header>` обычно должен содержать заголовок ближайшего раздела (элементы `h1`-`h6`), но это **не** обязательно.

### Историческое употребление

Несмотря на то, что элемент `<header>` не попал в спецификации до HTML5, на самом деле, он существовал с самого начала HTML. Первоначально, на самом первом веб-сайте он использовался как элемент `<head>`. В какой-то момент было принято решение использовать другое имя. Позже, это позволило `<header>` занять другую роль.

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

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

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

### Заголовок страницы

```html
<header>
  <h1>Заголовок главной страницы</h1>
  <img src="mdn-logo-sm.png" alt="MDN logo" />
</header>
```

### Заголовок статьи

```html
<article>
  <header>
    <h2>Планета Земля</h2>
    <p>Опубликовано в среду, 4 октября 2017, Джейн Смит</p>
  </header>
  <p>
    Мы живём на сине-зелёной планете, на которой до сих пор так много
    неизведанного.
  </p>
  <p>
    <a href="https://janesmith.com/the-planet-earth/">Продолжить чтение...</a>
  </p>
</article>
```

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

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

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

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

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

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


<h1>–<h6>: заголовки разделов - HTML

<h1>–<h6>: заголовки разделов
=============================

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

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

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

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

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

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

* Информация о заголовках может использоваться пользовательскими агентами для автоматического создания оглавления документа.
* Не используйте элементы заголовков для управления размером шрифта. Для этих целей следует применять CSS-свойство `font-size`.
* Не пропускайте уровни заголовков: всегда начинайте с `<h1>`, потом используйте `<h2>` и так далее.
### Избегайте использования нескольких элементов `<h1>` на одной странице

Использование нескольких элементов `<h1>` на одной странице разрешено стандартом HTML (если они не вложены друг в друга), но это считается плохой практикой. Хорошо, когда на странице есть единственный элемент `<h1>`, который описывает содержимое этой страницы (по аналогии с элементом `<title>`).

**Примечание:** Использование нескольких элементов `<h1>` во вложенных элементах разделов было разрешено в старых версиях стандарта HTML. Однако это никогда не считалось хорошей практикой, а теперь не соответствует требованиям. Больше информации об этом в статье There Is No Document Outline Algorithm.

Старайтесь использовать один элемент `<h1>` на странице и вложенные заголовки без пропуска уровней.

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

### Все заголовки

Следующий код показывает все уровни заголовков в действии.

```html
<h1>Заголовок уровня 1</h1>
<h2>Заголовок уровня 2</h2>
<h3>Заголовок уровня 3</h3>
<h4>Заголовок уровня 4</h4>
<h5>Заголовок уровня 5</h5>
<h6>Заголовок уровня 6</h6>
```

### Пример страницы

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

```html
<h1>Элементы заголовков</h1>
<h2>Краткое содержание</h2>
<p>Обычный текст...</p>

<h2>Примеры</h2>
<h3>Пример 1</h3>
<p>Обычный текст...</p>

<h3>Пример 2</h3>
<p>Обычный текст...</p>

<h2>Смотрите также</h2>
<p>Обычный текст...</p>
```

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

### Навигация

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

**Неправильно:**

```html
<h1>Заголовок уровня 1</h1>
<h3>Заголовок уровня 3</h3>
<h4>Заголовок уровня 4</h4>
```

**Правильно:**

```html
<h1>Заголовок уровня 1</h1>
<h2>Заголовок уровня 2</h2>
<h3>Заголовок уровня 3</h3>
```

#### Вложенность

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

1. `h1` Жуки
    1. `h2` Этимология
    2. `h2` Распределение и разнообразие
    3. `h2` Эволюция
        1. `h3` Поздний палеозой
        2. `h3` Юрский период
        3. `h3` Меловой период
        4. `h3` Кайнозойский период
    4. `h2` Внешняя морфология
        1. `h3` Голова
            1. `h4` Рот
        2. `h3` Туловище
            1. `h4` Переднегрудь
            2. `h4` Птероторакс
        3. `h3` Ноги
        4. `h3` Крыла
        5. `h3` Живот

Когда заголовки вложены, уровни заголовков могут быть «пропущены» при закрытии подраздела.

* MDN Understanding WCAG, Guideline 1.3 explanations (en-US)
* MDN Understanding WCAG, Guideline 2.4 explanations (en-US)
* Headings • Page Structure • WAI Web Accessibility Tutorials
* Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0
* Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0
* Understanding Success Criterion 2.4.6 | W3C Understanding WCAG 2.0
* Understanding Success Criterion 2.4.10 | W3C Understanding WCAG 2.0
### Маркировка разделов содержимого

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

Разделы содержимого могут быть размечены с помощью комбинации атрибутов `aria-labelledby` (en-US) и `id`, с кратко описывающим назначение раздела значением. Этот метод полезен в ситуациях, когда на одной странице имеется более одного элемента секционирования.

#### Примеры секционированного содержимого

```html
<header>
  <nav aria-labelledby="primary-navigation">
    <h2 id="primary-navigation">Основная навигация</h2>
    <!-- Элементы навигации -->
  </nav>
</header>

<!-- Содержимое страницы -->

<footer>
  <nav aria-labelledby="footer-navigation">
    <h2 id="footer-navigation">Вторичная навигация</h2>
    <!-- Элементы навигации -->
  </nav>
</footer>
```

В этом примере технология чтения с экрана определила бы, что есть два раздела `<nav>`, один называется «Основная навигация», а другой — «Вторичная навигация». Если атрибуты доступности не были установлены, то человеку, использующему программу для чтения с экрана, возможно придётся исследовать каждый элемент `nav`, чтобы определить его назначение.

* Using the aria-labelledby attribute (en-US)
* Labeling Regions • Page Structure • W3C WAI Web Accessibility Tutorials
Спецификации
------------

| Specification |
| --- |
| HTML Standard # the-h1,-h2,-h3,-h4,-h5,-and-h6-elements |

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

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

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

* `<p>`
* `<div>`
* `<section>`


<nav> - элемент навигации - HTML

<nav> - элемент навигации
=========================

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

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

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

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

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

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

В данном примере, блок `<nav>` содержит ненумерованный список (`<ul>`) ссылок. С помощью CSS данный блок можно использовать как сайдбар, навигационную колонку или выпадающее меню.

```html
<nav class="menu">
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">О нас</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>
```

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

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

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

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

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

* Другие секционные элементы: `<body>`, `<article>`, `<section>`, `<aside>`, `<h1>` (en-US), `<h2>` (en-US), `<h3>` (en-US), `<h4>` (en-US), `<h5>` (en-US), `<h6>` (en-US), `<hgroup>`, `<header>`, `<footer>`, `<address>`;
* Разделы и структура документа HTML5.


<p>: Элемент текстового абзаца - HTML

<p>: Элемент текстового абзаца
==============================

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

Абзацы являются блочными элементами и, в частности, автоматически закрываются, если другой блочный элемент находится перед закрывающим тегом `</p>`. Смотрите ниже "Пропуск тега".

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

| Категории контента | Потоковый контент, явный контент. |
| --- | --- |
| Допустимое содержимое | Фразовый контент. |
| Пропуск тегов | Требуется открывающий тег. Закрывающий тег может быть пропущен, если за элементом `<p>` сразу следует элемент `<address>`, `<article>`, `<aside>`, `<blockquote>`, `<div>`, `<dl>`, `<fieldset>`, `<footer>`, `<form>`, `<h1>` (en-US), `<h2>` (en-US), `<h3>` (en-US), `<h4>` (en-US), `<h5>` (en-US), `<h6>` (en-US), `<header>`, `<hr>`, `<menu>`, `<nav>`, `<ol>`, `<pre>`, `<section>`, `<table>` (en-US), `<ul>` или другой элемент `<p>`, или если в родительском элементе больше ничего не содержится и родительский элемент не является элементом `<a>`. |
| Допустимые родители | Любой элемент, который разрешает потоковый контент в качестве содержимого. |
| Допустимые ARIA-роли | Любые |
| DOM-интерфейс | `HTMLParagraphElement` (en-US) |

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

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

**Примечание:** Атрибут `align` в тегах `<p>` устарел и больше не должен с использоваться.

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

### HTML

```html
<p>
  Это первый абзац текста. Это первый абзац текста. Это первый абзац текста. Это
  первый абзац текста.
</p>
<p>
  Это второй абзац текста. Это второй абзац текста. Это второй абзац текста. Это
  второй абзац текста.
</p>
```

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

Стилизация абзацев
------------------

По умолчанию браузеры разделяют абзацы одной пустой строкой. Альтернативные методы разделения, такие как отступы в первой строке абзаца, могут быть достигнуты с помощью CSS:

### HTML

```html
<p>
  Разделение абзацев пустыми строками удобнее для читателей, но их также можно
  разделить, сделав отступы в их первых строках. Это часто используется для
  экономии места, например, чтобы тратить меньше бумаги при печати.
</p>

<p>
  Письмо (имеется ввиду письменность), предназначенное для редактирования,
  например, школьные записи и черновики, использует для разделения как пустые
  строки, так и отступы. В готовых работах объединение этих двух способов
  считается излишним и любительским.
</p>

<p>
  В очень старом письме абзацы были разделены специальным символом: ¶,
  <i>pilcrow</i> (знак абзаца). В настоящее время это считается замкнутым и
  трудно читаемым.
</p>

<p>
  Насколько трудно читать? Посмотрите сами:
  <button data-toggle-text="О нет! Переключи обратно!">
    Используем "pilcrow" для абзацев
  </button>
</p>
```

### CSS

```css
p {
  margin: 0;
  text-indent: 3ch;
}

p.pilcrow {
  text-indent: 0;
  display: inline;
}
p.pilcrow + p.pilcrow::before {
  content: " ¶ ";
}
```

### JavaScript

```js
document.querySelector("button").addEventListener("click", function (event) {
  document.querySelectorAll("p").forEach(function (paragraph) {
    paragraph.classList.toggle("pilcrow");
  });
  var newButtonText = event.target.dataset.toggleText;
  var oldText = event.target.innerText;
  event.target.innerText = newButtonText;
  event.target.dataset.toggleText = oldText;
});
```

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

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

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

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

Если требуется дополнительное пространство, используйте свойства CSS, например `margin`, чтобы создать такой эффект:

```css
p {
  margin-bottom: 2em; // увеличение пустого пространства после абзаца
}
```

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

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

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

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

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

* `<hr>`
* `<br>`