Question

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>?

Was it helpful?

Solution

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.

OTHER TIPS

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

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):

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top