recursal/MDN huggingface dataset:
<time>
======

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

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

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


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

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

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

`datetime`

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

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

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

#### HTML


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


#### Вывод

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

#### HTML


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


#### Вывод

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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


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

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

Rocks!

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

External Link

Rocks!

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

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
<progress>: Элемент индикатора выполнения
=========================================

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

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

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

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

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

`max`

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

`value`

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


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

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

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


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

### Result

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

`open`

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

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


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

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

### Result

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

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

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

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

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

### HTML


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

### CSS


```css
summary {
  display: block;
}

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

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

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

### Result

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

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

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

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

See also
--------

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

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

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

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

This element includes the global attributes.

`type`

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

`media`

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

`scoped`

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

`title`

Specifies alternative style sheet sets.

`disabled`

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

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

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


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

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


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


#### Live sample

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

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

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

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

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

* Элемент `<link>`, позволяющий использовать внешние таблицы стилей.
<code>: элемент отображения кода
================================

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

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

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

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

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

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

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


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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

См. `<select>` for examples.

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

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

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

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

See also
--------

* Other form-related elements: `<form>`, `<legend>`, `<label>`, `<button>`, `<select>`, `<datalist>`, `<optgroup>`, `<fieldset>`, `<textarea>` (en-US), `<input>`, `<output>`, `<progress>` and `<meter>`.
<dd>: Элемент описания определения
==================================

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

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

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

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

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

`nowrap` 
Non-standard

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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


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

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

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

#### HTML


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


#### CSS


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


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

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

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

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

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

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

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