Your daily frequent11y newsletter, brought to you by @ChrisBAshton:

On the <dl>

Ben Myers walks us through the <dl> (‘description list’ – previously ‘definition list’ prior to HTML5) element. Name-value pairs are a common UI pattern you’ll have seen all over the place, for example:

Publisher: New Riders Pub; 3rd edition (October 19, 2009)
Language: English
Paperback: 411 pages

You could mark this up as a series of <div>s, but a screen reader user would lose out on benefits such as knowing how many name-value groups are in the list, and skipping over the list. It is better to use semantic markup, like so:

<dl>
  <dt>Publisher</dt>
  <dd>New Riders Pub; 3rd edition (October 19, 2009)</dd>
  <dt>Language</dt>
  <dd>English</dd>
  <dt>Paperback</dt>
  <dd>411 pages</dd>
</dl>

You can use multiple <dd> (description detail) elements per <dt> (description term) if appropriate, e.g. associating multiple authors with a book. Just list the multiple <dd>s one after the other.

You are also allowed to wrap your <dt>Foo</dt><dd>Bar</dd> element groups with a <div></div>, if needed, for style purposes. This is the only element that is allowed to wrap these.

If you have multiple description lists in your page, you can differentiate them by adding an aria-label attribute to each <dl> element.

Prefer longer newsletters? You can subscribe to week11y, fortnight11y or even month11y updates! Every newsletter gets the same content; it is your choice to have short, regular emails or longer, less frequent ones. Curated with ♥ by developer @ChrisBAshton.