<bdi> - HTML

<bdi>
=====

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

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

Этот элемент полезен при встраивании текста с неизвестным направлением (например, из базы данных) внутрь текста с заданным направлением.

**Примечание:** Хотя тот же эффект может быть достигнут применением CSS правила `unicode-bidi` (en-US)`: isolate` к элементу `<span>` или другому элементу форматирования текста, семантическое значение передаётся только с помощью элемента `<bdi>`. Тем более, что браузеры могут игнорировать стили. В этом случае, текст будет отображён корректно при использовании HTML-элемента, и некорректно при использовании только CSS стилей.

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

Attributes
----------

Like all other HTML elements, this element has the global attributes (en-US), with a slight semantic difference: the **dir** attribute is not inherited. If not set, its default value is the `auto` which let the browser decide the direction based on the element's content.

Example
-------

```html
<p dir="ltr">
  This arabic word <bdi>ARABIC_PLACEHOLDER</bdi> is automatically displayed
  right-to-left.
</p>
```

### Result

This arabic word REDLOHECALP\_CIBARA is automatically displayed right-to-left.

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

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

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

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

See also
--------

* Related HTML element: `<bdo>`
* Related HTML properties: `direction`, `unicode-bidi` (en-US)


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

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

**HTML-элемент `<source>`** указывает несколько медиа-ресурсов для элементов `<picture>`, `<video>` и `<audio>`. Это пустой элемент. Он обычно используется для обслуживания одного и того же медиа-контента в нескольких форматах, поддерживаемых различными браузерами (en-US).

| Категории контента | Нет |
| --- | --- |
| Допустимый контент | Нет, это пустой элемент. |
| Пропуск тегов | Должен иметь открывающий тег; закрывающий тег необязателен. |
| Допустимые родители | Медиа-элементы —`<audio>` или `<video>`—должен быть помещён перед любым потоковым контентом (en-US) или элементом`<track>`.Элемент `<picture>` , должен быть помещён перед элементом `<img>`. |
| Допустимые ARIA-роли | Нет |
| DOM-интерфейс | `HTMLSourceElement` (en-US) |

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

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

1. адреса изображения (URL);
2. дескриптора ширины, представляющего собой целое положительное число, за которым следует `'w'`. Значением по умолчанию, если оно отсутствует, является бесконечность.
3. дескриптора плотности пикселей, представляющее собой положительное десятичное число, за которым следует `'x'`. Значением по умолчанию, если оно отсутствует, является `1x`.

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

Список размеров изображений для разных размеров страниц. Он состоит из разделённых запятыми медиавыражений со значениями ширины изображения. Эта информация используется браузером перед выкладкой страницы для определения конкретного изображения, заданного в атрибуте `srcset`. Атрибут `sizes` работает только тогда, когда элемент `<source>` расположен внутри элемента `<picture>`.

`src`

Требуемый для элементов `<audio>` и `<video>` адрес медиа-ресурсов. Значение этого атрибута игнорируется браузером, когда элемент `<source>` размещён внутри элемента `<picture>`.

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

Список из одной или нескольких строк, разделённых запятыми, определяющий набор возможных изображений, представленных для отображения в браузере. Каждая строка может состоять из:Каждая строка списка должна содержать по крайней мере дескриптор ширины или дескриптор плотности пикселей.Браузер выбирает самое подходящее изображение для отображения в данный момент времени.Атрибут `srcset` работает только в том случае, когда элемент `<source>` находится внутри элемента `<picture>`.

`type`

MIME-тип ресурса, опционально содержащий параметр `codecs`. Для получения полной информации по указанию кодеков смотрите RFC 4281.

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

Определяет медиавыражение (en-US) , согласно которому будет выводиться изображение. Работает только в элементе `<picture>`.

Если атрибут `type` не указан, то он запрашивается с сервера и проверяется, может ли user agent его обрабатывать. Если он не может быть обработан, проверяется следующий `<source>`. Если атрибут `type` указан, он сравнивается с типами, которые может поддерживать user agent, и если он не распознан, сервер даже не запрашивается, вместо этого проверяется следующий элемент `<source>`.

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

This example demonstrates how to offer a video in Ogg format for users whose browsers support Ogg format, and a QuickTime format video for users whose browsers support that. If the `audio` or `video` element is not supported by the browser, a notice is displayed instead. If the browser supports the element but does not support any of the specified formats, an `error` event is raised and the default media controls (if enabled) will indicate an error. See also the list of media formats supported by the audio and video elements (en-US) in various browsers.

```html
<video controls>
  <source src="foo.webm" type="video/webm" />
  <source src="foo.ogg" type="video/ogg" />
  <source src="foo.mov" type="video/quicktime" />
  I'm sorry; your browser doesn't support HTML5 video.
</video>
```

For more examples, see Using audio and video in Firefox (en-US).

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

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

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

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

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

* Элемент `<picture>`
* Элемент `<audio>`
* Элемент `<video>`


<html> - HTML

<html>
======

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

| Категории контента | Отсутствуют. |
| --- | --- |
| Допустимое содержимое | Один элемент `<head>`, за которым следует один элемент `<body>`. |
| Пропуск тегов | Открывающий тег может быть пропущен, если первое, что находится внутри элемента `<html>`, не является комментарием. В HTML5 закрывающий тег может быть пропущен. В старых версиях HTML, если сразу за элементом `<html>` следует комментарий (при наличии элемента `<body>`), то закрывающий тег пропускать нельзя. |
| Допустимые родители | Отсутствуют. Это корневой элемент документа. |
| Допустимые ARIA-роли | Нет |
| DOM-интерфейс | `HTMLHtmlElement` (en-US) |

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

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

`manifest`

Определяет URI (en-US) файла манифеста, указывающего ресурсы, которые должны быть сохранены в локальном кеше. Смотрите Использование кеша приложений.

`version`

Определяет версию HTML DTD (Document Type Definition, больше известное как Doctype), которая управляет текущим документом. Этот атрибут не нужен, потому что он является избыточным, так как есть информация, указываемая в объявлении типа документа.

`xmlns`

Определяет пространство имён (en-US) XHTML-документа. Значение по умолчанию `"http://www.w3.org/1999/xhtml"`. Это требуется при парсинге (en-US) документов с помощью парсера (en-US) XML и необязательно для документов `text/html`.

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

```html
<!doctype html>
<html lang="en">
  <head>
    ...
  </head>
  <body>
    ...
  </body>
</html>
```

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

Добавление атрибута `lang` с допустимым (валидным) идентификатором языка (определены в документе IETF BCP47) в элемент `<html>` поможет технологии чтения с экрана правильно определить язык. Идентификатор языка должен описывать язык, который используется большей частью содержимого страницы. Без него программы чтения с экрана, как правило, по умолчанию используют язык операционной системы, который может может стать причиной неправильного произношения.

Добавление валидного атрибута `lang` в элемент `<html>` также гарантирует, что важные метаданные, содержащиеся в элементе `<head>`, например заголовок страницы `<title>`, также будут объявлены правильно.

* MDN Understanding WCAG, Guideline 3.1 explanations (en-US)
* Understanding Success Criterion 3.1.1 | W3C Understanding WCAG 2.0
Спецификации
------------

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

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

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

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

* Элемент верхнего уровня MathML: `<math>`
* Элемент верхнего уровня SVG: `<svg>`


<figure>: Элемент иллюстрации с необязательной подписью - HTML

<figure>: Элемент иллюстрации с необязательной подписью
=======================================================

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

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

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

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

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

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

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

### Иллюстрации

```html
<!-- Just an image -->
<figure>
  <img
 src="https://developer.mozilla.org/static/img/favicon144.png"
 alt="The beautiful MDN logo." />
</figure>

<!-- Image with a caption -->
<figure>
  <img
 src="https://developer.mozilla.org/static/img/favicon144.png"
 alt="The beautiful MDN logo." />
  <figcaption>MDN Logo</figcaption>
</figure>
```

### Фрагменты кода

