Чтобы сгруппировать несколько терминов и описаний, поместите один или несколько элементов dt перед одним или несколькими элементами dd внутри dl. В этом руководстве показано, как выбрать подходящую группировку, создать небольшой глоссарий в TextEdit на Mac и проверить, что связи между элементами остаются понятными.
Как список описаний в HTML группирует термины?
Список описаний задаёт связи между именами и значениями. Каждая группа содержит как минимум один термин и одно описание; все термины располагаются перед описаниями. Следующий термин после описания начинает новую группу. Эти связи определяются порядком элементов в документе. Стандарт HTML: элемент dl
В глоссарии термином может быть слово, обозначающее элемент макета, а его описание может объяснять это слово. Несколько идущих подряд терминов могут иметь одно общее описание. Не нужно повторять одно и то же объяснение после каждого альтернативного названия. MDN: Элемент термина описания
Практический вопрос — что должно быть объединено. Прежде чем писать разметку, запишите каждую предполагаемую связь обычными словами. В этом синтетическом примере «Gap» и «Gutter» имеют одно общее объяснение, а у «Tile» есть два альтернативных значения.
| Предполагаемая связь | Структура в одной группе |
|---|---|
| Один термин с одним описанием | Один dt, затем один dd |
| Несколько терминов с одним общим описанием | Все элементы dt, затем один dd |
| Один термин с альтернативными описаниями | Один dt, затем несколько элементов dd |
| Несколько терминов с общими альтернативными описаниями | Все элементы dt, затем все элементы dd |
| Одно описание, состоящее из нескольких абзацев | Один dd, содержащий абзацы |
Эти шаблоны соответствуют правилам группировки стандарта. В частности, отдельные описания представляют альтернативные значения; абзацы, относящиеся к одному значению, должны оставаться внутри одного dd. Стандарт HTML: семантика списка описаний
Какие описания следует объединять в одну группу?
Проверьте так: можно ли обоснованно отнести каждое описание в предлагаемой группе ко всем терминам этой группы? Если нет, разделите содержимое на отдельные группы. Это редакторская проверка, основанная на модели связей, которая помогает обнаружить случайные сочетания до публикации страницы.
Несколько терминов с одним общим описанием
В этом фрагменте двум синтетическим терминам глоссария соответствует одно общее объяснение. Оба термина стоят перед описанием, как и в документированном MDN шаблоне с несколькими терминами. MDN: Несколько терминов, одно описание
<dl>
<dt>Gap</dt>
<dt>Gutter</dt>
<dd>The space between adjacent columns.</dd>
</dl>
Не воспринимайте этот пример как две отдельные записи, у которых просто отсутствуют описания. Здесь два названия намеренно объединены в одну группу. Если в вашем глоссарии у них разные значения, укажите для каждого названия собственное описание.
Один термин с альтернативными описаниями
В одной группе описание может следовать за другим описанием. Здесь вымышленный глоссарий использует слово «Tile» для обозначения двух разных понятий. MDN: Элемент сведений об описании
<dl>
<dt>Tile</dt>
<dd>A repeating unit in a visual pattern.</dd>
<dd>A rectangular content block in a page layout.</dd>
</dl>
Если несколько названий имеют те же альтернативные значения, поместите дополнительные термины перед первым описанием. Не исходите из того, что первый термин относится только к первому описанию, а второй — только ко второму: для этого потребовались бы отдельные группы. MDN явно описывает сочетание нескольких терминов и описаний. MDN: Несколько терминов и описаний
Одно описание из нескольких абзацев
Если второй абзац дополняет первое объяснение, оставьте оба абзаца внутри одного dd. Элемент dd допускает потоковое содержимое, включая абзацы. Так сохраняется единое описание с удобной для чтения внутренней структурой. MDN: Техническая сводка элемента сведений об описании
<dl>
<dt>Canvas</dt>
<dd>
<p>The working area for a composition.</p>
<p>In this glossary, the term refers to the whole area.</p>
</dd>
</dl>
Создайте полный пример в TextEdit на Mac
Начните с нового файла, чтобы изучить результат, не меняя существующий документ. В TextEdit выберите File > New, затем Format > Make Plain Text. Apple описывает этот способ как начальный шаг при создании HTML-файла. Apple: Работа с HTML-документами в TextEdit на Mac
Вставьте полный документ ниже. В нём три рассмотренных выше решения объединены в небольшой глоссарий. Каждая группа имеет собственную обёртку div — структуру, которую можно использовать для применения стилей или атрибутов ко всей группе. MDN: Обёртывание групп «имя—значение»
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Layout glossary</title>
</head>
<body>
<h1>Layout glossary</h1>
<dl>
<div>
<dt>Gap</dt>
<dt>Gutter</dt>
<dd>The space between adjacent columns.</dd>
</div>
<div>
<dt>Tile</dt>
<dd>A repeating unit in a visual pattern.</dd>
<dd>A rectangular content block in a page layout.</dd>
</div>
<div>
<dt>Canvas</dt>
<dd>
<p>The working area for a composition.</p>
<p>In this glossary, the term refers to the whole area.</p>
</dd>
</div>
</dl>
</body>
</html>
Выберите File > Save, назовите файл layout-glossary.html и нажмите Save. Если TextEdit спросит, какое расширение использовать, выберите Use .html. Это описанные Apple шаги сохранения HTML-файла, написанного вручную. Apple: Создание HTML-файла
Откройте сохранённый файл в браузере. Сравните отображаемый текст с тремя ожидаемыми связями: у «Gap» и «Gutter» одно общее объяснение; у «Tile» два описания; у «Canvas» одно описание из двух абзацев. Это поможет проверить предполагаемые связи между элементами, даже если стандартные отступы браузера отличаются от желаемого оформления.
Сохраняйте группировку при редактировании
HTML допускает как группы «термин—описание», размещённые непосредственно внутри dl, так и группы, обёрнутые в элементы div. Для конкретного списка используйте одну и ту же структуру. В показанном выше варианте с обёртками держите термины и описания каждой группы непосредственно внутри её обёртки; не помещайте термины и описания в отдельные контейнеры. Стандарт HTML: модель содержимого списка описаний
При изменении примера выполните короткую проверку:
- Найдите группу, которую хотите изменить.
- Оставьте все её термины перед описаниями.
- Определите, является ли новый поясняющий текст ещё одним значением или дополнительным абзацем текущего значения.
- Добавьте новую полную группу, если вводите не связанный с остальными термин.
- Сохраните документ и обновите предварительный просмотр в браузере.
Например, если добавить «Panel» между двумя описаниями «Tile», предполагаемая связь нарушится: следующее описание будет относиться к вновь начатой группе. Вместо этого поместите новый термин и его описание в собственную обёртку. Это соответствует правилу стандарта: термин, встречающийся после описания, начинает новую группу. Стандарт HTML: алгоритм группировки
Если TextEdit снова откроет файл как форматированный текст, выберите File > Open, укажите документ, нажмите Show Options и перед открытием выберите Ignore rich text commands. Для будущих файлов включите Display HTML files as HTML code instead of formatted text в разделе TextEdit > Settings > Open and Save. Apple: Просмотр HTML-документа как кода
При окончательной проверке сосредоточьтесь на смысле: определите термины, найдите общие для них описания и убедитесь, что разрывы между абзацами случайно не превращаются в отдельные значения. Когда все связи настроены верно, глоссарий готов к оформлению, необходимому для вашего документа.
Источники
- Стандарт HTML — группировка содержимого — WHATWG.
dl: Элемент списка описаний HTML — MDN Web Docs.dt: Элемент термина описания HTML — MDN Web Docs.dd: Элемент сведений об описании HTML — MDN Web Docs.- Работа с HTML-документами в TextEdit на Mac — Apple.