inputmode - HTML

inputmode
=========

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

`none`

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

`text`

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

`decimal`

Дробные значения чисел, содержащие разряд и соответствующий символ-разделитель, который учитывает локализацию пользователя (чаще всего "." или ","). Устройства могут показывать или нет символ минуса (отрицательное значение).

`numeric`

Числовая раскладка клавиатуры; числа от 0 до 9. Устройства могут показывать или нет символ минуса (отрицательное значение).

`tel`

Раскладка для ввода номера телефона, включая числа от 0 до 9, звёздочку ("\*"), и решётку ("#"). Поля ввода форм, что имеют обязательное поле номера телефона должны использовать `<input type="tel">`.

`search`

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

`email`

Виртуальная клавиатура, оптимизированная для ввода электронной почты, с использованием символа "@" и др. Поля ввода форм, что имеют обязательное поле электронной почты должны использовать `<input type="email">` (en-US).

`url`

Виртуальная клавиатура, оптимизированная для ввода ссылок. Может иметь кнопку "/", расположенную в более удобном месте. Поле может содержать функцию истории ввода и др. Поля ввода форм, что имеют обязательное поле ссылки URL должны использовать `<input type="url">` (en-US).

Атрибутом по умолчанию является `text`, которое учитывает локализацию пользователя.

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

| Specification |
| --- |
| HTML Standard # attr-inputmode |

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

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

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

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


<ol>: The Ordered List element - HTML

<ol>: The Ordered List element
==============================

**HTML-элемент `<ol>`** используется для упорядоченного списка — в частности для пронумерованного списка.

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

| Категории контента (en-US) | Основной поток, и если дочерний элемент `<ol>` включает в себя хотя бы один элемент `<li>`, явный контент. |
| --- | --- |
| Допустимое содержимое | Ноль или больше `<li>` элементов, которые, в свою очередь, содержат вложенные элементы `<ol>` или `<ul>`. |
| Пропуск тегов | Нет, открывающий и закрывающий теги обязательны. |
| Допустимые родители | Любой элемент, который принимает основной поток. |
| Допустимые ARIA-роли | `directory (en-US)`, `group (en-US)`, `listbox (en-US)`, `menu (en-US)`, `menubar (en-US)`, `radiogroup (en-US)`, `tablist (en-US)`, `toolbar (en-US)`, `tree (en-US)`, `presentation (en-US)` |
| DOM-интерфейс | `HTMLOListElement` (en-US) |

Свойства
--------

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

`reversed`

Атрибут логического значения (bool) показывает, что предметы указаны по списку в обратном порядке. Пункты в списке будут пронумерованы от большего к меньшему.

`start`

Нумерация начнётся с указанного числа. Арабскими цифрами (1, 2, 3, и т.д.), даже когда нумерация `type` в буквах или Римском исчислении. Например, чтобы начать нумерацию с буквы "г" или Римской "iv", используйте `start="4"`.

`type`

Задаёт тип нумерации:

* `a` для строчных букв
* `A` для заглавных букв
* `i` для строчной Римской нумерации
* `I` для заглавной Римской нумерации
* `1` для цифр (по умолчанию)указанный тип используется для всего списка, если только не указан любой другой атрибут `type` в элементе `<li>`.

**Примечание:** Если тип цифр в списке не имеет значения (к примеру, юридические или технические документы, где элементы обозначены буквами/цифрами), используйте свойство CSS `list-style-type` (en-US).

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

Обычно, элементы списка отображены с маркером, предшествующим цифрам или буквам.

`Элементы <ol>` и `<ul>` могут быть вложены (nested) на любом уровне, чередуясь между элементами `<ol>` и `<ul>`.

Оба элемента `<ol>` и `<ul>` используются для списков. Различие лишь в том, что в элементе `<ol>` порядок имеет значение, как в данных примерах:

* Инструкции рецепта
* Направление по заданному маршруту
* Список ингредиентов на информации о питании, в убывающих пропорциях.

Чтобы определить, каким списком пользоваться, можно поменять порядок элементов с списке.Если значение меняется, используйте элемент `<ol>` — в противном случае `<ul>`.

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

### Обычный список

```html
<ol>
  <li>Fee</li>
  <li>Fi</li>
  <li>Fo</li>
  <li>Fum</li>
</ol>
```

Результат HTML кода выше:

### Список с Римскими числами

```html
<ol type="i">
  <li>Introduction</li>
  <li>List of Greivances</li>
  <li>Conclusion</li>
</ol>
```

Результат HTML кода выше:

### Используя свойство `start`

```html
<p>Finishing places of contestants not in the winners’ circle:</p>

<ol start="4">
  <li>Speedwalk Stu</li>
  <li>Saunterin’ Sam</li>
  <li>Slowpoke Rodriguez</li>
</ol>
```

Результат HTML кода выше:

### Вложенный список

```html
<ol>
  <li>first item</li>
  <li>
    second item
    <!-- closing </li> tag not here! -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
  </li>
  <!-- Here's the closing </li> tag -->
  <li>third item</li>
</ol>
```

Результат HTML кода выше:

### Неупорядоченный список внутри упорядоченного списка

```html
<ol>
  <li>first item</li>
  <li>
    second item
    <!-- closing </li> tag not here! -->
    <ul>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ul>
  </li>
  <!-- Here's the closing </li> tag -->
  <li>third item</li>
</ol>
```

Результат HTML кода выше:

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

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

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

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

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

* Другие элементы HTML списка: `<ul>`, `<li>`, `<menu>`
* CSS-свойства, которые могут быть полезны для стилизации `<ol>` элемента:
    + свойство `list-style` (en-US), для порядковых показов
    + CSS счётчики, для более сложных вложенных списков
    + свойство line-height, для замены убранного свойства `compact`
    + Свойство margin, для контроля отступа в списке


<col>: элемент столбца таблицы - HTML

<col>: элемент столбца таблицы
==============================

Элемент **`<col>`** HTML определяет столбец в таблице и используется для определения общей семантики для всех общих ячеек. Обычно он находится внутри элемента `<colgroup>` (en-US).

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

`<col>` позволяет стилизовать столбцы с помощью CSS, но не все свойства будут влиять на столбец (смотри спецификацию CSS 2.1 для получения списка).

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

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

`span`

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

### Устаревшие атрибуты

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

* `align`
Устарело

    + : Этот атрибут enumerated (en-US) указывает, как будет обрабатываться выравнивание содержимого ячейки каждого столбца по горизонтали. Возможными значениями являются:
        - `left`, выравнивание содержимого по левому краю ячейки
        - `center`, выравнивание содержимого по центру ячейки
        - `right`, выравнивание содержимого по правому краю ячейки
        - `justify`, добавляет пробелы в текстовое содержимое так, чтобы содержимое было выровнено по ширине ячейкиIf this attribute is not set, its value is inherited from the `align` (en-US) of the `<colgroup>` (en-US) element this `<col>` element belongs too. If there are none, the `left` value is assumed.

    **Примечание:** Чтобы достичь того же эффекта, что и значения `left`, `center`, `right` или `justify`, не пытайтесь установить свойство `text-align` для селектора, задающего элемент `<col>`. Поскольку элементы `<td>` не являются потомками элемента `<col>`, они не унаследуют его.

    Если таблица не использует атрибут `colspan`, используйте CSS-селектор `td:n-й дочерний элемент(an+b)`. Установите `a` равным нулю, а `b` - положению столбца в таблице, например `td:nth-child(2) { text-align: right; }`, чтобы выровнять второй столбец по правому краю.

    Если таблица использует атрибут `colspan`, эффект может быть достигнут путем объединения соответствующих селекторов атрибутов CSS, таких как `[colspan=n]`, хотя это и не тривиально.
* `bgcolor`
Устарело

    + : Задний фон таблицы. Это 6-значный шестнадцатеричный RGB-код (en-US) с префиксом "#`. Также можно использовать одно из предопределенных цветовых ключевых слов.Чтобы добиться аналогичного эффекта, используйте свойство CSS `background-color`.
* `char`
Устарело

    + : Этот атрибут используется для установки символа, по которому будут выравниваться ячейки в столбце. Типичные значения для этого включают точку (.) при попытке выровнять числа или денежные значения. Если для `align` не задано значение `char`, этот атрибут игнорируется.
* `charoff`
Устарело

    + : Этот атрибут используется для указания количества символов для смещения данных столбца по сравнению с символами выравнивания, указанными атрибутом `char`.
* `valign`
Устарело

    + : Этот атрибут определяет выравнивание текста по вертикали в каждой ячейке столбца. Возможными значениями для этого атрибута являются:
        - `baseline`, располагает текст как можно ближе к нижней части ячейки, но выровняет его по базовой линии символов вместо их нижней части. Если все символы имеют одинаковый размер, это имеет тот же эффект, что и `нижний`.
        - `bottom`, помещает текст как можно ближе к нижней части ячейки, насколько это возможно;
        - `middle`, помещает текст по центру ячейки
        - и `top`, помещает текст как можно ближе к верхней части ячейки, насколько это возможно;
    **Примечание:** Не пытайтесь установить свойство `выравнивание по вертикали` для селектора, дающего элемент `<col>`. Поскольку элементы `<td>` не являются потомками элемента `<col>`, они не унаследуют его.

    Если таблица не использует атрибут `colspan`, используйте CSS-селектор `td:nth-child(an+b)`, где 'a' - общее количество столбцов в таблице, а 'b' - порядковый номер положение столбца в таблице. Только после этого выбора можно использовать свойство `выравнивание по вертикали`.

    Если таблица действительно использует атрибут `colspan`, эффект может быть достигнут путем объединения соответствующих селекторов атрибутов CSS, таких как `[colspan=n]`, хотя это и не тривиально.
