24

In what scenarios we should go for <dl> not <ul>?

Does it matter for screen reader user <ul> or <dl>? does screen reader software notify user about content is in <ul> or <dl>?

Jitendra Vyas
  • 148,487
  • 229
  • 573
  • 852

3 Answers3

32

A <dl> is a definition list. It should be used in such a case as, perhaps, a dictionary:

Use-case:

<dl>
<dt>Thesaurus</dt>
<dd>A book for finding synonyms of other words, often alphabetical. Similar to a dictionary.</dd>
</dl>

Result of the above:

Thesaurus
A book for finding synonyms of other words, often alphabetical. Similar to a dictionary.

The idea being that the term-to-be-defined is held in the <dt> element, and the definition of that term is given in the <dd>.

A <ul> is an unordered list. Now, a <dl> does not imply any order to its contents, but it does imply a semantic relation between its children. A <ul>, however, could contain anything that is not ordered.

David Thomas
  • 249,100
  • 51
  • 377
  • 410
  • 1
    I've noticed Google are using it for their main menu on the [Material Design](https://www.google.com/design/spec/material-design/introduction.html) site. – ᴍᴀᴛᴛ ʙᴀᴋᴇʀ Oct 26 '15 at 15:50
  • Note that you can also have multiple `
    ` per `
    ` and `multiple `
    ` per `
    `. In your example, there can be more words meaning the same, and the same word(s) can have more meanings.
     – Svish Aug 03 '17 at 15:43
2

When you're working with a set of definitions and not merely an list of unordered items.

Sampson
  • 265,109
  • 74
  • 539
  • 565
  • what in person name then short description about person? and for question answers? – Jitendra Vyas Mar 10 '10 at 03:09
  • 2
    If it's a definition, use `dl`. It's merely a list, `ul`. The names are pretty self-explanatory. Granted, there will be some cases where it might be difficult to say which is best, but it's nothing to worry about. – Sampson Mar 10 '10 at 03:11
1

For ambiguous cases like your examples in the comment on Jonathan's answer (person name then description, question then answer), why don't you install a trial version of a screen reader or two and find out which construct is read most appropriately?

Here are two (from here):

Mike Powell
  • 5,914
  • 4
  • 28
  • 28