A Question Of HTML Part 3 - Definitions

How to use definition tags in the correct way?

22nd July 2004 · Last updated: 5th October 2016
 

Comments

There's a lot of interesting discussion online today regarding the correct use of header tags. (Example posts - Meyer's Pick A Heading and van Kesteren's About The Hierarchy Thing.) One problem with headers is that they are often used in side menus as well as the main column on a page. This got me thinking about replacing the side menu headers with definition tags - <dl>, <dt> and <dd>. I have also been working on the new categories pages for this site. Each uses definitions to display the title of the post and a relevant description underneath, where included. But I want to clarify the exact usage of the markup. Firstly, let's define definition tags:

<dl>
Defines the start of a definition list.
<dt>
Used for the term you wish to define.
<dd>
The description of the term.

Definition tags are useful for a wide range of situations, such as question and answer sessions, photographs and captions, etc. Note how you can use one term and list several definitions for it. Here's a real-world example:

Great Prince Songs
Peach
Purple Rain
Pink Cashmere

Now when it comes to my use of the tags on the category pages, I've put them inside existing list tags. Don't ask me why. Now I'm not sure exactly how the pages should be marked up. Below are a set of examples. Can anyone say which is the correct one to use and why?

Example 1:

<ul>
 <li>
  <dl>
   <dt>This is a post title.</dt>
   <dd>What the post is about.</dd>
  </dl>
 </li>
 <li>
  <dl>
   <dt>This is another post title.</dt>
   <dd>What the post is about.</dd>
  </dl>
 </li>
</ul>

Example 2:

<ul>
 <li>
  <dl>
   <dt>This is a post title.</dt>
   <dd>What the post is about.</dd>
   <dt>This is another post title.</dt>
   <dd>What the post is about.</dd>
  </dl>
 </li>
</ul>

Example 3:

<dl>
 <dt>Category: Name Here</dt>
 <dd>This is a post title.
 <br />What the post is about.</dd>
 <dd>This is another post title.
 <br />What the post is about.</dd>
</dl>

Comments (1)

Comments are locked on this topic. Thanks to everyone who posted a comment.

  1. Anne:
    Your third example looks different from the first two, which don't include a category description. I would say:

    dt - title of the post
    dd - short description

    You can number those with CSS. I understand it will limit the styling a bit though, but this has always been a tough issue.

    Posted on 23 July 2004 at 3:36 pm