* `width`
Устарело

    + : Этот атрибут определяет ширину по умолчанию для каждого столбца в текущей группе столбцов. В дополнение к стандартным значениям в пикселях и процентах, этот атрибут может принимать специальную форму `0*`, что означает, что ширина каждого столбца в группе должна быть минимальной шириной, необходимой для размещения содержимого столбца. Также можно использовать относительную ширину, такую как "5\*".
Примеры
-------

Please see the `<table>` (en-US) page for examples on `<col>`.

Техническое резюме
------------------

|  |  |
| --- | --- |
| Content categories | None. |
| Permitted content | None; it is a void element. |
| Tag omission | It must have start tag, but must not have an end tag. |
| Permitted parents | `<colgroup>` (en-US) only, though it can be implicitly
 defined as its start tag is not mandatory. The
 `<colgroup>` (en-US) must not have a
 `span` (en-US) attribute.
  |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | No `role` permitted |
| DOM interface | `HTMLTableColElement` (en-US) |

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

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

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

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

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

* Свойства CSS и псевдоклассы, которые могут быть особенно полезны для оформления элемента `<col>`:
    + свойство `width` позволяет контролировать ширину колонок;
    + псевдо-селектор `:nth-child` чтобы задать стили определенным ячейкам;
    + свойство `text-align` для выравнивания текста внутри ячейки.


<dialog> - HTML

<dialog>
========

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

**HTML-элемент `<dialog>`** определяет диалоговое окно или другой интерактивный элемент, такой как инспектор или окно. Элементы `<form>` могут интегрироваться с диалогом с помощью указания атрибута `method="dialog"`. Когда отправляется такая форма, диалог закрывается с returnValue равным value нажатой кнопки submit.

`::backdrop` CSS псевдо-элемент может быть использован для стилизации фона подложки элемента `<dialog>`, например для затемнения недоступного содержимого, пока диалог активен.

| Категории контента | Основной поток, секционный контент |
| --- | --- |
| Разрешённый контент | Основной поток |
| Опускание тегов | Нет, открывающий и закрывающий теги обязательны. |
| Разрешённые родительские элементы | Любой элемент, в котором разрешён основной поток |
| DOM-интерфейс | `HTMLDialogElement` |

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

Этот элемент включает в себя общие атрибуты. Атрибут `tabindex` не должен использоваться с `<dialog>` элементом.

`open`

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

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

### Пример 1

```html
<dialog open>
  <p>Greetings, one and all!</p>
</dialog>
```

### Пример 2

```html
<!-- Простой попап диалог с формой -->
<dialog id="favDialog">
  <form method="dialog">
    <section>
      <p>
        <label for="favAnimal">Favorite animal:</label>
        <select id="favAnimal">
          <option></option>
          <option>Brine shrimp</option>
          <option>Red panda</option>
          <option>Spider monkey</option>
        </select>
      </p>
    </section>
    <menu>
      <button id="cancel" type="reset">Cancel</button>
      <button type="submit">Confirm</button>
    </menu>
  </form>
</dialog>

<menu>
  <button id="updateDetails">Update details</button>
</menu>

<script>
 (function () {
 var updateButton = document.getElementById("updateDetails");
 var cancelButton = document.getElementById("cancel");
 var favDialog = document.getElementById("favDialog");

 // Update button opens a modal dialog
 updateButton.addEventListener("click", function () {
 favDialog.showModal();
 });

 // Form cancel button closes the dialog box
 cancelButton.addEventListener("click", function () {
 favDialog.close();
 });
 })();
</script>
```

```html
<!-- Простой попап диалог с формой -->
<dialog id="favDialog">
  <form method="dialog">
    <section>
      <p>
        <label for="favAnimal">Favorite animal:</label>
        <select id="favAnimal">
          <option></option>
          <option>Brine shrimp</option>
          <option>Red panda</option>
          <option>Spider monkey</option>
        </select>
      </p>
    </section>
    <menu>
      <button id="cancel" type="reset">Cancel</button>
      <button type="submit">Confirm</button>
    </menu>
  </form>
</dialog>

<menu>
  <button id="updateDetails">Update details</button>
</menu>

<script>
 (function () {
 var updateButton = document.getElementById("updateDetails");
 var cancelButton = document.getElementById("cancel");
 var favDialog = document.getElementById("favDialog");

 // Update button opens a modal dialog
 updateButton.addEventListener("click", function () {
 favDialog.showModal();
 });

 // Form cancel button closes the dialog box
 cancelButton.addEventListener("click", function () {
 favDialog.close();
 });
 })();
</script>
```

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

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

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

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

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

* Событие `close`
* Событие `cancel`
* HTML forms guide.


<figcaption>: Элемент подписи иллюстрации - HTML

<figcaption>: Элемент подписи иллюстрации
=========================================

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

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

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

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

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

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

Для примеров `<figcaption>` смотрите `<figure>`.

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

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

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

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

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

* Элемент `<figure>`


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

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

HTML Элемент **`<script>`** используется для встраивания или подключения исполняемого JavaScript кода. Элемент `<script>` также может использоваться с другими языками, такими как GLSL (en-US) от WebGL.

| Content categories | Метаданные, Потоковый контент, Фразовый контент. |
| --- | --- |
| Допустимый контент | Динамический скрипт, используя атрибут `text/javascript`. |
| Пропуск тегов | Нет. Открывающий и закрывающий теги обязательны |
| Допустимые родители | Любые элементы в которых разрешены метаданные или фразовый контент |
| Допустимые ARIA-роли | нет |
| DOM-интерфейс | `HTMLScriptElement` |

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

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

`async`

Это логический атрибут, указывающий браузеру, если возможно, загружать скрипт, указанный в атрибуте `src`, асинхронно.

**Предупреждение:** Атрибут `async` не будет оказывать никакого эффекта, если атрибут `src` отсутствует. Обычно браузеры загружают `<script>` синхронно, (т.е. `async="false"`) во время разбора документа. Динамически вставленный `<script>` (используя, например, `document.createElement`) по умолчанию загружаются браузером асинхронно, поэтому для включения синхронной загрузки (т.е. когда скрипты загружаются в порядке их вставки) укажите `async="false"`.

`crossorigin`

Обычные элементы тега `script` передают мало информации в `window.onerror` для скриптов, которые не проходят проверку CORS (en-US). Чтобы разрешить ведение журнала ошибок сайта, которые используют отдельный домен для статических файлов (например, изображение, видео-файл, CSS-стили или Javascript-код), используйте атрибут `crossorigin`. Посмотрите статью «настройки атрибутов CORS» для более наглядного объяснения его допустимых аргументов.

`defer`

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

**Предупреждение:** Атрибут `defer` не будет оказывать никакого эффекта, если атрибут `src` отсутствует. Чтобы достигнуть такого же эффекта для динамически вставленных скриптов используйте `async=false`. Скрипты с атрибутом `defer` будут выполняться в том порядке, в котором они появились при разборе документа.

`integrity`

Этот атрибут содержит встроенные метаданные, которые агент пользователя (браузер) может использовать для проверки того, что выбранный ресурс был доставлен без непредвиденных манипуляций. Смотрите Целостность субресурса (en-US).

`nomodule`

Булевый атрибут, который устанавливается для того, чтобы скрипт не выполнялся в браузерах, поддерживающих ES6-модули (англ.). Таким образом, может быть использован для предоставления резервных сценариев в старых браузерах, которые не поддерживают модульный код JavaScript.

`nonce`

Криптографический одноразовый номер (номер, используемый один раз) для внесения встроенных скриптов в белый список в script-src Content-Security-Policy (en-US). Сервер должен генерировать уникальное одноразовое значение каждый раз, когда он передает политику. Крайне важно предоставить одноразовый номер, который нельзя угадать, поскольку в противном случае обход политики ресурса является тривиальным.

`src`

Определяет URI внешнего скрипта; является альтернативой встраиванию скрипта непосредственно в документ.

**Предупреждение:** Если у элемента `script` будет указан атрибут `src`, то он не должен иметь встроенный скрипт между тегами.

`text`

Как и атрибут `textContent`, этот атрибут задает текстовое содержимое элемента. Однако, в отличие от атрибута `textContent`, этот атрибут оценивается как исполняемый код после того, как узел вставлен в DOM.

`type`

Этот атрибут указывает тип представленного скрипта. Значение этого атрибута будет находиться в одной из следующих категорий:

* **Атрибут не установлен (по-умолчанию), пустая строка или установлен как MIME-тип JavaScript**
    + : Обозначает, что скрипт является "классическим скриптом", содержащим JavaScript-код.
     Рекомендуется не указывать MIME-тип, а пропускать атрибут вообще.
     MIME-типы JavaScript указаны в спецификации.
* `module`
    + : Данное значение даёт браузеру инструкцию, что код является JavaScript-модулем.
     Обработка содержимого скрипта отложенная.
     Атрибуты `charset` и `defer` игнорируются.
     Для дополнительной информации по использованию `module`, смотрите руководство по JavaScript-модулям.
     В отличие от классчических скриптов, модули требуют использования CORS-протокола для cross-origin загрузок.
* `importmap` (en-US)
    + : Данное значение сигнализирует о том, что содержимое тега является словарём импортов.
     Словарь импортов - это JSON-объект, который может использоваться для задания алиасов при импорте JavaScript-модулей.
* **Любое другое значение:** Встроенный контент обрабатывается как блок данных, который не будет обрабатываться браузером. Разработчики должны использовать допустимый тип MIME, который не является типом MIME JavaScript, для обозначения блоков данных. Атрибут `src` будет проигнорирован.

