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

Я хотел бы, чтобы 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>

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

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

41
html semantics specifications validation w3c

2 ответов

нет, Ян Хиксон (HTML spec editor) является уверен что это проблема CSS, а не HTML:

в этом нет необходимости. Это ограничение CSS.

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

в то же время, fantasai (CSS spec editor) является убеждена в напротив:

я не думаю, что это проблема 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) позволяет the DIV element (необязательно с так называемыми элементами поддержки скриптов SCRIPT, TEMPLATE), чтобы быть прямыми потомками DL элементы. HTML валидатор тут не объясните это изменение еще, но экспериментальное HTML5.org валидатор делает.

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

58

здесь РЕПО о обертывании dd-dt. Согласно спецификации html whatwg это OK, чтобы обернуть каждый элемент 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>
3