Семантическая 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
, поэтому польза новшества на практике очень ограничена, и описанный здесь подход по-прежнему актуален.