Search code examples
htmlsemantic-markup

What are the benefits of using HTML description lists (dl, dt, dd)?


MDN explains the <dl>,<dt> and <dd> tags can be used to implement a glossary or a list of key-value pairs.

According to maxdesign.com.au (article posted in 2004, its statings may be inaccurate) there are even downsides in using them:

  • The <dt> within definition lists cannot contain block level elements;
  • Search engines will not index definition list content "in the same way" that they do for heading-based content;
  • They cannot contain screen reader accessibility features such as “labels” and “headers” to tie information together.

Moreover, their basic browser-out-of-the-box styling is replicated with minimal effort while omitting the above described downsides.

Are there any tangible benefits (in terms of semantics, SEO, etc.) of using HTML description lists over tables, paragraphs, or perhaps any other element?


Solution

    • The <dt> within definition lists cannot contain block level elements;

    Untrue - <dt>s can contain some block level elements, such as paragraphs.

    • Search engines will not index definition list content "in the same way" that they do for heading-based content;

    So what? Not in the same way does not mean better or worse. Typically, in a well written page headings should score higher than definition terms or descriptions.

    • They cannot contain screen reader accessibility features such as “labels” and “headers” to tie information together.

    Mostly untrue. <dt> can't contain headers. <dd> can. Both can contain labels (although it would be pretty weird to want to have one in a <dt>).

    Are there any tangible benefits (in terms of semantics, SEO, etc.) of using HTML description lists over tables, paragraphs, or perhaps any other element?

    <dt>s automatically get the "term" role for accessibility tools to use. <dd>s automatically get the "definition" role for accessibility tools to use.