### Устаревшие атрибуты

`charset`
Устарело

Если присутствует, его значение должно соответствовать "utf-8" без учета регистра ASCII. И в том, и в другом случае нет необходимости указывать атрибут charset, поскольку документы должны использовать UTF-8, а элемент script наследует свою кодировку символов от документа.

`language`
Устарело

Non-standard

Как и атрибут `type`, этот атрибут определяет используемый язык сценариев. Однако, в отличие от `type`, возможные значения `language` никогда не были стандартизированы. Вместо него следует использовать атрибут `type`.

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

Элемент `<script>` без указания атрибутов `async` , `defer` или `type="module"`, а также встроенный скрипт, загружается и выполняется сразу, до того как браузер продолжит разбор документа.

Для обработки скрипт должен иметь тип данных `text/javascript`, но браузеры снисходительны и блокируют обработку только в том случае, если скрипт представляет данные одного из типов: изображение (`image/*`); видео (`video/*`); аудио (`audio/*`); или `text/csv`. Если скрипт заблокирован, элементу отправляется событие `error (en-US)`, если не было отправлено событие `load (en-US)`.

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

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

Эти примеры показывают как импортировать скрипт используя элемент `<script>` в HTML4 и HTML5.

```html
<!-- HTML4 -->
<script type="text/javascript" src="javascript.js"></script>

<!-- HTML5 -->
<script src="javascript.js"></script>
```

### Фолбэк-модуль

Браузеры, поддерживающие использование значения `module` для атрибута `type`, игнорируют любые скрипты с атрибутом `nomodule`. Это разрешает использовать модульные скрипты, и в тот же самый момент позволяет использовать `nomodule-`скрипты для браузеров без поддержки модульных скриптов.

```html
<script type="module" src="main.mjs"></script>
<script nomodule src="fallback.js"></script>
```

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

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

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

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

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

* `document.currentScript`
* Статья Flavio Copes о эффективной загрузке JavaScript и различиях между атрибутами `async` и `defer` (англ.)
* Руководство по JavaScript-модулям


<li> - HTML

<li>
====

**HTML-элемент `<li>`** используется для создания элементов списка. Он также должен находиться в родительском элементе: упорядоченном списке (`<ol>`), неупорядоченном списке (`<ul>`), или меню (`<menu>`). В меню и неупорядоченных списках, элементы списка обычно отображаются с маркерами в виде круга. В упорядоченных списках, они обычно отображаются с маркерами в виде возрастающего счётчика слева, например числа или буквы.

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

| Категории контента | Нет. |
| --- | --- |
| Допустимое содержимое | Потоковый контент |
| Пропуск тегов | Закрывающий тег может быть опущен, если за элементом непосредственно следует другой элемент `<li>` или если в родительском элементе нет больше содержимого. |
| Допустимые родители | Элементы `<ul>`, `<ol>`, или `<menu>`. Хотя и не соответствует использованию, устаревший `<dir>` (en-US) тоже может быть родительским элементом. |
| Допустимые ARIA-роли | `menuitem (en-US)`, `menuitemcheckbox (en-US)`, `menuitemradio (en-US)`, `option (en-US)`, `presentation (en-US)`, `radio (en-US)`, `separator (en-US)`, `tab (en-US)`, `treeitem (en-US)` |
| DOM-интерфейс | `HTMLLIElement` (en-US) |

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

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

`value`

Этот числовой атрибут указывает на текущий порядковый номер элемента в списке, заданного с помощью элемента `<ol>`. Единственное разрешённое значение этого атрибута — число, даже если список отображается с римскими цифрами или буквами. Элементы списка, которые идут после элемента с таким атрибутом, нумеруются с заданного значения. Атрибут **value** не имеет значения для неупорядоченных списков (`<ul>`) или для меню (`<menu>`).

**Примечание:** Этот атрибут был убран в HTML4, но заново добавлен в HTML5.
 **Примечание:** Предыдущие до Gecko 9.0, отрицательные значения неправильно конвертировались в 0. Начиная с Gecko 9.0 все числовые значения воспринимаются правильно.

`type`
Устарело

Этот символьный атрибут указывает на тип нумерации:

* `a`: строчные буквы
* `A`: заглавные буквы
* `i`: строчные римские цифры
* `I`: заглавные римские цифры
* `1`: цифрыЭтот атрибут переопределяет тип унаследованный от родительского элемента `<ol>` или любого другого.

**Примечание:** Этот атрибут был убран: используйте CSS-свойство `list-style-type` (en-US) взамен.

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

Для более подробных примеров смотрите страницы `<ol>` и `<ul>`.

### Упорядоченный список

```html
<ol>
  <li>Первый элемент</li>
  <li>Второй элемент</li>
  <li>Третий элемент</li>
</ol>
```

### Упорядоченный список с пользовательским значением

```html
<ol type="I">
  <li value="3">Третий элемент</li>
  <li>Четвёртый элемент</li>
  <li>Пятый элемент</li>
</ol>
```

### Неупорядоченный список

```html
<ul>
  <li>Первый элемент</li>
  <li>Второй элемент</li>
  <li>Третий элемент</li>
</ul>
```

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

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

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

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

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

* Остальные списковые HTML-элементы: `<ul>`, `<li>`, `<menu>` и устаревший `<dir>` (en-US);
* CSS-свойства, которые были бы полезны для стилизации `<li>` элементов:
    + свойство `list-style` (en-US), для выбора стиля маркера/порядкового номера,
    + CSS счётчики, для обработки сложных вложенных списков,
    + свойство `margin`, для контроля отступа между элементами списка.


<section> - элемент секции - HTML

<section> - элемент секции
==========================

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

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

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

**Примечание:** Если содержимое элемента имеет смысл объединить как единое целое (в цельный и независимый блок), то элемент `<article>` может стать лучшим выбором.

| Категории контента | Основной поток, секционный контент, явный контент. |
| --- | --- |
| Допустимое содержимое | Основной поток |
| Пропуск тега | Ни одного; Оба тега, открывающий и закрывающий, являются обязательными. |
| Допустимые родители | Любой элемент, который разрешает контент основного потока в качестве содержимого. Обратите внимание, что элемент `<section>` не должен быть потомком элемента `<address>`. |
| Допустимые ARIA-роли | `alert (en-US)`, `alertdialog (en-US)`, `application (en-US)`, `banner (en-US)`, `complementary (en-US)`, `contentinfo (en-US)`, `dialog (en-US)`, `document (en-US)`, `feed (en-US)`, `log (en-US)`, `main (en-US)`, `marquee (en-US)`, `navigation (en-US)`, `search (en-US)`, `status (en-US)`, `tabpanel (en-US)` |
| DOM-интерфейс | `HTMLElement` |

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

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

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

* Каждый элемент `<section>` должен быть идентифицирован, обычно путём добавления заголовка (элементы `<h1>` (en-US)-`<h6>` (en-US)) в качестве дочернего элемента.
* Если имеет смысл по-особому объединить содержимое элемента `<section>` (например, сделать цельным и независимым разделом HTML-документа), используйте вместо него элемент `<article>`.
* Не используйте элемент `<section>` как общий контейнер; для этого есть `<div>`, особенно когда секционирование применяется только для стилизации. На практике раздел должен логически выделяться в структуре документа.
Пример 1
--------

### До

```html
<div>
  <h1>Заголовок</h1>
  <p>Много замечательного контента</p>
</div>
```

### После

```html
<section>
  <h1>Заголовок</h1>
  <p>Много замечательного контента</p>
</section>
```

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

### До

```html
<div>
  <h2>Заголовок</h2>
  <img src="bird.jpg" alt="птица" />
</div>
```

### После

```html
<section>
  <h2>Заголовок</h2>
  <img src="bird.jpg" alt="птица" />
</section>
```

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

| Specification |
| --- |
| HTML Standard # the-section-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>`, `<header>`, `<footer>`, `<address>`;
* Разделы и структура документа HTML5.
* ARIA: роль region (en-US)


<data> - HTML

<data>
======

**HTML-элемент `<data>`** связывает данное содержимое с машиночитаемым представлением. Если содержимое относится к времени или дате, необходимо использовать элемент `<time>`.

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

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

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

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

`value`

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

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

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

```html
<p>New Products</p>
<ul>
  <li><data value="398">Mini Ketchup</data></li>
  <li><data value="399">Jumbo Ketchup</data></li>
  <li><data value="400">Mega Jumbo Ketchup</data></li>
</ul>
```

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

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

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

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

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

* HTML-элемент `<time>`.


<head>: элемент метаданных документа - HTML

<head>: элемент метаданных документа
====================================

**HTML-элемент `<head>`** содержит машиночитаемую информацию (metadata) о документе, например его заголовок, скрипты и страницы стилей.

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

| Категории контента | Отсутствуют. |
| --- | --- |
| Допустимое содержимое | Если документ является документом `<iframe>` (en-US) с атрибутом `srcdoc` (en-US), или если информация о заголовке доступна из протокола более высокого уровня (например, строки темы в электронном письме HTML), то ноль или более элементов содержащих метаданные.Иначе, один или более элементов содержащих метаданные, один из которых является элементом `<title>`. |
| Пропуск тегов | Открывающий тег может быть пропущен, если первым, что находится внутри элемента `<head>` является другой элемент. Закрывающий тег может быть пропущен, если первое, что следует за элементом `<head>` не является пробелом или комментарием. |
| Допустимые родители | Элемент `<html>` (`<head>` является его первым дочерним элементом). |
| Допустимые ARIA-роли | нет |
| DOM-интерфейс | `HTMLHeadElement` |

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

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