```html
<figure>
  <figcaption>Get browser details using <code>navigator</code>.</figcaption>
  <pre>
function NavigatorExample() {
  var txt;
  txt = "Browser CodeName: " + navigator.appCodeName + "; ";
  txt+= "Browser Name: " + navigator.appName + "; ";
  txt+= "Browser Version: " + navigator.appVersion  + "; ";
  txt+= "Cookies Enabled: " + navigator.cookieEnabled  + "; ";
  txt+= "Platform: " + navigator.platform  + "; ";
  txt+= "User-agent header: " + navigator.userAgent  + "; ";
  console.log("NavigatorExample", txt);
}
  </pre>
</figure>
```

### Цитирования

```html
<figure>
  <figcaption><cite>Edsger Dijkstra:</cite></figcaption>
  <blockquote>
    If debugging is the process of removing software bugs, then programming must
    be the process of putting them in.
  </blockquote>
</figure>
```

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

### Стихи

```html
<figure>
  <p style="white-space:pre">
    Bid me discourse, I will enchant thine ear, Or like a fairy trip upon the
    green, Or, like a nymph, with long dishevell'd hair, Dance on the sands, and
    yet no footing seen: Love is a spirit all compact of fire, Not gross to
    sink, but light, and will aspire.
  </p>
  <figcaption><cite>Venus and Adonis</cite>, by William Shakespeare</figcaption>
</figure>
```

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

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

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

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

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

* Элемент `<figcaption>`.


<mark> - HTML

<mark>
======

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

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

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

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

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

* В цитате или другом блоке, выделенный текст, как правило, отмечает текст, который ссылается на внешнюю цитату, или помечается для конкретного пристального внимания, даже если первоначальный автор не считает важным.
* В основном тексте, выделенный текст, как правило, отмечает текст, который может иметь особое значение для текущей деятельности пользователя, например, результаты поиска.
* Не используйте элемент `<mark>` для выделения синтаксиса; используйте элемент `<span>` для этих целей.
* Не путайте элемент `<mark>` с элементом `<strong>`. Элемент `<strong>` используется для обозначения участков текста *важности* в контексте текста, когда элемент `<mark>` используется для обозначения участков текста, имеющих *отношение* к другому контексту.
Пример
------

```html
<p>Элемент <mark> используется для <mark>выделения</mark> текста</p>
```

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

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

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

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

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

* Другие семантики текстов на уровне элементов: `<a>`, `<em>`, `<strong>`, `<cite>`, `<q>` (en-US), `<dfn>`, `<abbr>`, `<time>`, `<code>`, `<var>` (en-US), `<samp>` (en-US), `<kbd>`, `<sub>` (en-US), `<sup>` (en-US), `<i>` (en-US), `<b>`, `<mark>`, `<ruby>`, `<rp>` (en-US), `<rt>` (en-US)


<td>: элемент ячейки таблицы данных - HTML

<td>: элемент ячейки таблицы данных
===================================

**HTML-элемент `<td>`** определяет ячейку таблицы которая содержит данные. Участвует в *табличной модели*.

| Категория контента | None. |
| --- | --- |
| Допустимое содержимое | Содержимое поток. |
| Пропуск тега | Начальный тег обязательный. Закрывающий тег может быть пропущен, если сразу за ним следует элемент `<th>` (en-US) или `<td>`, или если больше нет данных в его родительском элементе. |
| Допустимые родители | Элемент `<tr>` (en-US). |
| Допустимые ARIA-роли | Любые |
| DOM-интерфейс | `HTMLTableDataCellElement` (en-US) |

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

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

`abbr`

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

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

`align`
Устарело

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

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

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

* Чтобы добиться такого же эффекта как при `left`, `center`, `right` или `justify` значениях, используйте их как параметры CSS-свойства `text-align`.
* Чтобы добиться эффекта как `char` значение в CSS3, вы можете использовать значение `char` как значение свойства `text-align` Не реализовано.

`axis`

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

**Примечание:** Не используйте этот атрибут, он устарел в последней версии стандарта: вместо этого используйте атрибут `scope`.

`bgcolor`
Non-standard

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

**Примечание:** Не используйте этот атрибут, поскольку он нестандартный: элемент `<td>` должен быть стилизован с помощью CSS. Чтобы получить аналогичный эффект как атрибут **bgcolor**, используйте CSS свойство `background-color`.

`char`
Устарело

Этот атрибут используется для определения символа по которому происходит выравнивание в ячейке. Типичный случай когда для него задают значение периода (.) когда необходимо выровнять числовые или денежные значения. Если `align` не задан. то атрибут `char` игнорируется.

**Примечание:** Не используйте этот атрибут, тк он устарел (и больше не поддерживается) в последней версии стандарта. Достигнуть такого же эффекта как от `char` (en-US), в CSS3 вы можете you can use the character set using the `char` (en-US) attribute as the value of the `text-align` property Не реализовано.

`charoff`
Устарело
,

Этот атрибут атрибут включает количество символов на которое смещаются при выравнивании данные от установленного **char** атрибута.

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

`colspan`

Этот атрибут содержит положительное целое число указывающее сколько столбцов необходимо объединить. По умолчанию значение равно `1`. Значения больше 1000 будет считаться некорректным и будет использовать значение по умолчанию (1).

`headers`

Этот атрибут содержит список срок разделённых пробелами, каждая соответствует **id** атрибуту `<th>` (en-US) элементов которые использует этот элемент.

`rowspan`

