Welcome to a tutorial and example on how to use the HTML description list. So you have stumbled on the description list and wondering how it is used?
- An HTML description list is used to describe a list of terms, and there are 3 elements involved:
<dl>The description list itself. Encloses a list of
<dt>Term being described.
<dd>Definition and/or description of the term.
- A quick example:
<dd>The clever way of saying "human".</dd>
That covers the basics, but let us walk through more examples in this guide – Read on!
ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.
REAL QUICK SLIDES
TABLE OF CONTENTS
|Download & Notes||The Basics||The Difference|
|Useful Bits & Links||The End|
DOWNLOAD & NOTES
Firstly, here is the download link to the example code as promised.
EXAMPLE CODE DOWNLOAD
Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.
DESCRIPTION LIST BASICS & EXAMPLES
All right, let us now move into the basic usage and examples of the HTML description list.
1) SINGLE TERM & SINGLE DESCRIPTION
<!-- (A) DESCRIPTION LIST --> <dl> <!-- (B) TERM --> <dt> Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu </dt> <!-- (C) DESCRIPTION --> <dd> Is not gibberish but the name of a hill on New Zealand's North Island. </dd> </dl>
As in the introduction, a description list comes in a “set of 3”.
<dl>is the description list itself.
- Within the
<dl>, we sandwich a list of
<dt>terms followed by their
That’s all. Pretty self-explanatory.
2) MULTIPLE DESCRIPTION DETAILS
<dl> <!-- (A) TERM --> <dt> Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu </dt> <!-- (B) FIRST DESCRIPTION --> <dd> Is not gibberish but the name of a hill on New Zealand's North Island. </dd> <!-- (C) SECOND DESCRIPTION --> <dd> The name roughly translates to "The summit where Tamatea, the man with the big knees, the slider, climber of mountains, the land-swallower who travelled about, played his flute to his loved one" - Wikipedia. </dd> </dl>
Yes, if a single description is not enough, we can always add more.
3) MULTIPLE TERMS & DESCRIPTIONS
<dl> <!-- (A) FIRST TERM & DESCRIPTION --> <dt> Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu </dt> <dd> Is not gibberish but the name of a hill on New Zealand's North Island. </dd> <!-- (B) SECOND TERM & DESCRIPTION --> <dt> Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch </dt> <dd> Is not a tongue twister, but the name of a place in Wales. </dd> <!-- (C) YET ANOTHER TERM & DESCRIPTION --> <dt> Uvuvwevwevwe Onyetenyevwe Ugwemubwem Ossas </dt> <dd> This is the world-famous gibberish name of a person for a joke video. </dd> </dl>
Of course, the description list is not just limited to a single term – It is a list of terms; We can append multiple
DESCRIPTION LIST VS “NORMAL” LIST
So far so good? The basic usage of a description list should be simple enough. But just what is the difference between a description list and a “normal” ordered/unordered list? When should we use each one?
THE DIFFERENCE IN A NUTSHELL
The description list may seem to be fairly similar to the ordered and unordered list, but let us lay it out in summary:
- Description List – A list of terms and their descriptions.
- Ordered List – A list of items in numeric or alphabetical order.
- Unordered List – A “bullet point” list of items.
So yes, the main difference is that:
- Ordered/unordered lists are pretty much “generic” – Could be a shopping list, to-do items, point-form explanation, etc…
- The description list, on the other hand, is more semantic, “dedicated” to describe a list of terms.
THE WRONG WAY TO USE DESCRIPTION LISTS
A negative example will better illustrate the wrong way to use a description list:
<h1>MY TO-DO LIST</h1> <dl> <dt>1) Feed the Doge</dt> <dd>3 meals a day.</dd> <dd>Doge gets grumpy if not properly fed.</dd> <dt>2) Clean the floor</dt> <dd>Sweep and mop.</dd> <dd>Note - Use cleaner X or wife gets grumpy.</dd> <dt>3) Repair broken tap</dt> <dd>Leaks.</dd> <dd>To buy a new tap for replacement.</dd> </dl>
Yes, the syntax of this snippet is correct, and code editors will not complain of any errors. But why is this bad? Simply because it is NOT a list of terms, nor do the descriptions serve the right purpose.
In short – Do not use a description list just for the nice indentations and structure. If you need indentations for a random list of items, then create a tiered ordered/unordered list instead.
USEFUL BITS & LINKS
That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.
LINKS & REFERENCES
- <dl>: The Description List element – MDN
- HTML Ordered, Unordered, and Definition Lists – Tutorial Republic
- Description Lists – HTMLDog
INFOGRAPHIC CHEAT SHEET
Thank you for reading, and we have come to the end of this guide. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!