`profile`

URI (en-US) одного или более профилей метаданных, разделённых пробелами.

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

```html
<!doctype html>
<html>
  <head>
    <title>Заголовок страницы</title>
  </head>
</html>
```

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

HTML5-совместимые браузеры автоматически создают элемент `<head>`, если его теги пропущены в разметке. Такое поведение не гарантируется в старых браузерах.

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

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

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

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

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

* Элементы, которые могут использоваться внутри `<head>`:
    + `<title>`
    + `<base>`
    + `<link>`
    + `<style>`
    + `<meta>`
    + `<script>`
    + `<noscript>`
    + `<template>`


<ruby> - HTML

<ruby>
======

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

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

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

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

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

### Пример 1: Символы

```html
<ruby>
  漢 <rp>(</rp><rt>Kan</rt><rp>)</rp> 字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>
```

### Пример 2: Слово

```html
<ruby> 明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp> </ruby>
```

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

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

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

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

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

* `<rt>` (en-US)
* `<rp>` (en-US)
* `<rb>` (en-US)
* `<rtc>` (en-US)


<address> - элемент для контактных адресов - HTML

<address> - элемент для контактных адресов
==========================================

**HTML- тег `<address>`** задаёт контактные данные для ближайшего родительского `<article>` или `<body>` ; В последнем случае применяется ко всему документу, визуально выделяется курсивом.

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

* Для представления адреса, который не является контактной информацией, воспользуйтесь `<p>` элементом.
* Данный тег не должен содержать любой другой информации, кроме контактной. (пример: дата публикации - относится к `<time>` тегу ).
* Обычно тег <address> размещается внутри тега `<footer>` текущего блока, если есть хотя бы один.

| Категории контента (en-US) | Основной поток, palpable content. |
| --- | --- |
| Разрешённый контент | Основной поток, но без вложенного элемента <address>, без элементов заголовка (`<hgroup>`, `<h1>` (en-US), `<h2>` (en-US), `<h3>` (en-US), `<h4>` (en-US), `<h5>` (en-US), `<h6>` (en-US)), без секционного контента (`<article>`, `<aside>`, `<section>`, `<nav>`) и без `<header>` или `<footer>` элементов. |
| Опускание тегов | Нет, открывающий и закрывающий теги обязательны. |
| Разрешённые родительские элементы | Любой элемент, который принимает flow content (en-US). |
| DOM интерфейс | `HTMLElement` Prior to Gecko 2.0 (Firefox 4), Gecko implemented this element using the `HTMLSpanElement` (en-US) interface |

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

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

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

```html
<address>
  You can contact author at
  <a href="http://www.somedomain.com/contact">www.somedomain.com</a>.<br />
  If you see any bugs, please
  <a href="mailto:webmaster@somedomain.com">contact webmaster</a>.<br />
  You may also want to visit us:<br />
  Mozilla Foundation<br />
  1981 Landings Drive<br />
  Building K<br />
  Mountain View, CA 94043-0801<br />
  USA
</address>
```

Помимо элемента `<address>`, с такими же стандартными стилями как и он текст отображают `<i>` (en-US) или `<em>` элементы, более правильно использовать его, когда имеете дело с контактной информацией, так как он передаёт дополнительную семантическую информацию.

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

| Specification |
| --- |
| HTML Standard # the-address-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>`, `<header>`;
* Разделы и структура документа HTML5.


<strong> - элемент выделения важного текста - HTML

 - элемент выделения важного текста
===========================================

Элемент **сильной значимости** (**`<strong>`)** указывает на то, что его содержание имеет большое значение, серьёзность или срочность. Браузеры обычно отображают содержимое жирным шрифтом.

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

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

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

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

Элемент `<strong>` предназначен для контента, который имеет "большое значение", включая вещи большой серьёзности или срочности (например, предупреждения). Это может быть предложение, которое имеет большое значение для всей страницы, или вы можете просто попытаться указать, что некоторые слова имеют большее значение по сравнению с соседним контентом.

Обычно этот элемент отображается по умолчанию с использованием жирного шрифта. Однако, он не должен быть использован просто для применения жирного стиля; используйте свойство CSS `font-weight` для этой цели. Используйте элемент `<b>`, чтобы привлечь внимание к определённому тексту без указания более высокого уровня важности. Используйте элемент `<em>` element для выделения текста, который имеет выраженный акцент.

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

###  против

Это часто путает новых разработчиков, почему существует так много способов выразить одно и то же на представленном веб-сайте. `<b>` и `<strong>` возможно, является одним из наиболее распространённых источников путаницы, заставляя разработчиков задавать себе вопрос: «Должен ли я использовать `<b>` или `<strong>`? Разве они не делают одно и тоже?»

Не совсем. Элемент `<strong>` для контента, который имеет большее значение, в то время как элемент `<b>` используется для привлечения внимания к тексту, не указывая на то, что это более важно.

Это может помочь понять, что оба являются правильным и семантическими элементами в HTML5, и это совпадение, что оба они имеют одинаковый стиль (полужирный) в большинстве браузеров (хотя некоторые старые браузеры фактически подчёркивают `<strong>`). Каждый элемент предназначен для использования в определённых типах сценариев, и если вы хотите жирный шрифт просто для украшения, вместо этого вы должные использовать свойства CSS `font-weight`.

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

###  против

Добавление к путанице заключается в том, что, хотя HTML 4 определяет `<strong>` как просто указывающий на более сильный акцент, HTML 5 определяет `<strong>` как представляющий "большое значение для его содержимого". Это важное различие.

В то время, как `<em>` используется для изменения значения предложения, поскольку делается устный акцент ("Я *люблю* морковь" против "Я люблю*морковь*"), `<strong>` используется, для придания предложению порции особого значения (например, "**Предупреждение!** Это **очень опасно.**") Оба элемента `<strong>` и `<em>` могут быть вложены для увеличения относительной степени важности или усиленного акцента, соответственно.

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

### Основной пример

```html
<p>
  Прежде чем продолжить,
  <strong>убедитесь, что вы надели защитные очки</strong>.
</p>
```

Результат:

### Маркировочные предупреждения

```html
<p>
  <strong>Важно:</strong> прежде чем продолжить, убедитесь, что вы добавили
  много масла.
</p>
```

Это приведёт к:

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

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

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

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

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

* Элемент `<b>`
* Элемент `<em>`
* Элемент `font-weight`


<menu> - HTML

<menu>
======

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

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

| Категории контента | Flow content. If the element's children include at least one `<li>` element: Palpable content. |
| --- | --- |
| Допустимое содержимое | If the element is in the *list menu* state: flow content, or alternatively, zero or more occurrences of `<li>`, `<script>`, and `<template>`. (*list menu* is the default state, unless the parent element is a `<menu>` in the *context menu* state.)If the element is in the *context menu* state: zero or more occurrences, in any order, of `<menu>` (*context menu* state only), `<menuitem>` (en-US), `<hr>`, `<script>`, and `<template>`. |
| Пропуск тегов | Нет, открывающий и закрывающий теги обязательны. |
| Допустимые родители | Любой элемент, который поддерживает основной поток. |
| Неявные ARIA-роли | `list` (en-US) |
| Допустимые ARIA-роли | `directory (en-US)`, `group (en-US)`, `listbox` (en-US), `menu (en-US)`, `menubar (en-US)`, `none (en-US)`, `presentation (en-US)`, `radiogroup (en-US)`, `tablist (en-US)`, `toolbar (en-US)` или `tree (en-US)` |
| DOM-интерфейс | `HTMLMenuElement` (en-US) |

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

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

`label`
Устарело

The name of the menu as shown to the user. Used within nested menus, to provide a label through which the submenu can be accessed. Must only be specified when the parent element is a `<menu>` in the *context menu* state.

`type`

This attribute indicates the kind of menu being declared, and can be one of two values.\* `context`
Устарело
 : Indicates the *popup menu* state, which represents a group of commands activated through another element. This might be as a button menu referenced by a `menu` attribute of a `<button>` element, or as context menu for an element with a `contextmenu` attribute. This value is the default if the attribute is missing and the parent element is also a `<menu>` element.

* `toolbar`: Indicates the *toolbar* state, which represents a toolbar consisting of a series of commands for user interaction. This might be in the form of an unordered list of `<li>` elements, or, if the element has no `<li>` element children, flow content describing available commands. This value is the default if the attribute is missing.

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

The `<menu>` and `<ul>` elements both represent an unordered list of items. The key difference is that `<ul>` primarily contains items for display, whilst `<menu>` is intended for interactive items, to act on.

An HTML menu can be used to create context menus (typically activated by right-clicking another element) or toolbars.

**Context menus** consist of a `<menu>` element which contains `<menuitem>` (en-US) elements for each selectable option in the menu, `<menu>` elements for submenus within the menu, and `<hr>` elements for separator lines to break up the menu's content into sections. Context menus are then attached to the element they're activated from using either the associated element's `contextmenu` attribute or, for button-activated menus attached to `<button>` elements, the `menu` attribute.

**Toolbar menus** consist of a `<menu>` element whose content is described in one of two ways: either as an unordered list of items represented by `<li>` elements (each representing a command or option the user can utilize), or (if there are no `<li>` elements), flow content describing the available commands and options.

This element was deprecated in HTML4, but reintroduced in HTML5.1 and the HTML living standard. This document describes the current Firefox implementation. Type 'list' is likely to change to 'toolbar' according to HTML5.1.

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

### Context menu

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

#### HTML

