Есть ли правильный способ обернуть dt и dd с HTML-элементом?

Question

Я хотел бы, чтобы HTML мог сделать что-то семантически эквивалентное этому;

<dl class="main-list">
    <definitionitem>
        <dt>Some Thing</dt>
            <dd>You know it!</dd>
        <dt>Another Thing</dt>
            <dd>Word.</dd>
    </definitionitem>
    <definitionitem>
        <dt>Stuff</dt>
            <dd>Alright!</dd>
    </definitionitem>
</dl>

Однако, так как ближе всего я приехал, я не на 100% удовлетворен семантикой;

<div class="redundant-wrapper">
    <dl class="main-list">
        <dt>Some Thing</dt>
            <dd>You know it!</dd>
        <dt>Another Thing</dt>
            <dd>Word.</dd>
    </dl>
    <dl class="another-main-list">
        <dt>Stuff!</dt>
            <dd>Alright!</dd>
    </dl>
</div>

Мне было интересно, есть ли у кого-нибудь еще идеи о том, как вы могли бы сделать это?

Кроме того, причина, по которой элементы будут сгруппированы, заключается в том, что они визуально сгруппированы в размечаемом содержимом. Представьте себе страницу словаря с одним списком определений, где каждое определение находится во вставке слева. Я сталкиваюсь с этой ситуацией все время.

Answer 1

Нет, Ян Хиксон (редактор спецификаций HTML) убежден, что это проблема CSS, а не проблема HTML:

Это не должно быть необходимым. Это ограничение CSS.

Правильным решением для CSS является предоставление некоторого псевдоэлемента или другого механизма, который вводит анонимный контейнер в дерево рендеринга, которое оборачивает элементы, которые вы хотите обернуть.

В то же время, fantasai (редактор спецификаций CSS) убежден в обратном:

Я не думаю, что это проблема CSS. Я думаю, что это проблема HTML. Псевдоэлементы - это нетривиальная вещь для спецификации, нетривиальная вещь для реализации и сравнительно запутанная вещь для использования.

Тем не менее Ян, по-видимому, игнорирует это и продолжает быть оторванным от реальности.

Есть такие же проблемы с LEGEND (это должно быть первым прямым ребенком FIELDSET согласно спецификации HTML), FIGCAPTION (это должно быть первым / последним прямым потомком FIGURE), а также LI (прямое дитя UL / OL).

Что касается DT / DD в частности я лично пользуюсь UL список с DL внутри каждого из LI:

<ul>
    <li><dl>
        <dt>Lorem</dt>
        <dd>Lorem definition</dd>
    </dl></li>

    <li><dl>
        <dt>Ipsum</dt>
        <dd>Ipsum definition</dd>
    </dl></li>
</ul>

Итак, мы имеем DL установить связь между DT а также DD, а также UL список, чтобы все они принадлежали одному списку.

Обновление (2016-11-14): стандарт HTML (сейчас версия WHATWG) (с 2016-10-31) позволяет DIV элемент (необязательно смешанный с так называемыми элементами поддержки сценариев SCRIPT, TEMPLATE) быть прямыми детьми DL элементы. Валидатор HTML W3C пока не учитывает это изменение, но экспериментальный валидатор HTML5.org делает это.

Обновление (2017-01-18): Оказывается, спецификация не допускает более одного вложенного DIV обертка для DT / DD Таким образом, полезность этой функции на практике очень ограничена, и UL → LI → DL Подход, описанный здесь, все еще актуален.

Answer 2

Есть репо об упаковке дд-дт. В соответствии со спецификацией html, все в порядке, чтобы обернуть каждый dd & dt тегом div внутри DL.

<dl>
   <div>
     <dt>Bolster</dt>
     <dd>to support, strengthen, or fortify</dd>
   </div>
   <div>
     <dt>Capitalize</dt>
     <dd>to use to your advantage</dd>
   </div>
</dl>

Answer 3

Вот и мы в 2018 году! Сетка CSS хорошо поддерживается, и это предлагает еще одно возможное решение / обходной путь для проблемы, если основная цель состоит в том, чтобы контролировать позиционирование dt/dd...

HTML

<dl>
    <dt>Favorite food</dt>
    <dd>Pizza</dd>

    <dt>Favorite drink</dt>
    <dd>Beer</dd>
</dl>

CSS

dl {
    display: grid;
    grid-template-columns: min-content 1fr;
}

(Вы можете настроить значения grid-template-columns чтобы соответствовать вашим конкретным требованиям дизайна.)

Это не "решает" ограничения спецификации, но я подумал, что это полезно, так как вы специально упомянули проблемы с семантической разметкой. Как я упоминал выше, существуют ограничения на то, что может делать сетка, но если цель состоит в том, чтобы контролировать макет dt/dd Я думаю, что это может быть самый семантический способ сделать это, все еще действительный HTML.