files/ru/web/html/element/dl/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195

---
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>&lt;dl&gt;</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>&lt;dl&gt;</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">&lt;dl&gt;
  &lt;dt&gt;Firefox&lt;/dt&gt;
  &lt;dd&gt;
    A free, open source, cross-platform,
    graphical web browser developed by the
    Mozilla Corporation and hundreds of
    volunteers.
  &lt;/dd&gt;

  &lt;!-- Other terms and descriptions --&gt;
&lt;/dl&gt;
</pre>

<p>{{EmbedLiveSample("Одиночные_термин_и_определение")}}</p>

<h3 id="Множественные_термины_с_одним_определением">Множественные термины с одним определением</h3>

<pre class="brush: html">&lt;dl&gt;
  &lt;dt&gt;Firefox&lt;/dt&gt;
  &lt;dt&gt;Mozilla Firefox&lt;/dt&gt;
  &lt;dt&gt;Fx&lt;/dt&gt;
  &lt;dd&gt;
    A free, open source, cross-platform,
    graphical web browser developed by the
    Mozilla Corporation and hundreds of
    volunteers.
  &lt;/dd&gt;

  &lt;!-- Other terms and descriptions --&gt;
&lt;/dl&gt;
</pre>

<p>{{EmbedLiveSample("Множественные_термины_с_одним_определением")}}</p>

<h3 id="Одиночный_термин_со_множественными_определениями">Одиночный термин со множественными определениями</h3>

<pre class="brush: html">&lt;dl&gt;
  &lt;dt&gt;Firefox&lt;/dt&gt;
  &lt;dd&gt;
    A free, open source, cross-platform,
    graphical web browser developed by the
    Mozilla Corporation and hundreds of
    volunteers.
  &lt;/dd&gt;
  &lt;dd&gt;
    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).
  &lt;/dd&gt;

  &lt;!-- Other terms and descriptions --&gt;
&lt;/dl&gt;
</pre>

<p>{{EmbedLiveSample("Одиночный_термин_со_множественными_определениями")}}</p>

<h3 id="Множественные_термины_и_определения">Множественные термины и определения</h3>

<p>Кроме того, можно определить несколько терминов с несколькими соответствующими определениями, путём комбинирования приведённых выше примеров.</p>

<h3 id="Метаданные">Метаданные</h3>

<p>Список определений очень полезен для отображения метаданных, как список пар ключ-значение.</p>

<pre class="brush: html">&lt;dl&gt;
  &lt;dt&gt;Name&lt;/dt&gt;
  &lt;dd&gt;Godzilla&lt;/dd&gt;
  &lt;dt&gt;Born&lt;/dt&gt;
  &lt;dd&gt;1952&lt;/dd&gt;
  &lt;dt&gt;Birthplace&lt;/dt&gt;
  &lt;dd&gt;Japan&lt;/dd&gt;
  &lt;dt&gt;Color&lt;/dt&gt;
  &lt;dd&gt;Green&lt;/dd&gt;
&lt;/dl&gt;
</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">&lt;dl&gt;
  &lt;div&gt;
    &lt;dt&gt;Name&lt;/dt&gt;
    &lt;dd&gt;Godzilla&lt;/dd&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;dt&gt;Born&lt;/dt&gt;
    &lt;dd&gt;1952&lt;/dd&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;dt&gt;Birthplace&lt;/dt&gt;
    &lt;dd&gt;Japan&lt;/dd&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;dt&gt;Color&lt;/dt&gt;
    &lt;dd&gt;Green&lt;/dd&gt;
  &lt;/div&gt;
&lt;/dl&gt;
</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>&lt;dl&gt;</code> по-разному. Некоторые скринридеры, такие как VoiceOver на iOS, не будут озвучивать, что содержимое <code>&lt;dl&gt;</code> это список. В связи с этим, убедитесь, что содержимое каждого элемента списка написано таким образом, что оно сообщает о своём отношении с другими элементами списка в списке группы.</p>

<ul>
 <li><a href="https://s.codepen.io/aardrian/debug/NzGaKP">CodePen - HTML Buddies: dt &amp; dd</a></li>
</ul>

<h2 id="Specifications">Спецификации</h2>

{{Specifications}}

<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
<p>{{Compat}}</p>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li>Элемент {{HTMLElement("dt")}}</li>
 <li>Элемент {{HTMLElement("dd")}}</li>
</ul>