How to Build the Definition List in HTML5 and CSS3 Web Based Pages

By Andy Harris

The definition list in HTML5 is very useful, even if it’s used infrequently. The definition list was originally designed to format dictionary-style definitions, but it’s really useful any time you have name and value pairs.

Definition lists don’t use bullets or numbers. Instead, they have two elements. Definition terms are usually words or short phrases. The browser names are defined as definition terms. Definition descriptions are the extended text blocks that contain the actual definition.

The standard layout of definition lists indents each definition description. Of course, you can change the layout to what you want after you understand CSS.

You can use definition lists any time you want a list marked by key terms, rather than bullets or numbers. The definition list can also be useful in other situations, such as forms, figures with captions, and so on.

image0.jpg

Here’s the code for basicDL.html:

<!DOCTYPE HTML>
<html lang="en-US">
 <head>
 <meta charset="UTF-8">
 <title>BasicDL.html</title>
 </head>
 <body>
 <h1>Basic Definition List</h1>
 <h2>Common web Browsers</h2>
 <dl>
  <dt>Mosaic</dt>
  <dd>
  The mother of all modern browsers. The first widely used
  visual browser.
  </dd>
  <dt>Netscape</dt>
  <dd>
  The commercial successor to Mosaic. Widely popular, but
  eventually eclipsed by Internet Explorer
  </dd>
  <dt>IE</dt>
  <dd>
  Microsoft's entry into the browser market, and a dominant
  player.
  </dd>
  <dt>Firefox</dt>
  <dd>
  An open-source browser that has shaken up the world.
  </dd>
 </dl>
 </body>
</html>

As you can see, the definition list uses three tag pairs:

  • <dl></dl> defines the entire list.

  • <dt></dt> defines each definition term.

  • <dd></dd> defines the definition data.

Definition lists aren’t used often, but they can be extremely useful. Any time you have a list that will be a combination of terms and values, a definition list is a good choice.