diff options
Diffstat (limited to 'files/ru/web/html/element/dl')
| -rw-r--r-- | files/ru/web/html/element/dl/index.html | 223 |
1 files changed, 223 insertions, 0 deletions
diff --git a/files/ru/web/html/element/dl/index.html b/files/ru/web/html/element/dl/index.html new file mode 100644 index 0000000000..511138568f --- /dev/null +++ b/files/ru/web/html/element/dl/index.html @@ -0,0 +1,223 @@ +--- +title: '<dl>: Элемент списка описаний' +slug: Web/HTML/Element/dl +tags: + - Element + - HTML + - Reference + - Web + - dl + - Веб + - Список определений + - Элемент + - списки +translation_of: Web/HTML/Element/dl +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML-элемент <code><dl></code></strong> (<em>от англ.</em> <em>Description List</em>) представляет собой список описаний. Этот элемент служит контейнером для списка пар терминов (определяемых элементом {{HTMLElement("dt")}}) и их описаний (определяемых элементами {{HTMLElement("dd")}}). Этот элемент обычно используют при создании глоссария или для отображения метаданных (списка пар ключ-значение).</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/dl.html", "tabbed-standard")}}</div> + +<p class="hidden">Источник для этого интерактивного пример хранится в GitHub репозитории. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a>и отправьте нам pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th> + <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">Потоковый контент</a>, и если потомки элемента <code><dl></code> включают одну группу имя-значение явный контент.</td> + </tr> + <tr> + <th scope="row">Разрешённое содержимое</th> + <td>Либо: Ноль или более групп каждая из которых состоит из одного или более элементов {{HTMLElement("dt")}} за которым следует один или более элементов {{HTMLElement("dd")}}, необязательно смешанных с элементами {{HTMLElement("script")}} и {{HTMLElement("template")}}.<br> + Либо: Один или более элементов {{HTMLElement("div")}}, необязательно смешанных с элементами {{HTMLElement("script")}} и {{HTMLElement("template")}}.</td> + </tr> + <tr> + <th scope="row">Пропуск тегов</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Разрешённые родители</th> + <td>Любой элемент который принимает <a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">потоковый контент</a>.</td> + </tr> + <tr> + <th scope="row">Разрешённые ARIA-роли</th> + <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM-интерфейс</th> + <td>{{domxref("HTMLDListElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p><span style="line-height: 21px;">Для данного элемента доступны только </span><a href="/ru/docs/Web/HTML/Общие_атрибуты" style="line-height: 21px;" title="HTML/Global attributes">глобальные атрибуты</a><span style="line-height: 21px;">.</span></p> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Одиночные_термин_и_определение">Одиночные термин и определение</h3> + +<pre class="brush: html"><dl> + <dt>Firefox</dt> + <dd> + A free, open source, cross-platform, + graphical web browser developed by the + Mozilla Corporation and hundreds of + volunteers. + </dd> + + <!-- Other terms and descriptions --> +</dl> +</pre> + +<p>{{EmbedLiveSample("Одиночные_термин_и_определение")}}</p> + +<h3 id="Множественные_термины_с_одним_определением">Множественные термины с одним определением</h3> + +<pre class="brush: html"><dl> + <dt>Firefox</dt> + <dt>Mozilla Firefox</dt> + <dt>Fx</dt> + <dd> + A free, open source, cross-platform, + graphical web browser developed by the + Mozilla Corporation and hundreds of + volunteers. + </dd> + + <!-- Other terms and descriptions --> +</dl> +</pre> + +<p>{{EmbedLiveSample("Множественные_термины_с_одним_определением")}}</p> + +<h3 id="Одиночный_термин_со_множественными_определениями">Одиночный термин со множественными определениями</h3> + +<pre class="brush: html"><dl> + <dt>Firefox</dt> + <dd> + A free, open source, cross-platform, + graphical web browser developed by the + Mozilla Corporation and hundreds of + volunteers. + </dd> + <dd> + The Red Panda also known as the Lesser + Panda, Wah, Bear Cat or Firefox, is a + mostly herbivorous mammal, slightly larger + than a domestic cat (60 cm long). + </dd> + + <!-- Other terms and descriptions --> +</dl> +</pre> + +<p>{{EmbedLiveSample("Одиночный_термин_со_множественными_определениями")}}</p> + +<h3 id="Множественные_термины_и_определения">Множественные термины и определения</h3> + +<p>Кроме того, можно определить несколько терминов с несколькими соответствующими определениями, путем комбинирования приведенных выше примеров.</p> + +<h3 id="Метаданные">Метаданные</h3> + +<p>Список определений очень полезен для отображения метаданных, как список пар ключ-значение.</p> + +<pre class="brush: html"><dl> + <dt>Name</dt> + <dd>Godzilla</dd> + <dt>Born</dt> + <dd>1952</dd> + <dt>Birthplace</dt> + <dd>Japan</dd> + <dt>Color</dt> + <dd>Green</dd> +</dl> +</pre> + +<p>Подсказка: Может быть полезно задать разделитель для пары ключ-значение при помощи CSS3, например:</p> + +<pre class="brush: css">dt:after { + content: ": "; +}</pre> + +<h3 id="Оборачивание_групп_имя-значение_в_HTMLElementdiv_элементы">Оборачивание групп имя-значение в {{HTMLElement("div")}} элементы</h3> + +<p><a href="/ru/docs/Glossary/WHATWG">WHATWG</a> HTML разрешает оборачивать каждую группу имя-значение в элементе {{HTMLElement("dl")}} в элемент {{HTMLElement("div")}}. Это может быть полезно, когда используются <a href="/ru/docs/Web/HTML/Microdata">микроданные</a> или когда <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a> применяются к целой группе, или для стилевых целей.</p> + +<pre class="brush: html"><dl> + <div> + <dt>Name</dt> + <dd>Godzilla</dd> + </div> + <div> + <dt>Born</dt> + <dd>1952</dd> + </div> + <div> + <dt>Birthplace</dt> + <dd>Japan</dd> + </div> + <div> + <dt>Color</dt> + <dd>Green</dd> + </div> +</dl> +</pre> + +<h2 id="Примечание">Примечание</h2> + +<p>Не используйте данный элемент (как и элемент {{HTMLElement("ul")}}) просто для создания отступов на странице. Не смотря на то, что это работает, — это является плохой практикой и подменяет семантическое значение списка определений.</p> + +<p>Чтобы изменить отступ определений терминов, воспользуйтесь <a href="/ru/docs/Web/CSS" title="CSS">CSS</a>-свойством {{cssxref("margin")}}.</p> + +<h2 id="Проблемы_доступности">Проблемы доступности</h2> + +<p>Каждый скринридер произносит содержимое элемента <code><dl></code> по-разному. Некоторые скринридеры, такие как VoiceOver на iOS, не будут озвучивать, что содержимое <code><dl></code> это список. В связи с этим, убедитеcь, что содержимое каждого элемента списка написано таким образом, что оно сообщает о своём отношенении с другими элементами списка в списке группы.</p> + +<ul> + <li><a href="https://s.codepen.io/aardrian/debug/NzGaKP">CodePen - HTML Buddies: dt & dd</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-dl-element', '<dl>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dl-element', '<dl>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '<dl>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Начальное определение</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</div> + +<p>{{Compat("html.elements.dl")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Элемент {{HTMLElement("dt")}}</li> + <li>Элемент {{HTMLElement("dd")}}</li> +</ul> |