```html
<!-- A <div> element with a context menu -->
<div contextmenu="popup-menu">Right-click to see the adjusted context menu</div>

<menu type="context" id="popup-menu">
  <menuitem>Action</menuitem>
  <menuitem>Another action</menuitem>
  <hr />
  <menuitem>Separated action</menuitem>
</menu>
```

#### CSS

```css
div {
  width: 300px;
  height: 80px;
  background-color: lightgreen;
}
```

#### Result

### Menu button

**Предупреждение:** Menu buttons haven't been implemented in any known browsers yet. The `type` attribute on the `<menu>` element is now obsolete.

**Предупреждение:** `<menuitem>` (en-US) element is obsolete.

#### HTML

```html
<!-- A button, which displays a menu when clicked. -->
<button type="menu" menu="popup-menu">Dropdown</button>

<menu type="context" id="popup-menu">
  <menuitem>Action</menuitem>
  <menuitem>Another action</menuitem>
  <hr />
  <menuitem>Separated action</menuitem>
</menu>
```

#### Result

### Toolbar

**Предупреждение:** Toolbar menus haven't been implemented in any known browsers yet.

#### HTML

```html
<!-- A context menu for a simple editor,
 - containing two menu buttons. -->
<menu type="toolbar">
  <li>
    <button type="menu" menu="file-menu">File</button>
    <menu type="context" id="file-menu">
      <menuitem label="New..." onclick="newFile()">
      <menuitem label="Save..." onclick="saveFile()">
    </menu>
  </li>
  <li>
    <button type="menu" menu="edit-menu">Edit</button>
    <menu type="context" id="edit-menu">
      <menuitem label="Cut..." onclick="cutEdit()">
      <menuitem label="Copy..." onclick="copyEdit()">
      <menuitem label="Paste..." onclick="pasteEdit()">
    </menu>
  </li>
</menu>
```

#### Result

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

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

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

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

See also
--------

* Other list-related HTML Elements: `<ol>`, `<ul>`, `<li>`, `<hr>`, and the obsolete `<dir>` (en-US).


<base> - HTML

<base>
======

**HTML-элемент** **`<base>`** определяет основной адрес (URL), используемый для всех относительных адресов (URLs) в документе. Может быть только один **`<base>`** элемент в одном документе.
 Основной адрес (URL) документа можно запросить скриптом используя `document.baseURI` (en-US).

| Категории контента | Метаданные |
| --- | --- |
| Допустимое содержимое | Отсутствует. Это пустой элемент. |
| Пропуск тегов | Без закрывающего тега. |
| Допустимые родители | `<head>`, `<body>`. |
| Допустимые ARIA-роли | Нет |
| DOM-интерфейс | `HTMLBaseElement` |

Атрибуты **`<base>`**
---------------------

К элементу **`<base>`**`можно применять` глобальные атрибуты.

`href`

Базовый адрес (URL) для указания полного пути (основной, главный адрес). Если указан данный атрибут, значит этот элемент должен находиться до других элементов с атрибутами URLs. Разрешены абсолютные (внешние) и относительные (внутренние) адреса (URLs).

`target`

Значение атрибута определяет имя контекста, которое применяется для ссылок (`<a>`) и форм (`<form>`). Они нужны *для отображения контекста* (пример: вкладка, окно или встроенный фрейм). Следующие ключевые слова имеют специальные значения:

* **`_self`**: загружает результат в текущем окне или вкладке. *Если атрибут не указан, является значением по умолчанию.*
* `_blank`: загружает результат в новом окне или бланке.
* **`_parent`**: загружает данные в родительском окне. Если значение **`_parent`** не указано, используется значение **`_self`**.
* **`_top`**: загружает данные в контексте верхнего уровня (то есть, отображает полученный контекст без обратного перехода, если не имеет родительского значения). Если нет родительских данных используется как **`_self`**.

**Примечание:** `если указано несколько элементов <base>` , будут использованы только первые **href** и **target**; все последующие значения проигнорируются.

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

```html
<base href="http://www.example.com/page.html" />
<base target="\_blank" href="http://www.example.com/page.html" />
```

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

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

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

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


<abbr>: Элемент Аббревиатура - HTML

<abbr>: Элемент Аббревиатура
============================

**Элемент HTML «аббревиатура» (`<abbr>`)** представляет собой аббревиатуру и, опционально, может показывать её расшифровку. Расшифровка записывается в атрибут `title`. Иные значения `title`, кроме расшифровки аббревиатуры не допускаются.

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

Статья *Как помечать аббревиатуры и сделать их потянутыми* поможет понять как использовать `<abbr>` и связанные элементы.

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

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

Этот элемент поддерживает только глобальные атрибуты. Атрибут `title` имеет специальное семантическое значение, когда используется вместе с элементом `<abbr>`. Он *должен* содержать полную расшифровку или описание аббревиатуры.

Каждый элемент `<abbr>` независим от других. Указание `title` на одном элементе не применяет это же описание к другим элементам с одинаковым содержанием.

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

### Обычное использование

Необязательно помечать все аббревиатуры с помощью `<abbr>`. Далее представлено несколько вариантов, которые помогут выбрать как помечать текст:

* Когда используете аббревиатуру и хотите показать описание или расшифровку вне основного потока содержания, используйте `<abbr>` c подходящим `title`.
* Чтобы обозначить аббревиатуру, которая может быть незнакома читателю, используете `<abbr>` с атрибутом title или просто текст с описанием.
* Когда присутствие аббревиатуры в тексте должно быть семантически выделено, полезен элемент `<abbr>`. В свою очередь, его использование может быть использовано для стилизации или написания сценариев.
* Вы можете использовать `<abbr>` вместе с `<dfn>`, чтобы установить определения для терминов, которые являются аббревиатурами или акронимами. Смотрите пример Определение в аббревиатуре ниже.
### Грамматические вопросы

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

Стили по умолчанию
------------------

Назначение данного элемента исключительно для удобства автора и браузеры отображают его как (`display``: inline`) по умолчанию, хотя его стиль по умолчанию меняется в разных браузерах:

* Некоторые браузеры, например Internet Explorer, стилизуют его как элемент `<span>`.
* Opera, Firefox и другие добавляют подчёркивание точками к содержанию элемента.
* Некоторые браузеры не только подчёркивают, но и меняют начертание на капитель (small caps). Чтобы избежать этого, добавьте `font-variant` (en-US)`: none` в ваш CSS.
Примеры
-------

### Семантическая пометка аббревиатуры

Чтобы пометить аббревиатуру без задания описания или расшифровок, просто используйте `<abbr>` без каких-либо атрибутов, как показано в примере ниже.

#### HTML

```html
<p>Использование <abbr>HTML</abbr> – весело и легко!</p>
```

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

### Стилизация аббревиатуры

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

#### HTML

```html
<p>Используя <abbr>CSS</abbr>, вы можете стилизовать аббревиатуры!</p>
```

#### CSS

```css
abbr {
  font-variant: all-small-caps;
}
```

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

### Задание расшифровки

Добавление атрибута `title` даёт вам возможность задать расшифровку или описание для аббревиатуры или акронима.

#### HTML

```html
<p>
  Эта статья великолепна!
  <abbr title="Подпишусь под Каждым Словом">ППКС</abbr> без раздумий.
</p>
```

#### Result

### Определение в аббревиатуре

Вы можете использовать `<abbr>` вместе с `<dfn>` для более формального определения аббревиатуры, как показано ниже.

#### HTML

```html
<p>
  <dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr> </dfn> –
  язык разметки, который используется для создания семантических и
  структурированных веб-страниц.
</p>

<p>
  A <dfn id="spec">Specification</dfn> (<abbr title="Specification">spec</abbr>)
  – документ, в котором описаны основные принципы работы технологи или API и как
  получить к ним доступ.
</p>
```

#### Result

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

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

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

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

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

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

* Использование элемента <abbr>
* Другие элементы, являющиеся семантически текстовыми: `<a>`, `<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>`.
* Устаревший элемент `<acronym>`, который был заменён элементом `<abbr>`.


<cite> - HTML

<cite>
======

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

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

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

* Творческая работа может включать в себя книгу, статью, очерк, стихотворение, суждение, песню, сценарий, фильм, ТВ-шоу, игру, скульптуру, живопись, театральную постановку, пьесу, оперу, мюзикл, выставку, юридический отчёт, компьютерную программу, веб-сайт, веб-страницу, сообщение или комментарий в блоге или на форуме, tweet, письменное или устное заявление и так далее.
* Спецификация W3C утверждает, что ссылка на творческую работу может содержать имя автора, в то время, как WHATWG заявляет, что она не может включать имя человека ни в коем случае.
* Используйте атрибут `cite` элемента `<blockquote>` или элемента `<q>` (en-US) для ссылки на интернет-ресурс источника.

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

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

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

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

```html
More information can be found in <cite>[ISO-0000]</cite>
```

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

To avoid the default italic style from being used for the <cite> element use the CSS `font-style` property.

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

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

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

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

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

* Элемент `<blockquote>` для длинных цитат.
* Элемент `<q>` (en-US) для встраиваемых цитат.


<optgroup> - HTML

<optgroup>
==========

**HTML-элемент `<optgroup>`** позволяет группировать опции, находящиеся внутри элемента `<select>`.

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

**Примечание:** Элементы optgroup не могут быть вложенными друг в друга.

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

Элемент `<optgroup>` допускает использование глобальных атрибутов.

`disabled`

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

`label`

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

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