Этот атрибут содержит положительное целое число указывающее какое количество строк необходимо объединить. По умолчанию значение равно `1`; Если его значение `0`, тогда его действие распространяется до конца табличной секции (`<thead>` (en-US), `<tbody>` (en-US), `<tfoot>`, даже если неявно определено чему ячейка принадлежит. Значения выше 65534 сокращаются до 65534.

`valign`
Устарело

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

* `baseline`, поместит текст ближе к нижней части ячейки, но выровняет его по базовой линии символов, а не нижней линии. Если все символы одного размера, тогда имеет такой же эффект как `bottom`.
* `bottom`, поместит текст как можно ближе к нижней части ячейки
* `middle`, выравнивает текст по центру ячейки
* и `top`, который будет выравнивать текст как можно ближе к верхней части ячейки.

**Примечание:** Не используйте этот атрибут, он устарел (не поддерживается) в последней версии стандарта: вместо этого используйте CSS-свойство `vertical-align`.

`width`
Устарело

Этот атрибут устанавливает рекомендуемую ширину ячейки. Свойства cellspacing (en-US) и cellpadding (en-US) могут добавить дополнительное пространство и ширина элемента `<col>` может иметь некоторый эффект. Обычно если ширина столбца слишком узкая чтобы показать конкретную ячейку должным образом, она может быть расширена при отображении.

**Примечание:** Не используйте этот атрибут, он устарел в последней версии стандарта: вместо этого используйте CSS-свойство `width`.

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

Смотрите страницу `<table>` (en-US) с примерами `<td>`.

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

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

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

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

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

* Другие табличные HTML-элементы: `<caption>`, `<col>`, `<colgroup>` (en-US), `<table>` (en-US), `<tbody>` (en-US), `<tfoot>`, `<th>` (en-US), `<thead>` (en-US), `<tr>` (en-US).


<font> - HTML

<font>
======

Summary
-------

*HTML фонт элемент*(`<font>`) определяет размер шрифта, цвета и лицо для его содержимого

**Примечание:** Примечание по применению:\*\*Не используйте этот элемент!\*\*Хотя он был нормализован в HTML 3.2, он был устаревшим в HTML 4.01, в то время как все элементы, относящиеся только к стилю, затем устарели в HTML5.Начиная с HTML 4, HTML больше не передаёт информацию о стиле (вне элемента `<style>` или атрибута style для каждого элемента). Для любой новой веб-разработки стили должны быть написаны только с использованием CSS.
 Предыдущее поведение элемента `<font>` может быть достигнуто и даже лучше контролироваться с помощью CSS CSS-свойств шрифтов.

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

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

`color`

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

`face`

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

`size`

Этот атрибут определяет размер шрифта как числовое или относительное значение. Числовые значения варьируются от 1 до 7, при этом 1 является наименьшим, а 3 - значением по умолчанию. Его можно определить с использованием относительного значения, например, +2 или -3, которые устанавливают его относительно значения атрибута `size` (en-US) `<basefont>` (en-US), или по отношению к 3, значение по умолчанию, если оно не существует.

DOM interface
-------------

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

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

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


<article> - HTML

<article>
=========

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

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

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

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

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

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

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

* Каждый элемент `<article>` должен быть идентифицирован, обычно путём добавления заголовка (элементы `<h1>`-`<h6>`) в качестве дочернего элемента.
* Когда элемент `<article>` является вложенным, внутренний элемент представляет собой контент связанный с внешним элементом. Например, комментарии к публикации в блоге могут быть элементами `<article>`, вложенными в другой `<article>`, являющийся публикацией в блоге.
* Информация об авторе в элементе `<article>` может быть представлена через элемент `<address>`, но это не применимо к вложенным элементам `<article>`.
* Дата и время публикации в элементе `<article>` могут быть описаны с помощью атрибута `datetime` элемента `<time>`. *Обратите внимание, что атрибут `pubdate` элемента `<time>` больше не является частью стандарта W3C HTML5.*
Примеры
-------

```html
<article class="film\_review">
  <header>
    <h2>Парк Юрского периода</h2>
  </header>
  <section class="main\_review">
    <p>Динозавры были величественны!</p>
  </section>
  <section class="user\_reviews">
    <article class="user\_review">
      <p>Слишком страшно для меня.</p>
      <footer>
        <p>
          Опубликовано
          <time datetime="2015-05-16 19:00">16 мая</time>
          Лизой.
        </p>
      </footer>
    </article>
    <article class="user\_review">
      <p>Я согласен, динозавры мои любимцы.</p>
      <footer>
        <p>
          Опубликовано
          <time datetime="2015-05-17 19:00">17 мая</time>
          Томом.
        </p>
      </footer>
    </article>
  </section>
  <footer>
    <p>
      Опубликовано
      <time datetime="2015-05-15 19:00">15 мая</time>
      Стаффом.
    </p>
  </footer>
</article>
```

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

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

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

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

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

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


<ins> - HTML

<ins>
=====

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

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

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

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

`cite`

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

`datetime`

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

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

```html
<ins>Этот текст подчеркнут.</ins>
```

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

**Этот текст подчеркнут.**

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

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

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

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

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

* Элемент `<del>` для помещения удаления в документе.


<ul> - элемент «Неупорядоченный список» - HTML

<ul> - элемент «Неупорядоченный список»
=======================================

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

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

| Категории контента (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-интерфейс | `HTMLUListElement` (en-US) |

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

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

`compact`
Устарело

Атрибут логического значения (bool) говорит о том, что список будет представлен в более компактном стиле. Интерпретация этого атрибута зависит от user agent и не работает со всеми браузерами.

**Предупреждение:** Не используйте этот атрибут, ибо он устаревший и больше не используется, используйте CSS. Для схожего эффекта с `compact`, подойдёт свойство CSS `line-height` с значением `80%`.

`type`
Устарело

Этот атрибут добавляет маркеры (bullets) в список. Значения установлены под HTML3.2 и переходными на HTML 4.0/4.01 являются:

* `circle`
* `disc`
* `square` Четвёртый маркер задан в интерфейсе WebTV, но не все браузеры смогут его отобразить: `triangle`.Если данный атрибут отсутствует и если атрибут CSS `list-style-type` (en-US) не присвоен к данному элементу, пользовательский агент (user agent) выберет маркер в зависимости от вложенного уровня в списке.

**Предупреждение:** Не используйте этот атрибут, ибо он устаревший; используйте свойство CSS `list-style-type` (en-US).

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

* Элемент `<ul>` используется для группировки непронумерованных элементов данных, и их последовательность в списке не нужна. Что характерно, непорядочные списки используют маркеры, которые могут быть разных форм (в форме точки, круга или прямоугольной формы). Стиль задаётся не в HTML, а со связанным с ним CSS, используя свойство `list-style-type` (en-US).
* Элементы `<ul>` и `<ol>` могут быть вложены на любом уровне. Более того, вложенные списки могут чередоваться между `<ol>` и `<ul>` без ограничений.
* Элементы `<ol>` и `<ul>` используются для списков. Различие лишь в том, что в элементе `<ol>` порядок имеет значение. Согласно эмпирической закономерности (или правилу большого пальца), чтобы определить, какую маркировку использовать, попробуйте поменять порядок элементов в списке. Если суть списка меняется, то тогда подойдёт элемент `<ol>`, в противном случае используйте `<ul>`.
Примеры
-------

### Простой список

```html
<ul>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>
```

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

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

```html
<ul>
  <li>first item</li>
  <li>
    second item
    <!-- Закрывающий тег </li> пишем не здесь! -->
    <ul>
      <li>second item first subitem</li>
      <li>
        second item second subitem
        <!-- То же самое для второго вложенного неупорядоченного списка! -->
        <ul>
          <li>second item second subitem first sub-subitem</li>
          <li>second item second subitem second sub-subitem</li>
          <li>second item second subitem third sub-subitem</li>
        </ul>
      </li>
      <!-- Закрывающий тег </li>, который
закрывает третий неупорядоченный список -->
      <li>second item third subitem</li>
    </ul>
    <!-- Вот закрывающий тег </li> -->
  </li>
  <li>third item</li>
</ul>
```

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

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

```html
<ul>
  <li>first item</li>
  <li>
    second item
    <!-- Закрывающий тег </li> пишем не здесь! -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
    <!-- Вот закрывающий тег </li> -->
  </li>
  <li>third item</li>
</ul>
```

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

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

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

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

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

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

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


<main> - HTML

<main>
======

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

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

Документ не должен иметь более одного элемента `<main>` у которого не указан атрибут `hidden`.

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

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

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

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

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

`<main>` не вносит вклад в структуру документа; то есть, в отличие от таких элементов, как `<body>`, заголовков, таких как `<h2>` (en-US) и т.п., `<main>` не влияет на концепцию DOM структуры страницы. Он носит исключительно информативный характер.

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

```html
<!-- другой контент -->

<main>
  <h1>Яблоки</h1>
  <p>Яблоко - плод яблони, который употребляется в пищу в свежем виде, служит сырьём в кулинарии и для приготовления напитков.</p>

  <article>
    <h2>Сорт "Ред Делишес"</h2>
    <p>Эти ярко-красные яблоки являются одними из самых популярных в Соединённых Штатах.</p>
    <p>... </p>
    <p>... </p>
  </article>

  <article>
    <h2>Сорт "Гренни Смит";/h2>
    <p>Эти сочные, зелёные яблоки являются одними из самых популярных в мире.</p>
    <p>... </p>
    <p>... </p>
  </article>
</main>

<!-- другой контент -->
```

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

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

### Ориентир

Элемент `<main>` ведёт себя как роль-ориентир `main` (en-US). Ориентиры могут использоваться вспомогательными технологиями для быстрой идентификации и навигации по большим разделам документа. Предпочтительно использовать элемент `<main>` вместо объявления `role="main"`, если не нужна поддержка старых браузеров.

### Пропуск навигации

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

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

```html
<body>
  <a href="#main-content">Перейти к основному контенту</a>

  <!-- навигация и заголовок контента -->

  <main id="main-content">
    <!-- основной контент страницы -->
  </main>
</body>
```

* WebAIM: Ссылки "Пропуск навигации"
### Режим чтения

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

* Создание сайтов для режима чтения Safari и других программ чтения.
Спецификации
------------

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

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

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

Элемент `<main>` широко поддерживается. Для Internet Explorer 11 и ниже предлагается добавить роль ARIA `"main"` в элемент `<main>`, чтобы обеспечит его доступность (программы для чтения с экрана, такие как JAWS, используемые совместно со старыми версиями Internet Explorer, смогут понять семантическое значение элемента `<main>` после добавления атрибута `role`).

```html
<main role="main">...</main>
```

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

* Основные структурные элементы: `<html>`, `<head>`, `<body>`
* Связанные с этим разделом элементы: `<article>`, `<aside>`, `<footer>`, `<header>`, or `<nav>`
* ARIA: роль main (en-US)


<datalist> - HTML

<datalist>
==========

**HTML-элемент `<datalist>`** содержит набор опций (`<option>`), доступных для выбора. Выбранное значение будет установлено для элемента `<input>`, с атрибутом `list`.

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

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

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

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

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

```html
<label for="myBrowser">Choose a browser from this list:</label>
<input list="browsers" id="myBrowser" name="myBrowser" />
<datalist id="browsers">
  <option value="Chrome"></option>
  <option value="Firefox"></option>
  <option value="Internet Explorer"></option>
  <option value="Opera"></option>
  <option value="Safari"></option>
  <option value="Microsoft Edge"></option>
</datalist>
```

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

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

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

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

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

Полифил
-------

Для использованиях в браузерах, которые не поддерживают данную технологию, рекомендуется использовать полифил: datalist-polyfill.

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

* Элемент `<input>` , в особенности его атрибут `list`;
* Элемент `<option>`.


<b> - жирное выделение текста - HTML

<b> - жирное выделение текста
=============================

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

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

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

Этот элемент содержит только global attributes (en-US).

Указания по применению
----------------------

* Используйте `<b>` в таких случаях, как ключевые слова в кратком содержании, имена продуктов в отзыве, или других частях текста, которые обычно выделяют жирным.
* Не путать элемент `<b>` с `<strong>`, `<em>`, или `<mark>` элементами. Элемент `<strong>` представляет собой текст определённой *важности*, `<em>` делает некий акцент на тексте, и элемент `<mark>` представляет собой текст определённой *значимости*. Элемент `<b>` не содержит специальной семантической информации, используйте его только в том случае, если другие не подошли.
* Также не помечайте заглавия и заголовки элементом `<b>`. Для этих целей используйте элементы с `<h1>` (en-US) до `<h6>` (en-US) . К тому же CSS может изменять стандартный вид этих элементов, в результате чего они *не всегда* будут выделены жирным текстом.
* Хорошей практикой является использование атрибута **class** на элементе `<b>` для того, чтобы передать дополнительную семантическую информацию (например, `<b class="lead">` для первого предложения в абзаце). Это упрощает разработку различных стилизаций веб-документа без надобности менять его HTML-код.
* Исторически, элемент `<b>` был задуман для выделения текста жирным шрифтом. Информация о стилизации устарела, начиная с HTML4, значение элемента `<b>` было изменено.
* Если нет семантической причины использовать элемент <b>, использование css свойства font-weight (en-US) со значением bold будет более грамотным выбором для изменения толщины текста.
Пример
------

```css
.keywords {
  color: red;
}
```

```html
<p>
  В этой статье описывается элемент для форматирования
  <b class="keywords">текста</b>. Она объясняет его использование в документе
  <b class="keywords">HTML</b>.
</p>
```

Ключевые слова с тегом `<b>`, отображаемые со стилем, выделены жирным шрифтом.

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

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

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

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

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

* Другие элементы содержащие text-level semantics: `<a>`, `<em>`, `<strong>`, `<small>` (en-US), `<cite>`, `<q>` (en-US), `<dfn>`, `<abbr>`, `<time>`, `<code>`, `<var>` (en-US), `<samp>` (en-US), `<kbd>`, `<sub>` (en-US), `<sup>` (en-US), `<i>` (en-US), `<mark>`, `<ruby>`, `<rp>` (en-US), `<rt>` (en-US), `<bdo>`, `<span>`, `<br>`, `<wbr>`.
* Using <b> and <i> elements (W3C)


<acronym> - HTML

<acronym>
=========

Аннотация
---------

Элемент акронима (`<acronym>)` позволяет явно указать, что данная последовательность букв, являющуюся акронимом или аббревиатурой.

>
> \*\*Примечание:\*\*Этот элемент был убран из спецификации HTML5, поэтому его не рекомендуется использовать.Вместо него используйте элемент `<abbr>`.
>
>
>

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

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

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

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

>
> \*\*Примечание:\*\*Вплоть до Gecko 1.9.2 Firefox реализует для этого элемента интерфейс `HTMLSpanElement` (en-US).
>
>
>

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

```html
<p>
  The <acronym title="World Wide Web">WWW</acronym> is only one component of the
  Internet.
</p>
```

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

Хотя этого элемент употребляется чисто для удобств автора, разные браузеры отрисовывают его по-разному:

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

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

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

| Specification |
| --- |
| HTML Standard # acronym |

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

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

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

* `<abbr>`


<wbr> - HTML

<wbr>
=====

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

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

| Категории контента | Основной поток, фразовый контент. |
| --- | --- |
| Допустимое содержимое | Отсутствует |
| Пропуск тегов | It is an empty element; it must have a start tag, but must not have an end tag. |
| Допустимые родители | Любой элемент принимающий фразовый контент. |
| Допустимые ARIA-роли | Любые |
| DOM-интерфейс | `HTMLElement` |

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

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

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

На страницах в кодировке UTF-8, элемент `<wbr>` ведёт себя как кодовое значение `U+200B ZERO-WIDTH SPACE` (пробел нулевой ширины). В частности, он ведёт себя как кодовое значение Unicode Bidi BN, то есть он не влияет на порядок bidi-направления (двунаправленного потока) `<div dir=rtl>123,<wbr>456</div>`: отображается, если выражение не разбито на две строки, `123 456` и не `456,123`.

По той же причине, элемент `<wbr>` не вводит дефис в точке разрыва строки. Чтобы дефис отображался только в конце строки, используйте вместо него символ «мягкого дефиса» (``).

Этот элемент был впервые реализован в Internet Explorer 5.5 и был официально определён в HTML5.

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

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

```html
<p>
  http://this<wbr />.is<wbr />.a<wbr />.really<wbr />.long<wbr />.example<wbr />.com/With<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages
</p>
```

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

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

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

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

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

* `overflow-wrap`
* `word-break`
* `hyphens`


<span> - HTML

<span>
======

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

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

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

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

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

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

### HTML

```html
<p><span>Какой-нибудь текст</span></p>
```

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

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

### HTML

```html
<li>
  <span>
    <a href="portfolio.html" target="\_blank">Посмотреть моё портфолио</a>
  </span>
</li>
```

### CSS

```css
li span {
  background: gold;
}
```

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

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

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

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

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

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

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


<caption>: The Table Caption element - HTML

<caption>: The Table Caption element
====================================

**HTML** элемент заголовка таблицы (**`<caption>`**) определяет название (заголовок) таблицы. Если этот элемент используется, он *всегда* должен быть первым вложенным элементом тэга `<table>` (en-US). Внешний вид и расположение заголовка по отношению к самой таблице может быть изменено с помощью стилей CSS `caption-side` (en-US) and `text-align`.

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

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

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

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

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

`align`

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

`left`

Заголовок отображается слева от таблицы.

`top`

Заголовок отображается над таблицей.

`right`

Заголовок отображается справа от таблицы.

`bottom`

Заголовок отображается под таблицей.

**Примечание:** Не используйте этот атрибут, так как он устарел. Элемент `<caption>` должен быть стилизован с использованием свойств CSS `caption-side` (en-US) и`text-align`.

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

Когда элемент `<table>` (en-US), содержащий `<caption>` является единственным потомком элемента `<figure>`, вам следует использовать элемент `<figcaption>` вместо `<caption>`.

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

Просто пример, представляющий таблицу, которая содержит заголовок.

```html
<table>
  <caption>
    Example Caption
  </caption>
  <tr>
    <th>Login</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>user1</td>
    <td>user1@sample.com</td>
  </tr>
  <tr>
    <td>user2</td>
    <td>user2@sample.com</td>
  </tr>
</table>
```

```
caption {
  caption-side: top;
  align: right;
}
table {
  border-collapse: collapse;
  border-spacing: 0px;
}
table,
th,
td {
  border: 1px solid black;
}
```

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

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

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

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

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

* Другие связанные с таблицей HTML-элементы: `<col>`, `<colgroup>` (en-US), `<table>` (en-US), `<tbody>` (en-US), `<td>`, `<tfoot>`, `<th>` (en-US), `<thead>` (en-US), `<tr>` (en-US);
* CSS-свойства, которые могут быть применены для стилизации элемента `<caption>`:
    + `text-align`, `caption-side` (en-US).


<del>: The Deleted Text element - HTML

<del>: The Deleted Text element
===============================

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

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

Этот элемент часто (но не обязательно) отображается с помощью применения зачёркнутого стиля к тексту.

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

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

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

`cite`

URI для ресурса, который объясняет изменение (например, протоколы соединений).

`datetime`

Этот атрибут устанавливает время и дату изменение и должен представлять собой строку с допустимой датой и временем (время не является обязательным параметром - параметр опционален). Если значение не может быть проанализировано как дата с опционально временем, элемент не будет иметь соответствующей временной отметки. Формат строки без времени смотри в Format of a valid date string (en-US). Формат строки с датой и временем описан в Format of a valid local date and time string (en-US).

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

```html
<p><del>This text has been deleted</del>, here is the rest of the paragraph.</p>
<del><p>This paragraph has been deleted.</p></del>
```

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

~~This text has been deleted~~, here is the rest of the paragraph.

~~This paragraph has been deleted.~~

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

Присутствие элемента `del` не определено в конфигурации по умолчанию большинством технологий чтения с экрана. Его можно задать, используя свойство CSS `content`, а также `::before` и с помощью псевдоэлемента `::after`.

```css
del::before,
del::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

del::before {
  content: " [deletion start] ";
}

del::after {
  content: " [deletion end] ";
}
```

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

* Короткая заметка о создании своих меток (больше доступности) | The Paciello Group
* Тонкая настройка стилей уровня текста | Adrian Roselli
Спецификации
------------

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

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

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

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

* `<ins>` элемент для вставки в текст
* `<s>` (en-US) элемент для зачёркивания, отдельный от представления удалённого текста


<img> - HTML

<img>
=====

**HTML-элемент `<img>`** встраивает изображение в документ. Это замещаемый элемент.

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

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

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

* управление Referrer/CORS в целях безопасности. Смотрите ниже атрибуты `crossorigin` и `referrerpolicy`;
* настройка внутреннего размера (en-US) с использованием `width` и `height`, которые полезны, когда вы хотите задать пространство занимаемое изображением, чтобы обеспечить стабильность макета страницы перед его загрузкой;
* адаптивные изображения рекомендуется использовать с атрибутами `sizes` и `srcset` (смотрите также элемент `<picture>` и наше руководство "Адаптивные изображения").

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

Поддерживаемые форматы изображений
----------------------------------

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

### Firefox

Форматы изображений, поддерживаемые Firefox:

* JPEG;
* GIF, включая анимированные GIF;
* PNG;
* APNG;
* SVG;
* BMP;
* BMP ICO;
* PNG ICO.
Ошибки загрузки изображения
---------------------------

Если ошибка происходит во время загрузки или отрисовки изображения и обработчик события `onerror` был настроен на обработку события `error (en-US)`, тогда этот обработчик события будет вызван. Это может произойти в ряде ситуаций, в том числе когда:

* атрибут `src` пустой или null;
* указанный URL в атрибуте `src` совпадает с URL страницы, на которой в данный момент находится пользователь;
* указанное изображение каким-то образом повреждено, что препятствует его загрузке;
* метаданные указанного изображения повреждены таким образом, что невозможно получить его размеры, и в атрибутах элемента `<img>` не было указано никаких размеров;
* указанное изображение имеет формат, который не поддерживается пользовательским агентом.
Атрибуты
--------

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

`alt`

Этим атрибутом задаётся альтернативное текстовое описание изображения.

**Примечание:** Браузеры не всегда отображают изображение на которое ссылается элемент. Это относится к неграфическим браузерам (включая те, которые используются людьми с нарушениями зрения), если пользователь решает не отображать изображения, или если браузер не может отобразить изображение, потому что оно имеет неверный или неподдерживаемый тип. В этих случаях браузер может заменить изображение текстом записанным в атрибуте `alt` элемента. По этим и другим причинам вы должны по возможности предоставлять полезное описание в атрибуте `alt`.
 **Примечание:** Пропуск этого атрибута в целом указывает, что изображение является ключевой частью контента и текстовый эквивалент не доступен. Установка этого атрибута в значение пустой строки (`alt=""`) указывает, что это изображение *не* является ключевой частью контента (декоративное), и что невизуальные браузеры могут пропустить его при рендеринге (en-US).

`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, используется стандарт X.509 или базовая HTTP-аутентификация). Если сервер не предоставляет параметры доступа исходному сайту (посредством HTTP-заголовка `Access-Control-Allow-Origin`), изображение будет "испорчено" и его использование будет ограничено.Если этот атрибут не задан, то CORS при загрузке изображения не используется (т.е. без отправки HTTP-заголовка `Origin`), ограничивая его использование в элементе `<canvas>`. Если задан неправильно, то он обрабатывается так, как если бы использовалось значение `anonymous`. Для получения дополнительной информации смотрите "Настройки атрибутов CORS".

`decoding`

Предоставляет рекомендации браузеру по декодированию изображения. Допустимые значения:

* `sync`: Декодировать изображение синхронно для одновременного отображения с другим контентом;
* `async`: Декодировать изображение асинхронно, чтобы уменьшить задержку отображения другого контента;
* `auto`: Режим по умолчанию, который указывает на отсутствие предпочтений к режиму декодирования. Браузер решает, что лучше для пользователя.

`height`

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

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

Указывает сравнительную важность ресурса. Приоритет выбирается с помощью значений:

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

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

Этот атрибут говорит браузеру игнорировать действительный внутренний размер (en-US) изображения и делать вид, что это размер, указанный в атрибуте. В частности, изображение будет растровым в этих измерениях, а `narutalWidth`/`naturalHeight` изображения будут возвращать значения, указанные в этом атрибуте. Объяснение, примеры.

`ismap`

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

**Примечание:** Этот атрибут разрешён, только если элемент `<img>` является потомком элемента `<a>` с валидным (соответствующий требованиям) атрибутом `href`.

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

Указывает на то, как браузер должен загрузить изображение:

* `eager`: Загружает изображение немедленно независимо от того, находится оно в области просмотра или нет (является значением по умолчанию).
* `lazy`: Откладывает загрузку изображения до того момента, пока оно не достигнет подсчитанного расстояния области просмотра, определяемого браузером. Данное значение помогает избежать использования ресурсов сети и хранилища, необходимых для обработки изображения, пока это действительно не понадобится. В большинстве случаев использование этого аргумента улучшает производительность.

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

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

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

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

`sizes`

Список из одного или нескольких строк, разделённых запятыми, указывающих набор размеров источника. Каждый размер источника состоит из:1. Условия медиа-запроса. Должно быть пропущено для последнего элемента. 2. Значения размера источника.Значения размера источника устанавливаются исходя из предполагаемых размеров изображения. Пользовательские агенты используют текущий размер источника, чтобы выбрать один из источников, предоставленных атрибутом `srcset`, если эти источники описываются с помощью дескриптора ширины '`w`' (сокращение от width). Выбранный размер источника влияет на внутренний размер (en-US) изображения (отображаемый размер изображения, если не применены стили CSS). Если атрибут `srcset` отсутствует или не содержит значений с дескриптором '`w`', то атрибут `sizes` не будет иметь никакого эффекта.

`src`

URL изображения. Этот атрибут является обязательным для элемента `<img>`. В браузерах, поддерживающих `srcset`, `src` обрабатывается как изображение-кандидат с дескриптором плотности пикселей `1x`, если только изображение с этим дескриптором уже не определено в `srcset` или если `srcset` не содержит дескрипторы '`w`'.

`srcset`

Список из одной или нескольких строк, разделённых запятыми, указывающих набор возможным источников изображения для использования пользовательскими агентами. Каждая строка состоит из:1. URL изображения. 2. Необязательного, пробела, сопровождаемого:

* дескриптором ширины или положительным целым числом, за которым сразу же следует '`w`'. Дескриптор ширины делится на размер источника, полученный из атрибута `sizes`, для расчёта эффективной плотности пикселей;
* дескриптором плотности пикселей, который является положительным числом с плавающей точкой за которым сразу же следует '`x`'.Если не указано ни одного дескриптора, то источнику присваивается дескриптор по умолчанию: `1x`.Нельзя смешивать дескрипторы ширины с дескрипторами плотности пикселей в одном атрибуте `srcset`. Повторение дескрипторов (например, два источника в одном `srcset` с одинаковым дескриптором '`2x`') так же является недопустимым.Пользовательские агенты выбирают любой из доступных источников на своё усмотрение. Это предоставляет им значительную свободу действий для адаптации их выбора на основе таких вещей, как предпочтения пользователя или пропускная способность. Смотрите наше руководство "Адаптивные изображения" для примера.

`width`

Внутренняя ширина (см. Внутренний размер (en-US)) изображения в пикселях.

`usemap`

Неполный URL (начиная с '`#`') карты-изображения, связанной с элементом.

**Примечание:** вы не можете использовать этот атрибут, если элемент `<img>` является потомком элемента `<a>` или `<button>`.

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

`align`

Выравнивание изображения относительно окружающему его контексту. Этот атрибут больше не должен быть использован - вместо этого используйте CSS-свойства `float` и/или `vertical-align`. Вы можете так же использовать CSS-свойство `object-position` для позиционирования изображения внутри границ элемента `<img>`. Допустимые значения:

* `top`: Аналог `vertical-align: top` или `vertical-align: text-top`;
* `middle`: Аналог `vertical-align: -moz-middle-with-baseline`;
* `bottom`: Отсутствует значение по умолчанию, аналог `vertical-align: unset` или `vertical-align: initial`;
* `left`: Аналог `float: left`;
* `right`: Аналог `float: right`.

`border`

Ширина рамки вокруг изображения. Вы должны использовать CSS-свойство `border` вместо этого атрибута.

`hspace`

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

`longdesc`

Ссылка на более подробное описание изображения. Возможными значениями являются URL или `id` элемента.

**Примечание:** Этот атрибут упомянут в последней версии от W3C, HTML 5.2, но был удалён из живого стандарта HTML от WHATWG. У него неопределённое будущее; авторы должны использовать альтернативы WAI-ARIA, такие как aria-describedby или aria-details.

`name`

Имя для элемента. Вы должны использовать атрибут `id` вместо этого атрибута.

`vspace`

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

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

`<img>` является замещаемым элементом; по умолчанию он имеет значение свойства `display` равное `inline`, но его размеры по умолчанию определяются внутренними значениями (см. внутренний размер (en-US)) встроенного изображения. Вы можете установить на изображение такие свойства, как `border`/`border-radius`, `padding`/`margin`, `width`/`height` и так далее.

Однако, часто бывает полезно установить для изображений свойство `display` в значение `block`, так что вы имеете максимальный контроль над стилизацией (например, `margin: 0 auto` не работает на изображениях с `display: inline`, легче размещать изображения в контексте с окружающими элементами, когда они являются блочными).

У `<img>` нет базовой линии, когда изображения используются в ситуации со строчным форматированием (`display: inline`) вместе с `vertical-align``: baseline`, нижняя граница изображения будет размещена на базовой линии контейнера.

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

В зависимости от типа, изображение может иметь собственную (внутреннюю) ширину и высоту. Для некоторых типов изображений тем не менее внутренние размеры (en-US) не обязательны. SVG-изображения, например, могут не иметь внутренних размеров, если для корня их элемента `<svg>` не заданы `width` и `height`.

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

### Альтернативный текст

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

```html
<img
 src="https://developer.mozilla.org/static/img/web-docs-sprite.22a6a085cf14.svg"
 alt="Логотип MDN - изображение динозавра с текстом MDN web docs" />
```

### Изображение-ссылка

Этот пример основан на предыдущем и показывает как превратить изображение в ссылку. Это очень просто сделать так — вы вставляете тег `<img>` внутрь элемента `<a>`. Также вы должны изменить альтернативный текст, чтобы он описывал назначение ссылки.

```html
<a href="https://developer.mozilla.org">
  <img
 src="https://developer.mozilla.org/static/img/web-docs-sprite.22a6a085cf14.svg"
 alt="Посетить сайт MDN" />
</a>
```

### Использование атрибута srcset

В этом примере мы добавляем атрибут `srcset`, содержащий ссылку на версию логотипа в высоком разрешении; оно будет загружено вместо изображения в `src` на устройствах с высоким разрешением. Изображение указанное в атрибуте `src`, считается `1x` кандидатом в пользовательских агентах, которые поддерживают `srcset`.

```html
<img src="mdn-logo-sm.png" alt="MDN" srcset="mdn-logo-HD.png 2x" />
```

### Использование атрибутов srcset и sizes

Атрибут `src` игнорируется в пользовательских агентах, которые поддерживают `srcset`, когда добавлены дескрипторы '`w`'. Когда условие медиавыражения `(max-width: 600px)` совпадает с состоянием устройства, будет загружено изображение шириной 200px (оно то самое, которое наиболее близко соответствует 200px, указанным в медиавыражении), иначе будет загружено другое изображение.

```html
<img
 src="clock-demo-thumb-200.png"
 alt="Часы"
 srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w"
 sizes="(max-width: 600px) 200px, 50vw" />
```

Проблемы безопасности и приватности
-----------------------------------

Хотя у элементов `<img>` есть множество безобидных применений, они могут иметь нежелательные последствия для безопасности и приватности пользователя. Смотрите "Заголовок Referer: проблемы приватности и безопасности (en-US)" для получения дополнительной информации.

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

### Создание значимых альтернативных описаний

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

#### Плохо

```html
<img alt="image" src="penguin.jpg" />
```

#### Хорошо

```html
<img alt="Пингвин на пляже." src="penguin.jpg" />
```

Когда у изображения отсутствует атрибут `alt`, некоторые программы чтения с экрана могут объявить вместо него имя файла изображения. Это может привести к путанице, если имя файла не соответствует содержимому изображения.

* Дерево решений атрибута alt • Изображения • Веб-руководство WAI по доступности.
* Альтернативные тексты: максимальное руководство — Axess Lab.
* Как создать отличный альтернативный текст: введение | Deque.
* MDN Понимание WCAG, Руководство 1.1. объяснения (en-US).
* Понимание критерия успешного исхода 1.1.1 | W3C Понимание WCAG 2.0.
### Атрибут title

Атрибут `title` не является приемлемой заменой атрибута `alt`. Кроме того, избегайте повторения значения атрибута `alt` в атрибуте `title`, объявленном на том же изображении.

Атрибут `title` также не должен использоваться в качестве подписи, сопровождающей альтернативное описание изображения. Если изображению нужна подпись, используйте элемент `<figure>` вместе с элементом `<figcaption>`.

* Использование HTML-атрибута title - обновлено | The Paciello Group.
Спецификации
------------

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

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

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

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

* Изображения в HTML.
* Адаптивные изображения.
* Элементы `<picture>`, `<object>` (en-US) и `<embed>`.
* Связанные с изображениями CSS-свойства: `object-fit`, `object-position`, `image-orientation` (en-US), `image-rendering` (en-US), и `image-resolution` (en-US).


<footer> - HTML

<footer>
========

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

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

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

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

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

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

* Заключите информацию об авторе в элемент `<address>`, который может быть добавлен в элемент `<footer>`.
* Элемент `<footer>` не относится к секционному контенту, а значит не создаёт новый раздел в структуре HTML-документа.
Примеры
-------

```html
<footer>
  Какая-то информация об авторском праве или может информация об авторе статьи?
</footer>
```

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

У программа чтения с экрана VoiceOver есть проблема, при которой она не читает элемент `<footer>` (не добавляет роль-ориентир элемента `<footer>` в список ориентиров). Чтобы решить эту проблему добавьте `role="contentinfo"` в элемент `<footer>`.

* WebKit Bugzilla: 146930 - AX: Нативные элементы HTML (header, footer, main, aside, nav) должны работать также, как ориентиры ARIA, но иногда они этого не делают
Спецификации
------------

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


<summary>: The Disclosure Summary element - HTML

<summary>: The Disclosure Summary element
=========================================

The **HTML Disclosure Summary element** (**`<summary>`**) element specifies a summary, caption, or legend for a `<details>` element's disclosure box. Clicking the `<summary>` element toggles the state of the parent `<details>` element open and closed.

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

| Permitted content | Phrasing content or one element of Heading content |
| --- | --- |
| Tag omission | None, both the start tag and the end tag are mandatory. |
| Permitted parents | The `<details>` element. |
| Permitted ARIA roles | `button (en-US)` |
| DOM interface | `HTMLElement` |

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

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

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

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

Элемент `<summary>` может быть использован в качестве потомка элемента `<details>` . Когда пользователь кликает по элементу summary, его родитель - `<details>` меняет состояние с раскрытого или закрытого на обратное,и тогда `toggle` event is sent to the `<details>` element, which can be used to let you know when this state change occurs.

### Default label text

If a `<details>` element's first child is not a `<summary>` element, the user agent will use a default string (typically "Details") as the label for the disclosure box.

### Default style

Per the HTML specification, the default style for `<summary>` elements includes `display: list-item`. This makes it possible to change or remove the icon displayed as the disclosure widget next to the label from the default, which is typically a triangle.

You can also change the style to `display: block` to remove the disclosure triangle.

See the Browser compatibility section for details, as not all browsers support full functionality of this element yet.

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

Below are some examples showing `<summary>` in use. You can find more examples in the documentation for the `<details>` element.

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

A simple example showing the use of `<summary>` in a `<details>` element:

```html
<details open>
  <summary>Overview</summary>
  <ol>
    <li>Cash on hand: $500.00</li>
    <li>Current invoice: $75.30</li>
    <li>Due date: 5/6/19</li>
  </ol>
</details>
```

### Summaries as headings

You can use heading elements in `<summary>`, like this:

```html
<details open>
  <summary><h4>Overview</h4></summary>
  <ol>
    <li>Cash on hand: $500.00</li>
    <li>Current invoice: $75.30</li>
    <li>Due date: 5/6/19</li>
  </ol>
</details>
```

This currently has some spacing issues that could be addressed using CSS.

### HTML in summaries

This example adds some semantics to the `<summary>` element to indicate the label as important:

```html
<details open>
  <summary><strong>Overview</strong></summary>
  <ol>
    <li>Cash on hand: $500.00</li>
    <li>Current invoice: $75.30</li>
    <li>Due date: 5/6/19</li>
  </ol>
</details>
```

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

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

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

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

See also
--------

* `<details>`


<fieldset>: The Field Set element - HTML

<fieldset>: The Field Set element
=================================

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

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

Пример выше показывает, как элемент `<fieldset>` группирует части HTML-формы, а вложенный элемент `<legend>` даёт заголовок для `<fieldset>`. Он может иметь несколько атрибутов, самый используемый из них `form`, который содержит `id` формы `<form>` на этой же странице. Этот атрибут позволяет сделать `<fieldset>` частью формы `<form>` даже если он не находится внутри неё. Также вы можете отключить `<fieldset>` и всё его содержимое с помощью атрибута `disabled`.

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

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

`disabled`

Если этот логический атрибут установлен, все элементы управления формой, вложенные в `<fieldset>` будут отключены. Это значит, что их нельзя изменять, но можно отправить через форму `<form>`, в отличие от атрибута `disabled` на элементах управления формой. Они не будут реагировать на браузерные события, такие как клики мышью или события focus. По умолчанию, браузер отображает такие элементы управления в сером цвете. Обратите внимание, что элементы формы внутри элемента `<legend>` не будут отключены.

`form`

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

`name`

Имя, связанное с группой.

**Примечание:** Заголовок для <fieldset> устанавливается первым `<legend>` внутри него.

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

Есть несколько особенностей стилизации `<fieldset>`.

По умолчанию, значение свойства `display` равняется `block`, что создаёт блочный контекст форматирования. Если установить значение `display` как inline-элементу `<fieldset>`, это будет работать как `inline-block`, в ином случае, это будет работать как `block`. По умолчанию, имеется border 2px groobe вокруг содержимого и небольшой внутренний отступ. Элемент имеет `min-inline-size: min-content` по умолчанию.

Если задан <legend>, он будет помещён поверх верхней границы. <legend> сжимается и переносится, также имеет свой контекст форматирования. Значение `display` блочное (например, `display: inline` работает как `block`).

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

### Простой fieldset

Этот пример показывает простой `<fieldset>` с `<legend>` и единственным элементом управления внутри.

```html
<form action="#">
  <fieldset>
    <legend>Simple fieldset</legend>
    <input type="radio" id="radio" />
    <label for="radio">Spirit of radio</label>
  </fieldset>
</form>
```

### Отключённый fieldset

Этот пример показывает отключённый `<fieldset>` с двумя элементами управления внутри.

```html
<form action="#">
  <fieldset disabled>
    <legend>Disabled fieldset</legend>
    <div>
      <label for="name">Name: </label>
      <input type="text" id="name" value="Chris" />
    </div>
    <div>
      <label for="pwd">Archetype: </label>
      <input type="password" id="pwd" value="Wookie" />
    </div>
  </fieldset>
</form>
```

Техническая сводка
------------------

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

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

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

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

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

See also
--------

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


<br> - элемент переноса строки - HTML

<br> - элемент переноса строки
==============================

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

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

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

**Примечание:** Не используйте **`<br>`** для увеличения разрыва между строками в тексте; используйте CSS-свойство `margin` элемента `<p>`.

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

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

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

`clear`

Определяет, где начинается следующая строка после перевода строки.

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

Элемент `<br>` имеет единственную цель – создать разрыв линии в блоке текста. Таким образом, он не имеет размеров или визуального стиля как такового. Есть всего несколько свойств, которые вы можете стилизовать.

Вы можете установить значение `margin` на `<br>` чтобы увеличить расстояние между линиями в блоке, но это плохая практика – лучше использовать свойство `line-height` для этой цели.

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

### Простой br

В следующем примере мы используем элемент `<br>` для разрыва линий в почтовом адресе:

```html
Mozilla<br />
331 E. Evelyn Avenue<br />
Mountain View, CA<br />
94041<br />
USA<br />
```

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

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

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

Техническая сводка
------------------

* *Категории контента* Основной поток, текстовый контент.
* *Разрешённое содержимое* Отсутствует, это пустой элемент.
* *Пропуск тегов*Должен иметь открывающий тег, но не закрывающий тег. В XHTML документах элемент пишется как `<br />`.
* *Допустимые родительские элементы* Любой элемент, который поддерживает текстовый контент.
* *Интерфейс DOM* `HTMLBRElement`
Спецификации
------------

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

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

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

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

* Элемент `<address>`
* Элемент `<p>`


<track>: Встраиваемая текстовая дорожка - HTML

<track>: Встраиваемая текстовая дорожка
=======================================

\*\*HTML-элемент `<track>` \*\*используется как дочерний элемент медиа-элементов `<audio>` and `<video>`. Позволяет указать синхронизированные текстовые дорожки (или данные на основе времени), например, для автоматической обработки субтитров. Файлы треков используют формат WebVTT (`.vtt` файлы) — Web Video Text Tracks или Timed Text Markup Language (TTML).

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

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

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

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

`default`

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

`kind`

Как текстовый трек должен быть использован. Если значение опущено, тип по умолчанию — `subtitles` (субтитры). Если атрибут отсутствует, будет использоваться `subtitles`. Если атрибут содержит недопустимое значение, оно принимает значение `metadata`. (Версии Chrome ранее 52 рассматривали недопустимое значение как `subtitles`.) Допускаются следующие ключевые слова:

* `subtitles`
    + Субтитры обеспечивают перевод контента, который не может быть понят зрителем. Например, диалог или текст, который не является английским, в фильме на английском языке.
    + Субтитры могут содержать дополнительный контент, обычно дополнительную справочную информацию. Например, текст в начале фильмов «Звёздных войн» или дата, время и место действия сцены.
* `captions`
    + Подписи обеспечивают транскрипцию и, возможно, перевод аудио.
    + Подписи могут включать важную невербальную информацию, такую как музыкальные сигналы или звуковые эффекты. Возможно указывать источник сигналов (например, музыка, текст, персонаж).
    + Подходит для пользователей со слабым слухом или когда звук отключён.
* `descriptions`
    + Текстовое описание видеоконтента.
    + Подходит для слепых пользователей или там, где видео не видно.
* `chapters`
    + Названия глав предназначены для использования при навигации по медиа-ресурсу.
* `metadata`
    + Данные, используемые скриптами. Не видны пользователю.

`label`

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

`src`

Адрес файла текстовой дорожки (`.vtt` файл). Должен быть действительным URL. Этот атрибут должен быть указан, а его значение URL должно иметь то же происхождение, что и документ — исключая случаи, когда родительский `<audio>` или `<video>` данного `track` элемента имеет атрибут `crossorigin`.

`srclang`

Язык текстовых данных трека. Это должен быть валидный BCP 47 языковой тег (см. также языковые тэги в HTML и XML). Если для атрибута `kind` установлено значение `subtitles`, должен быть определён атрибут `srclang`.

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

### Типы данных дорожки

Тип данных, которые трек добавляет на носитель, задаётся в атрибуте `kind`, который может принимать значения `subtitles`, `captions`, `descriptions`, `chapters` или `metadata`. Элемент указывает на исходный файл, содержащий синхронизированный по времени текст, который браузер предоставляет, когда пользователь запрашивает дополнительные данные.

Отдельный `media` элемент не может иметь элементы `track` с одинаковыми значениями `kind`, `srclang` и `label`.

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

```html
<video controls poster="/images/sample.gif">
  <source src="sample.mp4" type="video/mp4" />
  <source src="sample.ogv" type="video/ogv" />
  <track kind="captions" src="sampleCaptions.vtt" srclang="en" />
  <track kind="descriptions" src="sampleDescriptions.vtt" srclang="en" />
  <track kind="chapters" src="sampleChapters.vtt" srclang="en" />
  <track kind="subtitles" src="sampleSubtitles\_de.vtt" srclang="de" />
  <track kind="subtitles" src="sampleSubtitles\_en.vtt" srclang="en" />
  <track kind="subtitles" src="sampleSubtitles\_ja.vtt" srclang="ja" />
  <track kind="subtitles" src="sampleSubtitles\_oz.vtt" srclang="oz" />
  <track kind="metadata" src="keyStage1.vtt" srclang="en" label="Key Stage 1" />
  <track kind="metadata" src="keyStage2.vtt" srclang="en" label="Key Stage 2" />
  <track kind="metadata" src="keyStage3.vtt" srclang="en" label="Key Stage 3" />
  <!-- Fallback -->
  ...
</video>
```

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

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

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

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

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

* WebVTT — формат файлов текстовой дорожки
* `HTMLMediaElement.textTracks` (en-US)


<select> - HTML

<select>
========

**HTML тэг `<select>`** представляет собой элемент управления который содержит меню опций:

| Категории содержимого (en-US) | Основной поток, текстовый контент, интерактивный контент (en-US), списочный (en-US), labelable (en-US), сбрасываемый (en-US), и submittable (en-US) form-associated (en-US) element |
| --- | --- |
| Допустимое содержимое | Ноль или более `<option>` или `<optgroup>` элементы. |
| Пропуск тегов | Открывающий и закрывающий теги обязательны. |
| Допустимые родители | Любые элементы в которых разрешено текстовое содержимое |
| Допустимые ARIA-роли | `menu (en-US)` |
| DOM-интерфейс | `HTMLSelectElement` (en-US) |

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

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

`autofocus`

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

`disabled`

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

`form`

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

`multiple`

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

`name`

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

`required`

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

`size`

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

**Примечание:** Согласно спецификации HTML5, значение размера по умолчанию должно быть 1; однако на практике, оказывается что это портит некоторые веб сайты, и ни один браузер не придерживается этого на данный момент, поэтому Mozilla предпочла также указать 0 пока что в Firefox.

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

```html
<!-- Начально будет выбрано второе значение -->
<select name="select">
  <!--Supplement an id here instead of using 'name'-->
  <option value="value1">Значение 1</option>
  <option value="value2" selected>Значение 2</option>
  <option value="value3">Значение 3</option>
</select>
```

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

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

Контент этого элемента статичен и не редактируемый (en-US).

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

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

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

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

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

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


<title>: элемент заголовка документа - HTML

<title>: элемент заголовка документа
====================================

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

| Категории контента | Метаданные. |
| --- | --- |
| Допустимое содержимое | Текст, который не является межэлементным разделителем. |
| Пропуск тегов | Открывающий и закрывающий теги обязательны. Обратите внимание, что отсутствие `</title>` заставляет браузер игнорировать остальную часть страницы. |
| Допустимые родители | Элемент `<head>`, который не содержит других элементов `<title>`. |
| Допустимые ARIA-роли | Нет |
| DOM-интерфейс | `HTMLTitleElement` (en-US) |

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

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

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

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

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

Содержимое заголовка страницы может иметь важное значение для поисковой оптимизации (SEO). Как правило, более длинный описательный заголовок будет лучше ранжироваться (Ranking), чем короткий или скучный. Не только содержимое заголовка является одним из компонентов, используемых алгоритмами для определения порядка, в котором перечисляются страницы в поисковой выдаче, но и сам заголовок является приёмом, которым вы привлекаете внимание читателей бегло просматривающих результаты поиска.

Несколько методических рекомендаций и советов для составления хороших заголовков:

* избегайте заголовков состоящих из одного или двух слов. Используйте описательные фразы или сочетание термин-определение для страниц глоссария (словарь терминов) или справки;
* поисковые системы, как правило, отображают примерно 55-60 первых символов заголовка страницы. Текст, превышающий это количество символов, может быть потерян, так что постарайтесь, чтобы заголовки не были длиннее. Если вам нужно использовать более длинный заголовок, убедитесь, что важные части появляются раньше и что нет ничего критического в части заголовка, которая может быть отброшена;
* избегайте специальных символов, когда это возможно; не все браузеры будут отображать их одинаково. Например, "<" часто отображается в строке заголовка окна как "<" - символ-мнемоника "меньше" в HTML (entity);
* не используйте ключевые слова ("keyword blobs"). Если ваш заголовок состоит только из списка слов, то алгоритмы будут часто искусственно понижать позицию вашей страницы в поисковой выдаче;
* убедитесь, что ваш заголовок является уникальным на вашем сайте, насколько это возможно. Повторяющиеся или частично повторяющиеся заголовки могут способствовать неточным результатам поиска.
Пример
------

```html
<title>Потрясающий заголовок страницы</title>
```

Этот пример устанавливает заголовок страницы (отображается в верхней части окна или вкладки браузера) как "Потрясающий заголовок страницы".

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

Важно указать такое значение `title`, которое описывает назначение страницы.

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

### Пример

```html
<title>
  Меню - Китайская еда Синий дом - FoodYum: онлайн на вынос сегодня!
</title>
```

Для того чтобы помочь пользователю, обновите значение `title`, чтобы отразить важные изменения состояния страницы (например, проблемы с проверкой формы).

```html
<title>
  2 ошибки - ваш заказ - Китайская еда Синий дом - FoodYum: онлайн на вынос
  сегодня!
</title>
```

* MDN Understanding WCAG, Guideline 2.4 explanations (en-US)
* Understanding Success Criterion 2.4.2 | W3C Understanding WCAG 2.0
Спецификации
------------

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

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

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