0 added
0 removed
Original
2026-01-01
Modified
2026-02-21
1
<p><a>#статьи</a></p>
1
<p><a>#статьи</a></p>
2
<ul><li>15 авг 2025</li>
2
<ul><li>15 авг 2025</li>
3
<li>0</li>
3
<li>0</li>
4
</ul><p>Рассказываем, что такое список определений и как его создать в HTML.</p>
4
</ul><p>Рассказываем, что такое список определений и как его создать в HTML.</p>
5
<p>Иллюстрация: Polina Vari для Skillbox Media</p>
5
<p>Иллюстрация: Polina Vari для Skillbox Media</p>
6
<p>Программист, консультант, специалист по документированию. Легко и доступно рассказывает о сложных вещах в программировании и дизайне.</p>
6
<p>Программист, консультант, специалист по документированию. Легко и доступно рассказывает о сложных вещах в программировании и дизайне.</p>
7
<p>Иногда нужно представить данные в формате "термин - описание": расшифровать аббревиатуру, перечислить характеристики устройства или дать краткую инструкцию. В HTML для этого есть специальная структура - список определений. Он создаётся с помощью трёх тегов: <dl>, <dt>, <dd>.</p>
7
<p>Иногда нужно представить данные в формате "термин - описание": расшифровать аббревиатуру, перечислить характеристики устройства или дать краткую инструкцию. В HTML для этого есть специальная структура - список определений. Он создаётся с помощью трёх тегов: <dl>, <dt>, <dd>.</p>
8
<p>В статье разберёмся, как они работают.</p>
8
<p>В статье разберёмся, как они работают.</p>
9
<p><strong>Содержание:</strong></p>
9
<p><strong>Содержание:</strong></p>
10
<ul><li><a>Как создать список определений</a></li>
10
<ul><li><a>Как создать список определений</a></li>
11
<li><a>Когда использовать теги</a></li>
11
<li><a>Когда использовать теги</a></li>
12
<li><a>Как создавать список определений правильно</a></li>
12
<li><a>Как создавать список определений правильно</a></li>
13
<li><a>Атрибуты тегов <dl>, <dt>, <dd></a></li>
13
<li><a>Атрибуты тегов <dl>, <dt>, <dd></a></li>
14
<li><a>Как поисковики и экранные читалки понимают список определений</a></li>
14
<li><a>Как поисковики и экранные читалки понимают список определений</a></li>
15
<li><a>Чем <dl> отличается от списков <ul> и <ol></a></li>
15
<li><a>Чем <dl> отличается от списков <ul> и <ol></a></li>
16
<li><a>Как оформить список определений с помощью CSS</a></li>
16
<li><a>Как оформить список определений с помощью CSS</a></li>
17
<li><a>Как списки определений отражаются в разных браузерах и на мобильных устройствах</a></li>
17
<li><a>Как списки определений отражаются в разных браузерах и на мобильных устройствах</a></li>
18
<li><a>Ошибки при работе со списками определений</a></li>
18
<li><a>Ошибки при работе со списками определений</a></li>
19
</ul><p>Это делается с помощью трёх тегов:</p>
19
</ul><p>Это делается с помощью трёх тегов:</p>
20
<ul><li><dl> - контейнер для списка (от<em>definition list</em>);</li>
20
<ul><li><dl> - контейнер для списка (от<em>definition list</em>);</li>
21
<li><dt> - термин, который нужно объяснить (от<em>definition term</em>);</li>
21
<li><dt> - термин, который нужно объяснить (от<em>definition term</em>);</li>
22
<li><dd> - описание термина (от<em>definition description</em>).</li>
22
<li><dd> - описание термина (от<em>definition description</em>).</li>
23
</ul><p>Вот как это выглядит в коде:</p>
23
</ul><p>Вот как это выглядит в коде:</p>
24
<dl> <dt>HTML</dt> <dd>Язык разметки для создания веб-страниц.</dd> <dt>CSS</dt> <dd>Язык оформления HTML-документов.</dd> </dl><p>В браузере такой список отображается вертикально: термин - на одной строке, описание - на следующей. Маркеры или номера как в обычных списках не используются.</p>
24
<dl> <dt>HTML</dt> <dd>Язык разметки для создания веб-страниц.</dd> <dt>CSS</dt> <dd>Язык оформления HTML-документов.</dd> </dl><p>В браузере такой список отображается вертикально: термин - на одной строке, описание - на следующей. Маркеры или номера как в обычных списках не используются.</p>
25
<em>Скриншот: Google Chrome / Skillbox Media</em><p>Теги <dl>, <dt> и <dd> применяются, когда нужно отобразить структурированную информацию, например:</p>
25
<em>Скриншот: Google Chrome / Skillbox Media</em><p>Теги <dl>, <dt> и <dd> применяются, когда нужно отобразить структурированную информацию, например:</p>
26
<ul><li>термины с расшифровкой (глоссарии);</li>
26
<ul><li>термины с расшифровкой (глоссарии);</li>
27
<li>список вопросов и ответов (FAQ);</li>
27
<li>список вопросов и ответов (FAQ);</li>
28
<li>характеристики товара или профиля;</li>
28
<li>характеристики товара или профиля;</li>
29
<li>краткие инструкции и справки;</li>
29
<li>краткие инструкции и справки;</li>
30
<li>метаданные - дата публикации, автор, категория и так далее.</li>
30
<li>метаданные - дата публикации, автор, категория и так далее.</li>
31
</ul><p>Выглядит это следующим образом.</p>
31
</ul><p>Выглядит это следующим образом.</p>
32
<p><strong>Список вопросов и ответов:</strong></p>
32
<p><strong>Список вопросов и ответов:</strong></p>
33
<dl> <dt>Как создать сайт?</dt> <dd>Изучите HTML, CSS и JavaScript.</dd> <dt>Где найти учебники?</dt> <dd>В интернете, например, MDN.</dd> </dl><p>В браузере мы увидим это:</p>
33
<dl> <dt>Как создать сайт?</dt> <dd>Изучите HTML, CSS и JavaScript.</dd> <dt>Где найти учебники?</dt> <dd>В интернете, например, MDN.</dd> </dl><p>В браузере мы увидим это:</p>
34
<em>Скриншот: Google Chrome / Skillbox Media</em><p><strong>Характеристики товара или профиля пользователя:</strong></p>
34
<em>Скриншот: Google Chrome / Skillbox Media</em><p><strong>Характеристики товара или профиля пользователя:</strong></p>
35
<dl> <dt>Процессор:</dt> <dd>Intel Core i7</dd> <dt>Оперативная память:</dt> <dd>16 ГБ DDR4</dd> <dt>Видеокарта:</dt> <dd>NVIDIA RTX 3060</dd> </dl><p>Вывод:</p>
35
<dl> <dt>Процессор:</dt> <dd>Intel Core i7</dd> <dt>Оперативная память:</dt> <dd>16 ГБ DDR4</dd> <dt>Видеокарта:</dt> <dd>NVIDIA RTX 3060</dd> </dl><p>Вывод:</p>
36
<em>Скриншот: Google Chrome / Skillbox Media</em><p>Список определений должен строго соблюдать последовательность: термин (<dt>) - описание (<dd>). Каждый <dt> может иметь одно или несколько <dd> - и наоборот: несколько <dt> могут быть описаны одним <dd>. Главное, чтобы между ними была логическая связь.</p>
36
<em>Скриншот: Google Chrome / Skillbox Media</em><p>Список определений должен строго соблюдать последовательность: термин (<dt>) - описание (<dd>). Каждый <dt> может иметь одно или несколько <dd> - и наоборот: несколько <dt> могут быть описаны одним <dd>. Главное, чтобы между ними была логическая связь.</p>
37
<p>Рассмотрим разные типы структур и поясним, когда какая применяется.</p>
37
<p>Рассмотрим разные типы структур и поясним, когда какая применяется.</p>
38
<p>Обычная структура для глоссариев или справок, когда каждому термину соответствует одно определение.</p>
38
<p>Обычная структура для глоссариев или справок, когда каждому термину соответствует одно определение.</p>
39
<dl> <dt>Frontend</dt> <dd>Часть веб-разработки, отвечающая за внешний вид сайта.</dd> </dl><em>Скриншот: Google Chrome / Skillbox Media</em><p>Используется, когда у понятия есть синонимы или разные обозначения, но описание у них общее.</p>
39
<dl> <dt>Frontend</dt> <dd>Часть веб-разработки, отвечающая за внешний вид сайта.</dd> </dl><em>Скриншот: Google Chrome / Skillbox Media</em><p>Используется, когда у понятия есть синонимы или разные обозначения, но описание у них общее.</p>
40
<dl> <dt>JS</dt> <dt>JavaScript</dt> <dd>Язык программирования для взаимодействия с элементами страницы.</dd> </dl><p>В браузере мы увидим следующее:</p>
40
<dl> <dt>JS</dt> <dt>JavaScript</dt> <dd>Язык программирования для взаимодействия с элементами страницы.</dd> </dl><p>В браузере мы увидим следующее:</p>
41
<em>Скриншот: Google Chrome / Skillbox Media</em><p>Подходит, если нужно дать термину развернутое описание или привести несколько аспектов/толкований.</p>
41
<em>Скриншот: Google Chrome / Skillbox Media</em><p>Подходит, если нужно дать термину развернутое описание или привести несколько аспектов/толкований.</p>
42
<dl> <dt>API</dt> <dd>Интерфейс взаимодействия программ.</dd> <dd>Набор функций для работы с внешними сервисами.</dd> </dl><p>В браузере будет так:</p>
42
<dl> <dt>API</dt> <dd>Интерфейс взаимодействия программ.</dd> <dd>Набор функций для работы с внешними сервисами.</dd> </dl><p>В браузере будет так:</p>
43
<em>Скриншот: Google Chrome / Skillbox Media</em><p>Применяется, когда нужно вывести дополнительную информацию о документе, файле, публикации или пользователе в виде простых фактов.</p>
43
<em>Скриншот: Google Chrome / Skillbox Media</em><p>Применяется, когда нужно вывести дополнительную информацию о документе, файле, публикации или пользователе в виде простых фактов.</p>
44
<h3>Информация о статье</h3> <dl> <dt>Автор</dt> <dd>Таня Кузнецова</dd> <dt>Дата публикации</dt> <dd>21 июля 2025</dd> <dt>Категория</dt> <dd>HTML-разметка</dd> <dt>Просмотры</dt> <dd>1 245</dd> </dl><p>В браузере будет вот так:</p>
44
<h3>Информация о статье</h3> <dl> <dt>Автор</dt> <dd>Таня Кузнецова</dd> <dt>Дата публикации</dt> <dd>21 июля 2025</dd> <dt>Категория</dt> <dd>HTML-разметка</dd> <dt>Просмотры</dt> <dd>1 245</dd> </dl><p>В браузере будет вот так:</p>
45
<em>Скриншот: Google Chrome / Skillbox Media</em><p><strong>Что нельзя делать</strong></p>
45
<em>Скриншот: Google Chrome / Skillbox Media</em><p><strong>Что нельзя делать</strong></p>
46
<ul><li>Помещать в <dl> элементы, не относящиеся к структуре описания (например, <li>, <p> без контекста и так далее).</li>
46
<ul><li>Помещать в <dl> элементы, не относящиеся к структуре описания (например, <li>, <p> без контекста и так далее).</li>
47
<li>Начинать с <dd> без предваряющего <dt>.</li>
47
<li>Начинать с <dd> без предваряющего <dt>.</li>
48
<li>Перемешивать <dt> и <dd> бессистемно (например, <dt>, <dd>, <dd>, <dt> - это допустимо, но становится трудночитаемым).</li>
48
<li>Перемешивать <dt> и <dd> бессистемно (например, <dt>, <dd>, <dd>, <dt> - это допустимо, но становится трудночитаемым).</li>
49
</ul><p><strong>Рекомендации</strong></p>
49
</ul><p><strong>Рекомендации</strong></p>
50
<ul><li>Не используйте пустые теги <dt> или <dd>.</li>
50
<ul><li>Не используйте пустые теги <dt> или <dd>.</li>
51
<li>Не вставляйте внутри <dt> и <dd> блочные элементы вроде <div>, если в этом нет крайней необходимости. Это нарушает семантику и разметку, может привести к ошибкам и снижает доступность.</li>
51
<li>Не вставляйте внутри <dt> и <dd> блочные элементы вроде <div>, если в этом нет крайней необходимости. Это нарушает семантику и разметку, может привести к ошибкам и снижает доступность.</li>
52
<li>Если всё же нужны вложенные элементы, используйте <span>, <strong>, <a> и другие строчные теги, например:</li>
52
<li>Если всё же нужны вложенные элементы, используйте <span>, <strong>, <a> и другие строчные теги, например:</li>
53
</ul><dl> <dt><strong>HTML</strong></dt> <dd> Язык <em>разметки</em>, используемый для создания структуры веб-страниц. Пример тега: <code>&lt;div&gt;</code>. Подробнее см. на сайте <a href="https://developer.mozilla.org/ru/docs/Web/HTML" target="_blank"> MDN Web Docs </a>. </dd> <dt>CSS</dt> <dd> <span style="color: teal;">Технология оформления</span> веб-страниц. Стили описываются с помощью деклараций, например: <code>font-size: 16px;</code>. </dd> <dt>JavaScript</dt> <dd> <strong>Скриптовый язык</strong>, позволяющий делать страницы интерактивными. Подробнее: <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript" target="_blank">документация JS</a>. </dd> </dl><p>В браузере это будет выглядеть так:</p>
53
</ul><dl> <dt><strong>HTML</strong></dt> <dd> Язык <em>разметки</em>, используемый для создания структуры веб-страниц. Пример тега: <code>&lt;div&gt;</code>. Подробнее см. на сайте <a href="https://developer.mozilla.org/ru/docs/Web/HTML" target="_blank"> MDN Web Docs </a>. </dd> <dt>CSS</dt> <dd> <span style="color: teal;">Технология оформления</span> веб-страниц. Стили описываются с помощью деклараций, например: <code>font-size: 16px;</code>. </dd> <dt>JavaScript</dt> <dd> <strong>Скриптовый язык</strong>, позволяющий делать страницы интерактивными. Подробнее: <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript" target="_blank">документация JS</a>. </dd> </dl><p>В браузере это будет выглядеть так:</p>
54
<em>Скриншот: Google Chrome / Skillbox Media</em><p>Все три тега принимают только глобальные атрибуты, то есть:</p>
54
<em>Скриншот: Google Chrome / Skillbox Media</em><p>Все три тега принимают только глобальные атрибуты, то есть:</p>
55
<ul><li>id, class - для идентификации и привязки стилей;</li>
55
<ul><li>id, class - для идентификации и привязки стилей;</li>
56
<li>lang, dir - для указания языка и направления текста;</li>
56
<li>lang, dir - для указания языка и направления текста;</li>
57
<li>title - дополнительная подсказка при наведении;</li>
57
<li>title - дополнительная подсказка при наведении;</li>
58
<li>style, tabindex, события (onclick и другие) и так далее.</li>
58
<li>style, tabindex, события (onclick и другие) и так далее.</li>
59
</ul><p>Специальных, уникальных атрибутов у них нет - всё работает в рамках тех же правил, что и у большинства других HTML-элементов.</p>
59
</ul><p>Специальных, уникальных атрибутов у них нет - всё работает в рамках тех же правил, что и у большинства других HTML-элементов.</p>
60
<p>HTML помогает поисковым системам и специальные программам для людей с нарушением зрения лучше понимать сайт. Список определений с тегами <dl>, <dt> и <dd> - это семантическая структура, которая как раз и помогает сделать код понятнее и для браузера, и для скринридера.</p>
60
<p>HTML помогает поисковым системам и специальные программам для людей с нарушением зрения лучше понимать сайт. Список определений с тегами <dl>, <dt> и <dd> - это семантическая структура, которая как раз и помогает сделать код понятнее и для браузера, и для скринридера.</p>
61
<p>Поисковая система видит не сам текст, а HTML-структуру страницы. Когда вы используете теги <dl>, <dt> и <dd>, она понимает, что это не просто абзацы, а логически связанные пары - термин и его расшифровка.</p>
61
<p>Поисковая система видит не сам текст, а HTML-структуру страницы. Когда вы используете теги <dl>, <dt> и <dd>, она понимает, что это не просто абзацы, а логически связанные пары - термин и его расшифровка.</p>
62
<p>Например:</p>
62
<p>Например:</p>
63
<dl> <dt>Автор</dt> <dd>Алексей Смирнов</dd> <dt>Дата публикации</dt> <dd>26 июля 2025</dd> </dl><p>Поисковая система может воспринять такой текст как описание страницы и использовать его, например, в расширенном сниппете на странице поиска. Это будет полезно, если вы создаёте карточки товаров, справочные блоки или глоссарии.</p>
63
<dl> <dt>Автор</dt> <dd>Алексей Смирнов</dd> <dt>Дата публикации</dt> <dd>26 июля 2025</dd> </dl><p>Поисковая система может воспринять такой текст как описание страницы и использовать его, например, в расширенном сниппете на странице поиска. Это будет полезно, если вы создаёте карточки товаров, справочные блоки или глоссарии.</p>
64
<p>Чтобы такая структура сработала, нужно соблюдать порядок: <dt> - это всегда термин, а <dd> - его описание. Внутри <dl> не должно быть лишних тегов вроде <p> или <li> - они только мешают.</p>
64
<p>Чтобы такая структура сработала, нужно соблюдать порядок: <dt> - это всегда термин, а <dd> - его описание. Внутри <dl> не должно быть лишних тегов вроде <p> или <li> - они только мешают.</p>
65
<p>Скринридеры - это программы, которые озвучивают содержимое сайта вслух. Их используют люди с нарушением зрения. Для таких пользователей важно не только то, что написано на экране, но и как информация организована.</p>
65
<p>Скринридеры - это программы, которые озвучивают содержимое сайта вслух. Их используют люди с нарушением зрения. Для таких пользователей важно не только то, что написано на экране, но и как информация организована.</p>
66
<p>Если список определений размечен правильно, читалка скажет примерно так: "Список определений. Элемент 1 из 3. Термин: HTML. Описание: Язык разметки веб-страниц".</p>
66
<p>Если список определений размечен правильно, читалка скажет примерно так: "Список определений. Элемент 1 из 3. Термин: HTML. Описание: Язык разметки веб-страниц".</p>
67
<p>Но не все читалки работают одинаково. Например:</p>
67
<p>Но не все читалки работают одинаково. Например:</p>
68
<ul><li>VoiceOver (на macOS и iPhone) и NVDA (на Windows) обычно читают такие списки корректно;</li>
68
<ul><li>VoiceOver (на macOS и iPhone) и NVDA (на Windows) обычно читают такие списки корректно;</li>
69
<li>TalkBack на Android может не воспринимать список как единое целое;</li>
69
<li>TalkBack на Android может не воспринимать список как единое целое;</li>
70
<li>Safari может игнорировать дополнительную разметку, если вы вручную укажете роли role="term" и role="definition".</li>
70
<li>Safari может игнорировать дополнительную разметку, если вы вручную укажете роли role="term" и role="definition".</li>
71
</ul><p>В HTML есть специальный атрибут role - с его помощью можно указать, какую роль играет элемент на странице. Например, если вы пишете: <div role="button">Купить</div>, то браузер и читалка будут воспринимать обычный <div> как кнопку. В случае списка определений это лишнее. Теги <dt> и <dd> имеют нужную роль - браузер и читалка и так понимают, что это список определений. Дополнительные роли только мешают.</p>
71
</ul><p>В HTML есть специальный атрибут role - с его помощью можно указать, какую роль играет элемент на странице. Например, если вы пишете: <div role="button">Купить</div>, то браузер и читалка будут воспринимать обычный <div> как кнопку. В случае списка определений это лишнее. Теги <dt> и <dd> имеют нужную роль - браузер и читалка и так понимают, что это список определений. Дополнительные роли только мешают.</p>
72
<p>Поэтому лучше не добавлять к тегам <dt> и <dd> ничего лишнего - стандартной разметки достаточно, чтобы всё работало как надо.</p>
72
<p>Поэтому лучше не добавлять к тегам <dt> и <dd> ничего лишнего - стандартной разметки достаточно, чтобы всё работало как надо.</p>
73
<p>На самом деле, между этими тегами очень небольшая разница. Ориентируйтесь на свой здравый смысл. Но если соблюдать все формальности, то между этими видами списков есть семантическая разница.</p>
73
<p>На самом деле, между этими тегами очень небольшая разница. Ориентируйтесь на свой здравый смысл. Но если соблюдать все формальности, то между этими видами списков есть семантическая разница.</p>
74
<p>Если нужно показать термины с пояснениями, то подходит список определений - <dl>. А если просто перечислить элементы - в любом порядке или по шагам - лучше использовать списки <ul> и <ol>.</p>
74
<p>Если нужно показать термины с пояснениями, то подходит список определений - <dl>. А если просто перечислить элементы - в любом порядке или по шагам - лучше использовать списки <ul> и <ol>.</p>
75
<p>Такой список применяют, когда порядок элементов неважен. Например, чтобы перечислить ингредиенты, пункты меню или функции продукта.</p>
75
<p>Такой список применяют, когда порядок элементов неважен. Например, чтобы перечислить ингредиенты, пункты меню или функции продукта.</p>
76
<p>Каждый элемент помещается в тег <li>, а браузер отображает их с маркерами - кругами, точками, тире или другим стилем. Одним словом, это обыкновенный маркированный список.</p>
76
<p>Каждый элемент помещается в тег <li>, а браузер отображает их с маркерами - кругами, точками, тире или другим стилем. Одним словом, это обыкновенный маркированный список.</p>
77
<ul> <li>Яблоко</li> <li>Банан</li> <li>Апельсин</li> </ul><p>Выглядит это так:</p>
77
<ul> <li>Яблоко</li> <li>Банан</li> <li>Апельсин</li> </ul><p>Выглядит это так:</p>
78
<em>Скриншот: Google Chrome / Skillbox Media</em><p>Это нумерованный список. Тег <ol> используется, когда важен порядок элементов (шаги инструкции, рейтинги и так далее). Элементы списка также заключаются в теги <li> и отображаются цифрами с точкой.</p>
78
<em>Скриншот: Google Chrome / Skillbox Media</em><p>Это нумерованный список. Тег <ol> используется, когда важен порядок элементов (шаги инструкции, рейтинги и так далее). Элементы списка также заключаются в теги <li> и отображаются цифрами с точкой.</p>
79
<h3>Как установить приложение</h3> <ol> <li>Перейдите на официальный сайт.</li> <li>Скачайте установочный файл для вашей операционной системы.</li> <li>Запустите установку и следуйте инструкциям мастера.</li> <li>После установки откройте приложение и выполните вход.</li> </ol><p>Выглядит он так:</p>
79
<h3>Как установить приложение</h3> <ol> <li>Перейдите на официальный сайт.</li> <li>Скачайте установочный файл для вашей операционной системы.</li> <li>Запустите установку и следуйте инструкциям мастера.</li> <li>После установки откройте приложение и выполните вход.</li> </ol><p>Выглядит он так:</p>
80
<em>Скриншот: Google Chrome / Skillbox Media</em><p>Чтобы список выглядел аккуратнее и было легче его читать, можно оформить его с помощью CSS.</p>
80
<em>Скриншот: Google Chrome / Skillbox Media</em><p>Чтобы список выглядел аккуратнее и было легче его читать, можно оформить его с помощью CSS.</p>
81
<p>Для примера создадим список <dl>:</p>
81
<p>Для примера создадим список <dl>:</p>
82
<p><strong>HTML</strong></p>
82
<p><strong>HTML</strong></p>
83
<dl> <dt>HTML</dt> <dd>Язык разметки для создания веб-страниц.</dd> <dt>CSS</dt> <dd>Используется для оформления HTML-документов.</dd> </dl><p>И будем менять его CSS-оформление.</p>
83
<dl> <dt>HTML</dt> <dd>Язык разметки для создания веб-страниц.</dd> <dt>CSS</dt> <dd>Используется для оформления HTML-документов.</dd> </dl><p>И будем менять его CSS-оформление.</p>
84
<p><strong>CSS</strong></p>
84
<p><strong>CSS</strong></p>
85
dl { margin: 1.5em 0; } dt { font-weight: bold; margin-top: 1em; } dd { margin-left: 1.5em; color: #555; }<em>Скриншот: Google Chrome / Skillbox Media</em><p><strong>CSS</strong></p>
85
dl { margin: 1.5em 0; } dt { font-weight: bold; margin-top: 1em; } dd { margin-left: 1.5em; color: #555; }<em>Скриншот: Google Chrome / Skillbox Media</em><p><strong>CSS</strong></p>
86
dl { border: 1px solid #ccc; padding: 1em; background-color: #f9f9f9; border-radius: 8px; } dt { font-weight: bold; color: #222; margin-top: 1em; } dd { margin-left: 1em; color: #555; }<em>Скриншот: Google Chrome / Skillbox Media</em><p><strong>CSS</strong></p>
86
dl { border: 1px solid #ccc; padding: 1em; background-color: #f9f9f9; border-radius: 8px; } dt { font-weight: bold; color: #222; margin-top: 1em; } dd { margin-left: 1em; color: #555; }<em>Скриншот: Google Chrome / Skillbox Media</em><p><strong>CSS</strong></p>
87
dl { display: grid; grid-template-columns: max-content 1fr; row-gap: 0.5em; column-gap: 1em; } dt { font-weight: bold; text-align: right; } dd { margin: 0; }<em>Скриншот: Google Chrome / Skillbox Media</em><ul><li>Убирайте margin у <dd>, если используете grid или flex.</li>
87
dl { display: grid; grid-template-columns: max-content 1fr; row-gap: 0.5em; column-gap: 1em; } dt { font-weight: bold; text-align: right; } dd { margin: 0; }<em>Скриншот: Google Chrome / Skillbox Media</em><ul><li>Убирайте margin у <dd>, если используете grid или flex.</li>
88
<li>Используйте :first-of-type, :last-of-type, :nth-of-type() для точечной стилизации терминов при необходимости, например:</li>
88
<li>Используйте :first-of-type, :last-of-type, :nth-of-type() для точечной стилизации терминов при необходимости, например:</li>
89
</ul><p><strong>HTML:</strong></p>
89
</ul><p><strong>HTML:</strong></p>
90
<dl> <dt>HTML</dt> <dd>Язык разметки для веб-страниц.</dd> <dt>CSS</dt> <dd>Язык стилей для оформления HTML.</dd> <dt>JavaScript</dt> <dd>Добавляет интерактивность на страницы.</dd> </dl><p><strong>CSS:</strong></p>
90
<dl> <dt>HTML</dt> <dd>Язык разметки для веб-страниц.</dd> <dt>CSS</dt> <dd>Язык стилей для оформления HTML.</dd> <dt>JavaScript</dt> <dd>Добавляет интерактивность на страницы.</dd> </dl><p><strong>CSS:</strong></p>
91
/* Стилизуем первый термин */ dt:first-of-type { color: darkred; text-transform: uppercase; } /* Стилизуем последнее описание */ dd:last-of-type { font-style: italic; color: #444; } /* Стилизуем второй термин */ dt:nth-of-type(2) { background-color: #e0f7fa; padding: 0.2em 0.5em; border-radius: 4px; } /* Стилизуем каждое нечётное описание */ dd:nth-of-type(odd) { background-color: #f9f9f9; padding-left: 1em; border-left: 3px solid #ccc; }<em>Скриншот: Google Chrome / Skillbox Media</em><p>Что делает каждая строка:</p>
91
/* Стилизуем первый термин */ dt:first-of-type { color: darkred; text-transform: uppercase; } /* Стилизуем последнее описание */ dd:last-of-type { font-style: italic; color: #444; } /* Стилизуем второй термин */ dt:nth-of-type(2) { background-color: #e0f7fa; padding: 0.2em 0.5em; border-radius: 4px; } /* Стилизуем каждое нечётное описание */ dd:nth-of-type(odd) { background-color: #f9f9f9; padding-left: 1em; border-left: 3px solid #ccc; }<em>Скриншот: Google Chrome / Skillbox Media</em><p>Что делает каждая строка:</p>
92
<ul><li>dt:first-of-type стилизует первый <dt>;</li>
92
<ul><li>dt:first-of-type стилизует первый <dt>;</li>
93
<li>dd:last-of-type стилизует последний <dd>;</li>
93
<li>dd:last-of-type стилизует последний <dd>;</li>
94
<li>dt:nth-of-type(2) стилизует второй <dt>;</li>
94
<li>dt:nth-of-type(2) стилизует второй <dt>;</li>
95
<li>dd:nth-of-type(odd) стилизует каждое нечётное <dd>.</li>
95
<li>dd:nth-of-type(odd) стилизует каждое нечётное <dd>.</li>
96
</ul><p>Списки определений (<dl>, <dt>, <dd>) отражаются корректно во всех современных браузерах - Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, Opera:</p>
96
</ul><p>Списки определений (<dl>, <dt>, <dd>) отражаются корректно во всех современных браузерах - Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, Opera:</p>
97
<ul><li><dl> отображается как блочный элемент;</li>
97
<ul><li><dl> отображается как блочный элемент;</li>
98
<li><dt> обычно выделяется жирным шрифтом;</li>
98
<li><dt> обычно выделяется жирным шрифтом;</li>
99
<li><dd> имеет отступ слева, чтобы показать, что это описание;</li>
99
<li><dd> имеет отступ слева, чтобы показать, что это описание;</li>
100
<li>браузеры не вставляют маркеры, как это делают для <ul> или <ol>.</li>
100
<li>браузеры не вставляют маркеры, как это делают для <ul> или <ol>.</li>
101
</ul><p>На мобильных устройствах есть особенности: на экранах шириной до 600px отступы <dd> кажутся слишком большими, а длинные строки в <dd> не помещаются по ширине - особенно в характеристиках товаров или технических таблицах.</p>
101
</ul><p>На мобильных устройствах есть особенности: на экранах шириной до 600px отступы <dd> кажутся слишком большими, а длинные строки в <dd> не помещаются по ширине - особенно в характеристиках товаров или технических таблицах.</p>
102
<p>Список определений для мобильных устройств можно адаптировать так:</p>
102
<p>Список определений для мобильных устройств можно адаптировать так:</p>
103
@media (max-width: 600px) { dl { grid-template-columns: 1fr; } dt { font-weight: bold; margin-top: 12px; } dd { margin: 0 0 10px 0; } }<p>Здесь:</p>
103
@media (max-width: 600px) { dl { grid-template-columns: 1fr; } dt { font-weight: bold; margin-top: 12px; } dd { margin: 0 0 10px 0; } }<p>Здесь:</p>
104
<ul><li>grid-template-columns: 1fr;Переводит структуру в одну колонку, чтобы термин и описание шли друг за другом по вертикали. На узких экранах не будет сломанных строк и горизонтального скролла.</li>
104
<ul><li>grid-template-columns: 1fr;Переводит структуру в одну колонку, чтобы термин и описание шли друг за другом по вертикали. На узких экранах не будет сломанных строк и горизонтального скролла.</li>
105
<li>dt { font-weight: bold; margin-top: 12px; }Подчёркивает термин (<dt>) жирным и даёт верхний отступ, чтобы визуально отделить блоки.</li>
105
<li>dt { font-weight: bold; margin-top: 12px; }Подчёркивает термин (<dt>) жирным и даёт верхний отступ, чтобы визуально отделить блоки.</li>
106
<li>dd { margin: 0 0 10px 0; }Добавляет отступ снизу у описания - улучшает читаемость между парами термин - описание.</li>
106
<li>dd { margin: 0 0 10px 0; }Добавляет отступ снизу у описания - улучшает читаемость между парами термин - описание.</li>
107
</ul><p>Вот часто встречающиеся ошибки при работе со списками определений в HTML. Такой код теряет семантику: поисковики, скринридеры и другие инструменты не понимают структуру как "термин - описание".</p>
107
</ul><p>Вот часто встречающиеся ошибки при работе со списками определений в HTML. Такой код теряет семантику: поисковики, скринридеры и другие инструменты не понимают структуру как "термин - описание".</p>
108
<p>Вместо семантических <dl>, <dt>, <dd> применяются <div>, <ul>, <li> или другие универсальные элементы:</p>
108
<p>Вместо семантических <dl>, <dt>, <dd> применяются <div>, <ul>, <li> или другие универсальные элементы:</p>
109
<div><b>HTML:</b> Язык разметки</div><p>Правильно<strong>:</strong></p>
109
<div><b>HTML:</b> Язык разметки</div><p>Правильно<strong>:</strong></p>
110
<dl> <dt>HTML</dt> <dd>Язык разметки</dd> </dl><p>Иногда разработчики используют жирный шрифт и отступы, чтобы визуально имитировать список определений, но не используют правильные теги:</p>
110
<dl> <dt>HTML</dt> <dd>Язык разметки</dd> </dl><p>Иногда разработчики используют жирный шрифт и отступы, чтобы визуально имитировать список определений, но не используют правильные теги:</p>
111
<p><strong>HTML:</strong> Язык гипертекстовой разметки</p> <p><strong>CSS:</strong> Таблицы каскадных стилей</p> <p><strong>JavaScript:</strong> Язык программирования для веба</p><p>Здесь используются теги <p> и <strong> для визуального выделения, но это не список определений.</p>
111
<p><strong>HTML:</strong> Язык гипертекстовой разметки</p> <p><strong>CSS:</strong> Таблицы каскадных стилей</p> <p><strong>JavaScript:</strong> Язык программирования для веба</p><p>Здесь используются теги <p> и <strong> для визуального выделения, но это не список определений.</p>
112
<p>Правильно будет так:</p>
112
<p>Правильно будет так:</p>
113
<dl> <dt>HTML</dt> <dd>Язык гипертекстовой разметки</dd> <dt>CSS</dt> <dd>Таблицы каскадных стилей</dd> <dt>JavaScript</dt> <dd>Язык программирования для веба</dd> </dl><a>Курс с трудоустройством: "Профессия Фронтенд-разработчик + ИИ" Узнать о курсе</a>
113
<dl> <dt>HTML</dt> <dd>Язык гипертекстовой разметки</dd> <dt>CSS</dt> <dd>Таблицы каскадных стилей</dd> <dt>JavaScript</dt> <dd>Язык программирования для веба</dd> </dl><a>Курс с трудоустройством: "Профессия Фронтенд-разработчик + ИИ" Узнать о курсе</a>