recursal/MDN huggingface dataset:
<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).
<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)
<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>`
<embed>: Вложение расширенных элементов
=======================================

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

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

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

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

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

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

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

`height`

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

`src`

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

`type`

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

`width`

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

`dir`

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

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

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


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

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

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

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

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

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
<blockquote> - элемент цитаты
=============================

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

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

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

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

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

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

`cite`

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

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


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


Результат:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

* `<dd>`, `<dl>`
<image>
=======

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

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

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

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

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

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

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

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

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

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

`height`

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

`moz-opaque` 
Non-standard

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

`width`

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

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

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

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

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

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

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


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


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


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

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

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

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

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

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

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