Прокрутить к контенту ↓


Семантическая HTML-разметка групп DT/DD

Порой требуется применить стили к каждой отдельно взятой группе элементов DT/DD как единому целому.

Но заключение элементов DT и DD в обобщённый контейнер типа DIV запрещено спецификацией HTML: их родительским элементом синтаксически корректно («валидно») может быть только DL.

В таких случаях следует заключить каждую такую группу в собственный элемент DL, а для сохранения семантической принадлежности соседних групп к единой последовательности каждый такой DL можно поместить в элемент LI обычного неупорядоченного списка UL:

<ul>
    <li><dl>
        <dt>Foo</dt>
        <dd>Bar</dd>
    </dl></li>

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

Обновлено: начиная с  спецификация HTML разрешает заключать DT/DD в DIV, но на данный момент разрешается использование не более одного вложенного DIV, поэтому реальная польза новшества на практике очень ограничена, и описанный здесь подход по-прежнему актуален.