```html
<select>
  <optgroup label="Группа 1">
    <option>Опция 1.1</option>
  </optgroup>
  <optgroup label="Группа 2">
    <option>Опция 2.1</option>
    <option>Опция 2.2</option>
  </optgroup>
  <optgroup label="Группа 3" disabled>
    <option>Опция 3.1</option>
    <option>Опция 3.2</option>
    <option>Опция 3.3</option>
  </optgroup>
</select>
```

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

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

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

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

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

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

* Элементы, имеющие отношение к формам: `<form>`, `<legend>`, `<label>`, `<button>`, `<select>`, `<datalist>`, `<option>`, `<fieldset>`, `<textarea>` (en-US), `<input>`, `<output>`, `<progress>` и `<meter>`.


<meta> - элемент для описания метаданных - HTML

<meta> - элемент для описания метаданных
========================================

**HTML-элемент `<meta>`** представляет такие метаданные, которые не могут быть представлены другими HTML-метатегами, такими как `<base>`, `<link>`, `<script>`, `<style>` или `<title>`.

| Категории контента | Мета данные. Если задан `itemprop` атрибут: flow content, phrasing content. |
| --- | --- |
| Допустимое содержимое | Отсутствует - это пустой элемент. |
| Пропуск тегов | Так как это пустой элемент, то открывающий тег должен присутствовать, а закрывающий - отсутствовать. |
| Допустимые родители | `<meta charset>`, `<meta http-equiv>`: `<head>` элемент. Если `http-equiv` это не заявленная декларация, то может быть внутри элемента `<noscript>` или `<head>`. |
| Допустимые ARIA-роли | Отсутствуют |
| DOM-интерфейс | `HTMLMetaElement` (en-US) |

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

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

**Примечание:** атрибут `name` имеет особое значение для элемента `<meta>` и атрибут `itemprop` не должен быть задан в `<meta>` элементе в котором уже определены какие-либо `name`, `http-equiv` или `charset` атрибуты.

`charset`

Этот атрибут задаёт кодировку символов, используемую на странице. Он должен содержать стандартное имя IANA MIME для кодировки символов. Хотя стандарт не требует определённой кодировки, он рекомендует:

* Авторам рекомендуется использовать `UTF-8 (en-US)`.
* Не следует использовать ASCII-несовместимые кодировки, чтобы избежать угроз безопасности: браузеры, не поддерживающие их, могут интерпретировать вредоносный контент как HTML. Это относится к семейству кодировок `JIS_C6226-1983`, `JIS_X0212-1990`, `HZ-GB-2312`, `JOHAB` и `EBCDIC`.

**Примечание:** ASCII-несовместимые кодировки - это те, которые не преобразуют 8-битные коды точек `0x20`, `0x7E`, `0x0020`, `0x007E` в коды Unicode точек.

**Предупреждение:**

    + Авторы **не должны** использовать `CESU-8`, `UTF-7`, `BOCU-1` и/или `SCSU`, так как есть примеры атак межсайтового скриптинга (en-US) использующих данные кодировки.
    + Авторам не следует использовать кодировку `UTF-32`, потому что не все алгоритмы кодирования HTML5 могут отличить её от `UTF-16`.
     **Примечание:**
    + Указанный набор символов должен соответствовать одной странице.
     Нет веских оснований для объявления неточного набора символов.
    + `<meta>` элемент должен находиться внутри элемента `<head>` и задаваться в **1024 первых байтах** HTML страницы, поскольку некоторые браузеры смотрят только эти байты перед выбором кодировки.
    + Этот `<meta>` элемент - часть алгоритма, определяющего набор символов (algorithm to determine the character set) страницы, который браузер поддерживает. Заголовок `Content-Type` и любые Byte-Order Marks элементы переопределяют данный элемент.
    + Настоятельно рекомендуется определить кодировку символов. Если для страницы не определён набор символов, то некоторые cross-scripting технологии могут повредить страницу, например такие как UTF-7 fallback cross-scripting technique. Постоянная установка этого элемента будет защищать вас от этого риска.
    + Этот `<meta>` элемент это синоним для pre-HTML5 `<meta http-equiv="Content-Type" content="text/html; charset=IANAcharset">` где \*`IANAcharset` \*соответствует значению эквивалентного `charset` атрибута.
     Этот синтаксис по-прежнему разрешён, хотя и устарел и больше не рекомендуется.

`content`

Этот атрибут содержит значение для `http-equiv` или `name` атрибута, в зависимости от контекста.

`http-equiv`

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

`"content-language"`

Эта прагма определяет значение языка страницы по умолчанию.

**Примечание:** Не используйте эту прагму, так как она устарела Используйте глобальный атрибут `<html>` элемента вместо этого.

`"Content-Security-Policy"`

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

`"content-type"`

 Этот атрибут определяет MIME type документа. За ним следует синтаксис такой же как и в поле заголовка объекта содержимого HTTPI, однако как и внутри HTML-элемента, большинство этих значений не доступно.
 Поэтому допустимым синтаксисом для его содержимого является литеральная строка '`text/html`', за которой следует набор символов со следующим синтаксисом: '`; charset=`*`IANAcharset`*' где `IANAcharset` это предпочтительное *MIME имя* для набора символов, который определяется какIANA.

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

* Не используйте эту прагму, так как она устарела. Используйте атрибут`charset` в элементе `<meta>` вместо этого.
* `<meta>` не может быть использована для выбора типа документа в XHTML документе, или в HTML5 документе, за которым следует XHTML синтаксис, никогда не задавайте MIME тип как XHTML MIME. Это будет некорректно.
* Только HTML документ может использовать контент-тип, так что большинство из них являются неиспользуемыми, поэтому они являются устаревшими и заменяются `charset` атрибутом.

`"default-style"`

Специализация этой прагмы - предпочтительный стиль таблиц, используемый на странице. `content` атрибут должен содержать заголовок `<link>` элемента который `href` связывает атрибут с CSS таблцей стилей, или заголовок `<style>` элемента, который содержит CSS таблицу стилей.

`"refresh"`

Эта прагма определяет:

* Количество секунд перезагрузки таблицы, если `content` атрибут содержит только целое положительное число;
* Время, в количестве секунд, за которое страница должна быть перенаправлена на другую, если `content` атрибут содержит целое положительное число, заканчивающийся строкой '`;url=`' и корректный URL.

`"set-cookie"`

Эта прагма определяет cookie для страницы. Её содержимое должно заканчиваться синтаксисом, определяемым IETF HTTP Cookie Specification.

**Примечание:** Не используете эту прагму, так как она устарела. Используйте HTTP header set-cookie вместо этого.

`name`

 Этот атрибут определяет имя уровня документа метаданных.
 Его не следует устанавливать, если один из атрибутов `itemprop`, `http-equiv` или `charset` также указан в наборе.
 Имя этого документального уровня метаданных связано со значением, которое содержится в `content` атрибуте.Допустимые значения для имени элемента, со связанными с ними значениями, хранятся посредством `content` атрибута:

* `application-name`, определяет имя веб-приложения, запущенного на веб-странице;

**Примечание:** Браузеры могут использовать его для идентификации приложения. Он отличается от `<title>` элемента, который обычно состоит из имени приложения, но также может содержать специальную информацию, как например имя документа или статус;

    + Простые веб-страницы не определяют application-name meta.
* `автор` определяет в свободном формате имя автора документа;
* описание, содержащее краткое и точное резюме содержания страницы. В некоторых браузерах, среди которых Firefox и Opera, этот мета используется как описание страницы по умолчанию в закладке;
* генератор, содержащий в свободном формате идентификатор программного обеспечения, создавшего страницу;;
* Ключевые слова, представленные строками, разделёнными запятыми, связанные с содержанием страницы
* `referrer`
Экспериментальная возможность
 контролирует содержимое HTTP. `Referer` HTTP - заголовок, прикреплённый к любому запросу, отправленному из этого документа:

| `no-referrer` | Не отправлять HTTP `Referer` заголовок. |
| --- | --- |
| `origin` | Отправить оригинал. |
| `no-referrer-when-downgrade` | Отправить оригинал, как ссылку по умолчанию на безопасный пункт (https->https), но не отправлять ссылку на менее безопасную структуру (https->http). Это поведение по умолчанию. |
| `origin-when-crossorigin` | Отправляет полный URL (удалённый из параметров) при выполнении запроса с тем же источником, или только оригинал документа в других случаях. |
| `unsafe-URL` | Отправляет полный URL (удалённый из параметров), при выполнении запроса того же или перекрёстного происхождения. |

**Примечание:** Некоторые браузеры поддерживают ключевые слова всегда, по умолчанию и никогда для реферера. Эти значения устарели.

**Примечание:** Динамическая вставка `<meta name="referrer">` (с помощью document.write или appendChild) создаёт недетерминизм, когда дело доходит до отправки рефереров. Также стоит отметить, что когда определяется несколько конфликтующих политик, применяется No-referrer policy.Атрибут также может иметь значение, взятое из существующего листа определений WHATWG Wiki MetaExtensions page. Хотя ни один из них официально не был принят, в число предложений входят несколько часто используемых имён:
* `creator`, определят в свободном формате имя создателя документа. Это также может быть имя института. Если же имён больше чем одно, то несколько `<meta>` элементов должны быть использованы;
* `googlebot`, синоним `robots`, но только следует за Googlebot, сканирует индексы для Google;
* `publisher`, определяет в свободном формате имя того, кто опубликовал документ. Это также может быть имя института;
* `robots`, определяет поведение, поисковых роботов на странице. Список этих значений представлен ниже:

| Значение | Описание | Используется |
| --- | --- | --- |
| `index` | Позволяет роботу индексировать страницу | All |
| `noindex` | Освобождает робота от индексирования страниц | All |
| `follow` | Позволяет роботу переходить по ссылкам со страницы | All |
| `nofollow` | Запрещает роботу переходить по ссылкам со страницы | All |
| `none` | Эквивалентно `noindex, nofollow` | Google |
| `noodp` | Запрещает использование Open Directory Project описания, если таковые имеются, как описание страницы на странице результатов поиска | Google, Yahoo, Bing |
| `noarchive` | Запрещает поисковой системе кешировать содержимое страницы. | Google, Yahoo, Bing |
| `nosnippet` | Запрещает отображение любого описания страницы на странице результатов поиска | Google, Bing |
| `noimageindex` | Запрещает отображение этой страницы в качестве ссылающейся страницы индексированного изображения. | Google |
| `nocache` | Синоним `noarchive` | Bing |

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

    + Только кооперативные роботы будут следовать правилам, определённым именем роботов.
    + Роботу необходимо получить доступ к странице, чтобы считать мета значение. Если вы хотите скрыть от них информацию, то используйте *robots.txt* файл.
    + Если вы хотите удалить страницу индекса, изменение мета в noindex будет работать, но только тогда, когда робот снова посетит страницу. Убедитесь, что файл robots.txt не предотвращает такие посещения. Некоторые поисковые системы имеют инструменты, позволяющие быстро удалить какую-либо страницу.
    + Некоторые возможные значения взаимно исключают друг друга, такие как использование индекса и noindex или follow и nofollow одновременно. В этих случаях поведение робота не определено и может варьироваться от одного к другому. Поэтому избегайте этих случаев.
    + Некоторые поисковые роботы-роботы, такие как Google, Yahoo Search или Bing, поддерживают те же значения в директиве HTTP, X-Robot-Tags: это позволяет им использовать эту прагму для документов, отличных от HTML, например изображений.
* `slurp`,синоним `robots`, но следует только за Slurp, индексирующим роботом от Yahoo Search;Наконец несколько общих терминов:
    + `viewport`, который даёт подсказки о размере изначального размера viewport. Эта прагма используется только на некоторых мобильных устройствах.

| Значение | Допустимые значения | Описание |
| --- | --- | --- |
| `width` | целое положительное число или литерал `device-width` | Определяет ширину области просмотра в пикселях |
| `height` | целое положительное число или литерал `device-height` | Определяет высоту области просмотра в пикселях |
| `initial-scale` | положительное число между `0.0` и `10.0` | Определяет соотношение между шириной устройства и размером области просмотра |
| `maximum-scale` | положительное число между `0.0` и `10.0` | Определяет максимальное значение зума; должен быть больше или равен минимальному масштабу или быть неопределённым. |
| `minimum-scale` | положительное число между `0.0` и `10.0` | Определяет минимальное значение зума; должен быть меньше или равен максимальному масштабу или быть неопределённым. |
| `user-scalable` | булевское значение (да или нет) | Если весь набор содержит значения нет, то пользователю не доступен зум на веб-странице. По умолчанию задано значение да. |

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

    + Хотя и не стандартизирован, этот атрибут используется разными мобильными браузерами, например Safari Mobile, Firefox for Mobile or Opera Mobile.
    + Значения по умолчанию могут быть изменены у разных браузеров или устройств..
    + Для изучения этой прагмы на Firefox for Mobile, посмотрите статью this article.

`scheme`

 Этот атрибут определяет схему, которая описывает метаданные.
 Схема - это контекст, ведущий к правильной интерпретации `content` значения, например формата.

**Примечание:** Не используйте этот атрибут, так как он устарел. Для него нет никакой замены, поскольку реально он не использовался. Опустите его.

Замечания
---------

В зависимости от установленных атрибутов, тип метаданных может быть одним из следующих:

* Если в наборе `name`, то это *document-level metadata*, применяемая ко всей странице.
* Если в наборе`http-equiv` , то это *pragma directive*,
 то есть информация, веб-сервер предоставляет информацию о том, как должна обслуживаться веб-страница.
* Если в наборе `charset`, то это *charset declaration*,
 то есть кодировка, используемая для сериализованной формы веб-страницы.
* Если в наборе `itemprop`, то это *user-defined metadata*,
 прозрачна для агента пользователя, поскольку семантика метаданных зависит от пользователя.
Экспериментальная возможность
Пример
------

```html
<!-- В HTML5 -->
<meta charset="utf-8" />

<!-- Переход на другую страницу через три секунды -->
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org" />
```

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

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

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

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

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

* Другие элементы, содержащие метаданные: `<base>`, `<head>`, `<link>`, `<style>`,`<title>`.


<link>: Элемент - ссылка на внешний ресурс - HTML

<link>: Элемент - ссылка на внешний ресурс
==========================================

**Элемент HTML - Ссылка на Внешний Ресурс (`<link>`)** определяет отношения между текущим документом и внешним ресурсом. Этот элемент чаще всего используется для ссылки на stylesheets, а также для создания иконок сайта (как для иконок в стиле "favicon", так и для иконок домашних экранов и приложений мобильных устройств) среди прочего.

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

Чтобы подключить таблицу стилей, вы должны включить элемент `<link>` внутри вашего `<head>` следующим образом:

```html
<link href="main.css" rel="stylesheet" />
```

В этом простом примере указывается путь к таблице стилей внутри атрибута `href` и атрибут `rel` со значением `stylesheet`. `rel` означает "отношения (relationship)", и, вероятно, является одной из ключевых особенностей элемента `<link>` — значение сообщает как указанный элемент связан с содержащим его документом. Как вы увидите в нашем справочнике типы ссылок (en-US), есть много различных видов отношений.

Существует ряд других распространённых типов, с которыми вы столкнётесь. Например, ссылка на сайт иконок:

```html
<link rel="icon" href="favicon.ico" />
```

Есть ряд других значений `rel` для иконок, в основном, используемых для обозначения специальных типов иконок для использования на различных мобильных платформах, например:

```html
<link
 rel="apple-touch-icon-precomposed"
 sizes="114x114"
 href="apple-icon-114.png"
 type="image/png" />
```

Атрибут `sizes` определяет размер иконки, когда `type` содержит тип MIME связанного ресурса. Они предоставляют советы, позволяющие браузеру выбрать наиболее подходящую иконку.

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

```html
<link href="print.css" rel="stylesheet" media="print" />
<link
 href="mobile.css"
 rel="stylesheet"
 media="screen and (max-width: 600px)" />
```

В элемент `<link>` также были добавлены некоторые новые интересные возможности производительности и безопасности, к примеру:

```html
<link
 rel="preload"
 href="myFont.woff2"
 as="font"
 type="font/woff2"
 crossorigin="anonymous" />
```

Значение `rel` - `preload` указывает, что браузер должен предварительно загрузить этот ресурс (смотрите Предварительная загрузка контента при помощи rel="preload" (en-US) для более подробной информации), атрибут `as` указывает на определённый класс загружаемого контента. Атрибут `crossorigin` указывает должен ли ресурс загружаться с помощью запроса CORS.

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

* Элемент `<link>` может присутствовать в элементах `<head>` или `<body>`, в зависимости от того, имеет ли он тип ссылки, являющейся **body-ok**. Например, ссылка типа `stylesheet` является body-ok,и, поэтому, `<link rel="stylesheet">` допускается в body. Однако, это не очень хорошая практика использования; более осмысленно отделять ваши `<link>` от содержимого body, помещая их в `<head>`.
* При использовании `<link>` для установки favicon сайта, и когда ваш сайт использует Политику Безопасности Контента (CSP) для повышения безопасности, политика применяется к favicon. Если вы столкнулись с проблемой при загрузке favicon, проверьте, что `img-src` директива (en-US) заголовка `Content-Security-Policy` (en-US) не препятствует доступу к ней.
* Спецификации HTML и XHTML определяют обработчики событий для элемента `<link>`, но не указывают как они будут использоваться.
* В XHTML 1.0, пустые элементы, такие как `<link>`, требуют слеш: `<link />`.
* WebTV поддерживает использование значения `next` для `rel` в качестве предварительной загрузки следующей страницы в серии документов.
Атрибуты
--------

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

`as`

Этот атрибут используется только для элементов `<link>` с атрибутом `rel="preload"` или `rel="prefetch"`. Он указывает тип контента, загружаемого `<link>`, который необходим для определения приоритетов контента, сравнения запросов, применения корректного content security policy, и установки корректного `Accept` запрашиваемого заголовка.

`crossorigin`

Этот перечисляемый атрибут указывает, должен ли CORS использоваться при загрузки ресурса. CORS-поддерживаемые изображения могут быть повторно использованы в элементе `<canvas>` не *искажая* их. Допустимы значения:

`anonymous`

Cross-origin запрос (т.е. с HTTP-заголовком `Origin`) выполняется, но учётные данные не отправляются (т.е. нет cookie, сертификата X.509, или базовой аутентификации HTTP). Если сервер не передал учётные данные исходному сайту (нет настроенного HTTP-заголовка `Access-Control-Allow-Origin`), изображение будет искажено, а его использование ограничено.

`use-credentials`

