START A COURSE

The HTML and CSS Blog:

The Oft-forgotten Definition List Tag

definition list puppy

This cute puppy wants you to take him home…and use him in all your dictionaries.

What you Learn in this HTML Lesson

Learn how to structure a list of terms and descriptions as an HTML definition list. A definition list can be any list of words and definitions, such as a dictionary, glossary, technical terms, a product list….you may be surprised how many uses you have for a definition list.

There’s More Than One Kind of HTML List Tag

Almost every web page uses HTML list tags as the structure for navigation bars and drop-down menus. So I frequently see  <ul>  tags for unordered lists, but hardly anybody uses <dl> , definition lists. The definition list tag  <dl>  seems to be the most useful forgotten tag in the HTML language. It’s like forgetting to mention that you have a twin. There are three kinds of HTML lists to learn: unordered lists (bulleted text or navigation menus), ordered lists (numbered lists) and definition lists (for a series of terms and their definitions)…but somehow that tidy triplet gets left out of our memories of these sibling tags.

definition list puppy

Maybe because you insist on calling them “bro”?

Quick HTML tag summary: List tags
<ul> unordered lists (bulleted text or navigation menus)
<ol> ordered lists (numbered lists)
<dl> definition lists (for a series of terms and their definitions)

Meet My Little Friend, the Definition List

bling is in the dictionary

Image via VH1

Creating a dictionary or glossary of terms? Try making a definition list. The definition list tag  <dl>  is meant to surround content with two parts: a term and its definition. Think about a dictionary and its pattern of words and their definitions. This is exactly the kind of content the definition list tag <dl> is intended for.

Definition List: The  <dl>  tag creates a definition list or glossary of terms and definitions, like a dictionary. The  <dl>  tag surrounds pairs of  <dt>  and  <dd>  tags.

Here’s an example of a few entries from the Urban Dictionary, marked up with HTML definition list tags:

Here’s how the Definition List could display on the page:

a stylish dictionary drawn by a stylish dictionary drawn by Faye OrloveOrlove

Remember to style your dictionary with CSS. [gif by Faye Orlove]

hipster
Hipsters are a subculture of men and women typically in their 20s and 30s that value independent thinking, counter-culture, progressive politics, an appreciation of art and indie-rock, creativity, intelligence, and witty banter. The greatest concentrations of hipsters can be found living in the Williamsburg, Wicker Park, and Mission District neighborhoods of major cosmopolitan centers such as New York, Chicago, and San Francisco respectively.
hipster
Definitions are too mainstream. Hipster’s can’t be defined because then they’d fit in a category, and thus be too mainstream.
broto
A photo with the bro’s. Usually includes putting arms around each other, a finger point, and at least one dude throwin’ up a peace sign.
SMH
Acronym for ‘shake my head’ or ‘shaking my head.’ Usually used when someone finds something so stupid, no words can do it justice. Sometimes it’s modified to ‘smfh’ or ‘smmfh’ by those who prefer profanity in their internet acronyms.

Sequence of the Definition List Tag

Take a good look at the nesting order in the definition list: there is only one set of  <dl>  tags around the entire list, with a closing  </dl>  tag at the end of the entire list. That is, with the  <dl>  tag we declare: Here ye, here ye! Here begins a List of Definitions, and everything contained herein is part of that list…until we reach the  </dl>  closing tag, which puts a lid on the container.

elephant with scroll declares it to be dictionary time.

Chill out, elephant. It’s just an HTML tag.

The primary difference between the definition list and his siblings, is that he must declare not just list items; he must also differentiate between the word being defined and the definition itself. So within our definitions list, each term is wrapped with the definition term tag,  <dt>  and its closing definition term tag, </dt> . Following the term, is the description, wrapped with the definition description tag,  <dd>  and it’s closing definition description tag, </dd> .

Notice that all three definition list tags are container tags, with an opening and closing tag. The term and description tags surround their content, and the definition list tag surrounds the entire glossary list.

Quick summary of Definition List Tags
<dl></dl> definition list: The <dl> tag surrounds the entire list of terms and definitions.
<dt></dt> definition term: The <dt> tag surrounds the word being defined and immediately follows the <dl>.
<dd></dd> term description: The <dd> tag surrounds the definition.

 Another Example of a Definition List

 

 

What Else Can You Use the Definition List Tag For?

The Definition List tag was designed for dictionary listings or glossaries. Use it when you see a list of terms and definitions in your content. Maybe you have a product list with descriptions, or a Q & A page. Your product names or questions could be the Definition Term, and the product descriptions or answers would be marked up with Definition Description tags.

So try out this under-utilized HTML tag!

 

The Easiest Way to Learn HTML and CSS
Hi! I'm Diane. I'm an experienced web design teacher in San Francisco. I produce music videos to help new coders learn HTML. I'm dedicated to helping you learn to code, with tons of songs, videos, tutorials and activities. All our tutorials are free and we're adding new lessons every day. Subscribe to get the latest post in your inbox.

HTML Lessons

©2013 Diane Presler. All rights reserved.