Pew Pew Laser Blog

Code. Glass art. Games. Baking. Cats. From Seattle, Washington and various sundry satellite locations.

Pew Pew Laser Blog Archives — by Blog ID

The DL Element.

11.14.2017

At a conference earlier this year, I was asked what my favorite HTML element was. In fact, I do have one: the Definition List, along with its children Definition Term and Definition Description. The definition list is great because it provides an inherent semantic relationship between two elements - the term and the one or more descriptions. I feel like these elements are under-used; especially considering that they've been around since HTML 4.01.

I was going to invent a clever example to demonstrate the definition list, but I don't think I can do any better than the one provided by the Mozilla Developer Network:

Firefox
A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.
The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, is a mostly herbivorous mammal, slightly larger than a domestic cat (60 cm long).

Here is the source code for that:

<dl>
  <dt>Firefox</dt>
  <dd>A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.</dd>
  <dd>The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, is a mostly herbivorous mammal, slightly larger than a domestic cat (60 cm long). </dd>
</dl>

This shows one term (Firefox) along with two definitions of that term. Because it's a list, you can add as many groups of terms and definitions as needed for your content.

Permalink

Tags:

Authorized users may log-in to leave a comment.

Last Blog: Virtual Reality.

Next Blog: Keyboard Shortcuts for Web Dev Tools Inspector and Console.