Cross-origin запрос (т.е. с HTTP-заголовком `Origin`) выполняется вместе с отправкой учётных данных (т.е. выполняется аутентификация cookie, сертификата, и/или базового HTTP). Если сервер не передал учётные данные исходному сайту (через HTTP-заголовок `Access-Control-Allow-Credentials` (en-US)), ресурс будет искажён, а его использование ограничено.Если атрибут отсутствует, ресурс загружается без запроса CORS (т.е. без отправки HTTP-заголовка `Origin)`, предотвращая его незагрязненное использование. В случае невалидности, он обрабатывается как при использовании ключевого слова **anonymous.** Для получения дополнительной информации смотрите CORS settings attributes.

`href`

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

`hreflang`

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

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

Указывает на относительную важность ресурса. Приоритетные подсказки передаются используя значения:**`auto`**: указывает на **отсутствие предпочтений**. Браузер может использовать собственную эвристику для определения приоритетов ресурсов.**`high`**: указывает браузеру, что ресурс находится в **высоком** приоритете.**`low`**: указывает браузеру, что ресурс находится в **низком** приоритете.

>
> \*\*Примечание:\*\*Атрибут `importance` можно использовать только для элементов `<link>` с атрибутами `rel="preload"` или `rel="prefetch"`.
>
>
>

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

Содержит встроенные метаданные — криптографический хеш-код ресурса(файла) в кодировке base64, который вы сообщаете браузеру для загрузки. Браузер может использовать его для проверки, что загруженный ресурс был получен без неожиданных манипуляций. Смотрите Subresource Integrity (en-US).

`media`

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

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

* В HTML 4, это может быть только простой, разделённый пробелами, список литералов, описывающих медиа, т.е. media типы и группы, которые определены и допустимы в качестве значений для этого атрибута, такие как `print`, `screen`, `aural`, `braille`. HTML5 распространил это на любые медиавыражения, которые являются расширенным набором допустимых значений HTML 4.
* Браузеры, не поддерживающие медиавыражения, могут не распознать соответствующую ссылку; не забудьте установить резервные ссылки, ограниченные набором медиавыражений, определённым в HTML 4.

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

Строка, указывающая какой реферер использовать при загрузки ресурсов:

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

`rel`

Этот атрибут определяет отношения связываемого документа и текущего документа. Атрибут должен быть разделённым пробелами списком значений типов ссылки (en-US).

`sizes`

Этот атрибут определяет размеры иконки для визуальных медиа, содержащихся в ресурсе. Он должен быть представлен только, если `rel` содержит значение `icon` или нестандартный тип, например `apple-touch-icon` Apple. Может иметь следующие значения:

* `any`, означает, что иконка может быть масштабируема до любого размера, например в векторном формате `image/svg+xml`.
* пробелоразделенный список размеров, каждый в формате `<width in pixels>x<height in pixels>` или `<width in pixels>X<height in pixels>`. Каждый из этих размеров должен содержаться в ресурсе.

>
> \*\*Примечание:\*\*Большинство форматов иконок могут хранить только одну иконку, поэтому чаще всего `sizes` содержит только одну запись. MS's ICO формат, как и Apple's ICNS. ICO более распространены; вы должны использовать их.
>
>
>

`title`

Атрибут `title` имеет особое значение для элемента `<link>`. При использовании `<link rel="stylesheet">` он определяет предпочтительную или альтернативную таблицу стилей (en-US). Неверное использование может стать причиной игнорирования таблицы стилей.

`type`

Этот атрибут используется для определения типа связываемого контента. Значение атрибута должно быть типом MIME, такое как **text/html**, **text/css и т.д**. Обычно он используется для определения типа таблицы стилей, на которую делается ссылка (например, **text/css**), но, учитывая, что CSS является единственным языком таблиц стилей, используемым в сети, этот атрибут может быть пропущен, что является рекомендацией. Он также используется для типов ссылок `rel="preload"`, чтобы браузер загружал только те типы файлов, которые он поддерживает.

### Нестандартные атрибуты

`disabled`
Non-standard

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

>
> \*\*Примечание:\*\*Хотя в стандарте HTML нет атрибута `disabled`, атрибут `disabled` есть в объекте DOM `HTMLLinkElement`.
>
>
>

`methods`
Non-standard

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

`prefetch`
Non-standard
 Secure context

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

`target`
Non-standard

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

### Устаревшие атрибуты

`charset`

Этот атрибут определяет кодировку символов связываемого ресурса. Значение представляет собой список наборов символов, разделённый пробелами и/или запятыми, как определено в RFC 2045. Значение по умолчанию `iso-8859-1`.

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

`rev`

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

**Примечание:** Этот атрибут считается устаревшим жизненным стандартом WHATWG HTML (который является каноничной спецификацией MDN). Однако, стоит отметить, что `rev` *не* считается устаревшим в спецификации W3C. Стоит сказать, учитывая неопределённость, полагаться на `rev` не стоит.
 **Примечание:** Взамен, вы должны использовать атрибут `rel` с противоположным значением типов ссылки (en-US). Например, чтобы установить обратную ссылку для `made`, укажите `author`.Также, этот атрибут не означает "ревизия" и не должен использоваться с номером версии, даже если многие сайты используют его в этих целях.

Стилизация с CSS
----------------

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

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

### Включение таблицы стилей

Включение таблицы стилей на страницы имеет следующий синтаксис:

```html
<link href="style.css" rel="stylesheet" />
```

### Предоставление альтернативных таблиц стилей

Вы можете указать альтернативные таблицы стилей (en-US).

Пользователь может выбрать, какую таблицу стилей использовать, выбрав её в меню Вид > Стиль страницы. Это позволяет пользователям видеть мультиверсию страницы.

```html
<link href="default.css" rel="stylesheet" title="Default Style" />
<link href="fancy.css" rel="alternate stylesheet" title="Fancy" />
<link href="basic.css" rel="alternate stylesheet" title="Basic" />
```

### Предоставление иконок для различных контекстов использования

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

```html
<!-- third-generation iPad with high-resolution Retina display: -->
<link
 rel="apple-touch-icon-precomposed"
 sizes="144x144"
 href="favicon144.png" />
<!-- iPhone with high-resolution Retina display: -->
<link
 rel="apple-touch-icon-precomposed"
 sizes="114x114"
 href="favicon114.png" />
<!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png" />
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="favicon57.png" />
<!-- basic favicon -->
<link rel="icon" href="favicon32.png" />
```

### Условная загрузка ресурсов с медиавыражениями

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

```html
<link href="print.css" rel="stylesheet" media="print" />
<link href="mobile.css" rel="stylesheet" media="all" />
<link
 href="desktop.css"
 rel="stylesheet"
 media="screen and (min-width: 600px)" />
<link
 href="highres.css"
 rel="stylesheet"
 media="screen and (min-resolution: 300dpi)" />
```

### События загрузки таблицы стилей

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

```html
<script>
 var myStylesheet = document.querySelector("#my-stylesheet");

 myStylesheet.onload = function () {
 // Do something interesting; the sheet has been loaded
 };

 myStylesheet.onerror = function () {
 console.log("An error occurred loading the stylesheet!");
 };
</script>

<link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet" />
```

**Примечание:** Событие `load` запускается после загрузки и анализа таблицы стилей и всего импортируемого содержимого, непосредственно перед тем, как стили будут применены к содержимому.

### Preload примеры

Вы можете найти примеры `<link rel="preload">` в Preloading content with `rel="preload"` (en-US).

Техническое резюме
------------------

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

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

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

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

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

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

* `Link` (en-US) HTTP header
* Ryan Grove's <script> and <link> node event compatibility chart


<output>: Элемент вывода - HTML

<output>: Элемент вывода
========================

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

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

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

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

`for`

Пробело-разделяемый список `id` других элементов, указывающий, что эти элементы предоставили входные значения для (или иным образом повлияли) вычисления.

`form`

Элемент формы, с которым связан этот элемент ("владелец формы"). Значением атрибута должен быть `id` элемента `<form>` в том же документе. Этот атрибут не нужен, если элемент `<output>` является потомком элемента `<form>` (в этом случае эта форма является владельцем формы), или, если элемент `<output>` вообще не связан с формой.

`name`

Имя элемента; используется для идентификации этого `<output>` при отправке формы.

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

Эта форма содержит слайдер, значение которого находится в пределах от 0 до 100, и элемент `<input>`, в который можно ввести второе значение. Два числа складываются и результат отображается в элементе `<output>` каждый раз, когда значение любого управляющего элемента меняется.

```html
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="range" name="b" value="50" /> +
  <input type="number" name="a" value="10" /> =
  <output name="result">60</output>
</form>
```

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

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

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

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

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

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


<hr>: The Thematic Break (Horizontal Rule) element - HTML

<hr>: The Thematic Break (Horizontal Rule) element
==================================================

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

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

Historically, this has been presented as a horizontal rule or line. While it may still be displayed as a horizontal rule in visual browsers, this element is now defined in semantic terms, rather than presentational terms, so if you wish to draw a horizontal line, you should do so using appropriate CSS.

| Content categories | Flow content. |
| --- | --- |
| Permitted content | None, it is an empty element. |
| Tag omission | It must have start tag, but must not have an end tag. |
| Permitted parents | Any element that accepts flow content. |
| Implicit ARIA role | `separator (en-US)` |
| Permitted ARIA roles | `presentation (en-US)` or `none (en-US)` |
| DOM interface | `HTMLHRElement` (en-US) |

Attributes
----------

This element's attributes include the global attributes.

`align`
Устарело

Задаёт правило выравнивания.По умолчанию значение выставлено как **left**

`color`
Non-standard

Задаёт цвет линии

`noshade`
Устарело

Sets the rule to have no shading.

`size`
Устарело

Устанавливает высоту в px

`width`
Устарело

Задаёт длину линии в px либо в %

Example
-------

### HTML

```html
<p>
  Это первый параграф текста Это первый параграф текста Это первый параграф
  текста Это первый параграф текста
</p>

<hr />

<p>
  Это второй параграф текста Это второй параграф текста Это второй параграф
  текста Это второй параграф текста
</p>
```

### Result

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

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

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

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

See also
--------

* `<p>`