Тег dt (от английского description term, «термин описания») записывает название в списке определений dl: слово, вопрос или поле, к которому относится значение. Значение пишут в соседнем dd. Это парный тег, а закрывающий </dt> можно опустить, если сразу за ним идёт другой dt или dd. Браузер выводит название обычным шрифтом с новой строки без отступа, жирным оно не бывает.
Сам список подробно разобран на странице про тег dl, а урок Термин dt: как записать название в списке dl объясняет, когда вместо обычного списка нужна такая пара. Здесь только то, что относится к dt: где его можно записать, что допустимо внутри, как закрепить, пронумеровать и дать ему якорь.
<dl>
<dt>Цвет</dt>
<dd>Зелёный</dd>
</dl>В этой статье
- Тег dt в HTML: что это и как браузер выводит термин
- Где записать тег dt: прямо в dl или в div внутри dl
- Несколько тегов dt подряд: синонимы и общее описание
- Что допустимо внутри тега dt: span, strong, abbr, a, img
- Тег dfn внутри dt: термин и abbr с расшифровкой
- Закрывающий тег dt: что его заканчивает и когда dd теряется
- Стили тега dt: жирность, цвет и двоеточие
- Нумерация тегов dt через counter: группы и синонимы
- Ширина тега dt в сетке: max-content и обрезка многоточием
- Закреплённый тег dt: sticky внутри dl и внутри div
- Якорь на теге dt: id, :target и scroll-margin-top
- Тег dt в JavaScript: фильтр глоссария по названию
- Атрибуты тега dt: только глобальные
- Вопросы про тег dt: раскрытие по клику и язык термина
- Частые ошибки с тегом dt
Тег dt в HTML: что это и как браузер выводит термин
Тег dt блочный: display: block, margin: 0, жирность обычная (400), отступа слева нет. Это отличает его от dd, который сдвинут вправо на 40px. Все остальные свойства (шрифт, цвет, рамка) dt наследует от родителя, поэтому вид названия настраивается только в CSS.
dt {
display: block;
}Пример: название в dt и его стили по умолчанию
Выберите список: под результатом показано, как браузер вывел dt, и отступ у dd.
Где записать тег dt: прямо в dl или в div внутри dl
Родитель у dt один из двух: dl или div, который сам записан прямо в dl и вмещает одну группу. В div вне dl, в section, в li и в dd тег dt записывать нельзя: валидатор выдаёт ошибку, а браузер всё равно выводит название обычным блоком. Если вложенному описанию нужны свои названия, внутри dd записывают отдельный dl.
<dl>
<div>
<dt>Цвет</dt>
<dd>Зелёный</dd>
</div>
</dl>Пример: где допустим dt
Выберите запись: вверху её код, под результатом написано, допустима ли она.
Несколько тегов dt подряд: синонимы и общее описание
Несколько dt подряд означают синонимы: у них одно общее описание в dd. Так записывают сокращение и полное название, термин и его перевод. По умолчанию каждый dt выводится на своей строке. Чтобы собрать их в одну, dt делают display: inline, а разделитель добавляют псевдоэлементом dt + dt::before: он срабатывает только для второго и следующих названий.
<dl>
<dt>CSS</dt>
<dt>Каскадные стили</dt>
<dd>Язык оформления страниц</dd>
</dl>dt {
display: inline;
}
dt + dt::before {
content: ' / ';
}Пример: синонимы в одной строке
Выберите вариант: вверху правила, под результатом написано, в одной ли строке два названия.
Что допустимо внутри тега dt: span, strong, abbr, a, img
Правило стандарта: внутри dt допустим любой поток, но без заголовков (h1-h6, hgroup) и без секций (header, footer, nav, section, article). Всё остальное проходит проверку: span, strong, abbr, a, img, code, button, а также p, ul и div. Но название должно оставаться короткой строкой. Если в dt попадает абзац или список, пара «название и значение» теряет смысл.
<dt>
<strong>Цвет</strong>
<span>(основной)</span>
</dt>Пример: что допустимо внутри dt
Выберите запись: вверху код, под результатом написано, допустима ли она. Картинка в примере нарисована квадратом.
Тег dfn внутри dt: термин и abbr с расшифровкой
Термин, который тут же определяется, отмечают тегом dfn: так в разметке видно, что в этом месте объясняется само слово. Если у термина есть расшифровка, abbr записывают внутри dfn (или наоборот). Оба порядка допустимы. Сам dfn нельзя вкладывать в другой dfn. Если на термин будут ссылаться, id задают у dfn, а ссылку a можно обернуть вокруг dfn.
<dt>
<dfn>
<abbr title="HyperText Markup Language">HTML</abbr>
</dfn>
</dt>
<dd>Язык разметки страниц</dd>Пример: dfn и abbr в dt
Выберите запись: под результатом начертание dfn и подчёркивание abbr, которые браузер вычислил.
Закрывающий тег dt: что его заканчивает и когда dd теряется
Закрывающий </dt> можно не писать, если сразу за названием идёт dt или dd. Браузер сам закроет открытое название. Опасность в другом: p и div внутри dt закрываются тегом dd, а вот ul и li не закрываются. Незакрытый ul поглощает dd, и тот оказывается внутри li, а пара теряется. Поэтому всё, что глубже обычной строки, закрывают явно.
<dl>
<dt>A
<dt>B
<dd>D
</dl>Пример: какое дерево построил браузер
Выберите запись: вверху код, под результатом дерево, которое построил браузер, и вывод о паре dt и dd.
Стили тега dt: жирность, цвет и двоеточие
Название можно выделить любыми свойствами: жирность, цвет, размер, регистр, рамка. Двоеточие после названия лучше добавлять псевдоэлементом dt::after, чтобы не засорять разметку: тогда его не нужно копировать в текст, а при смене оформления оно убирается одним правилом. Вместе с жирностью (font-weight: 700) такой dt уверенно отделяется от dd.
dt {
font-weight: 700;
}
dt::after {
content: ':';
}Пример: стили названия dt
Выберите правило: вверху код, под результатом пояснение и вычисленная жирность dt.
Нумерация тегов dt через counter: группы и синонимы
Названия можно пронумеровать счётчиком counter, не меняя разметку. Если применить его ко всем dt, синонимы получат разные номера, хотя описание у них общее. Чтобы номер получала группа, правило записывают для первого dt группы: dt:first-child (первый в списке) и dd + dt (первый после очередного описания).
dl {
counter-reset: t;
}
dt:first-child::before,
dd + dt::before {
counter-increment: t;
content: counter(t) '. ';
}Пример: номера у групп и у синонимов
Выберите вариант: вверху код, под результатом сколько названий получили номер.
Ширина тега dt в сетке: max-content и обрезка многоточием
Когда dl разложен по сетке, ширина колонки названий зависит от самого длинного dt. Её можно задать числом (110px), а можно доверить браузеру: max-content растягивает колонку по самому длинному названию и не переносит его. Если длинные названия нужно уместить в узкую колонку, их обрезают многоточием (white-space: nowrap, overflow: hidden, text-overflow: ellipsis), а полный текст записывают в атрибут title.
dl {
display: grid;
grid-template-columns: max-content 1fr;
gap: 0 12px;
}
dd {
margin: 0;
}Пример: ширина колонки названий
Выберите вариант: вверху код, под результатом ширина колонки и состояние длинного названия.
Закреплённый тег dt: sticky внутри dl и внутри div
Название можно закрепить при прокрутке: position: sticky и top: 0. Но результат зависит от разметки. Если все dt записаны прямо в dl, закрепляющей областью служит весь список, и все названия собираются на одном месте друг на друге. Если каждую группу обернуть в div, название закреплено только в пределах своей группы и уходит вместе с ней.
dt {
position: sticky;
top: 0;
background: #fff;
}Пример: закреплённый dt с div и без
Выберите разметку и подвигайте ползунок прокрутки: под результатом написано, сколько названий закреплено.
Якорь на теге dt: id, :target и scroll-margin-top
Название удобно использовать как якорь: id у dt даёт ссылку вида #цвет, а псевдокласс :target подсвечивает такой термин. Отдельно подсвечивают и описание через dt:target + dd. Если у страницы есть закреплённая шапка, она перекрывает название, к которому перешли. Исправляет это scroll-margin-top у dt: он оставляет место сверху.
<dt id="color">Цвет</dt>
<dd>Зелёный</dd>
<a href="#color">К названию Цвет</a>dt:target {
background: #fff1ea;
scroll-margin-top: 36px;
}Пример: якорь на названии под закреплённой шапкой
Выберите вариант отступа и нажмите «К названию»: под результатом положение названия относительно шапки.
Тег dt в JavaScript: фильтр глоссария по названию
Фильтр глоссария скрывает не только dt, но и все идущие за ним dd, иначе от скрытого названия остаётся одно описание. Для этого после каждого названия берут nextElementSibling и скрывают его, пока он остаётся dd. Скрытие делают атрибутом hidden: он работает, пока у dt и dd нет собственного display (например, grid), иначе правило CSS его перебивает.
const q = input.value.toLowerCase();
for (const dt of dl.querySelectorAll('dt')) {
const show = dt.textContent.toLowerCase().includes(q);
let n = dt;
do {
n.hidden = !show;
n = n.nextElementSibling;
} while (n && n.tagName === 'DD');
}Пример: фильтр глоссария по названию
Введите текст или нажмите кнопку: под результатом сколько названий показано.
Атрибуты тега dt: только глобальные
У dt нет собственных атрибутов, работают только глобальные.
| Атрибут | Статус | Что делает | Пример записи |
|---|---|---|---|
id, class, title, lang, tabindex, hidden, data-* | актуален | Глобальные атрибуты: id даёт якорь, lang задаёт язык термина, hidden скрывает название. itemprop допустим только внутри itemscope | <dt id="color"> |
role="term" | лишний | У dt такая роль задана самим тегом, валидатор выдаёт предупреждение | <dt role="term"> |
role="button", role="heading" | недопустим | Роль заменяет смысл названия, валидатор считает это ошибкой. Для раскрытия записывают button внутри dt | <dt role="button"> |
align, nowrap | недопустим | Для dt такие атрибуты не определены, выравнивание и перенос задают в CSS | <dt align="right"> |
Вопросы про тег dt: раскрытие по клику и язык термина
Два вопроса, которых нет в разделах выше: как раскрывать описание по клику на название и как выделить в списке термины на другом языке.
Как раскрывать описание по клику на название?
Внутрь dt записывают button с атрибутом aria-expanded, а dd скрывают через hidden. Название остаётся dt. Роль и tabindex у самого dt не нужны: кнопка внутри уже доступна с клавиатуры.
<dt>
<button type="button" aria-expanded="false">
Можно ли вернуть товар?
</button>
</dt>
<dd hidden>Да, в течение 14 дней.</dd>button.onclick = () => {
const open = button.getAttribute('aria-expanded') !== 'true';
button.setAttribute('aria-expanded', open);
dd.hidden = !open;
};Пример: вопросы и ответы с раскрытием
Нажмите на вопрос или на кнопку над списком: под результатом сколько ответов открыто и какой aria-expanded.
Как выделить в списке термины на другом языке?
Английским терминам задают lang="en": программы чтения могут переключить голос на английский, а в CSS такие названия выбирает dt:lang(en). Без lang селектор не отличает английское название от русского. Метку языка можно добавить псевдоэлементом dt:lang(en)::after.
<dt lang="en">margin</dt>
<dd>Внешний отступ</dd>dt:lang(en) {
font-style: italic;
}
dt:lang(en)::after {
content: ' (англ.)';
}Пример: выделение английских терминов
Выберите вариант: вверху код, под результатом начертание названий или метка.
Частые ошибки с тегом dt
Типичные ошибки с тегом dt и как их исправить.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
dt без dd после него | Ошибка валидатора: у названия нет описания | Записать dd или убрать dt |
dt в div, section или li вне dl | Ошибка валидатора, браузер не считает это списком определений | Записать dt в dl или в div внутри dl |
dt внутри dd | dt закрывает открытый dd, список ломается, валидатор выдаёт ошибку | Для вложенных названий записать внутри dd отдельный dl |
h1–h6, hgroup, header, footer, nav или section внутри dt | Ошибка валидатора: заголовки, секции, header и footer в dt запрещены | Записать название текстом или в strong |
dfn внутри dfn | Ошибка валидатора | Оставить один dfn |
Незакрытый ul внутри dt | dd оказывается внутри li, пара потеряна | Закрыть </li>, </ul> и </dt> |
Абзацы и списки в dt | Название разрастается до нескольких строк | Перенести пояснение в dd |
Считают, что dt по умолчанию жирный | Название выводится обычным шрифтом | Задать font-weight в CSS |
Двоеточие записано в тексте dt | Оно попадает в текст, фильтр и ссылки | Добавить его через dt::after |
sticky у dt без div | Все названия закреплены друг на друге | Обернуть каждую группу в div |
Нумерация dt::before для всех названий | У синонимов разные номера | Считать dt:first-child и dd + dt |
Якорь на dt под закреплённой шапкой | Шапка перекрывает название | Добавить scroll-margin-top |
role="button" или tabindex у dt для раскрытия | role="button" — ошибка валидатора; tabindex без обработчика клавиш не даёт раскрыть описание с клавиатуры | Записать button внутри dt |
role="term" у dt | Предупреждение валидатора: роль лишняя | Убрать role |
