On the <DL> | Localtype

Welcome to the moribund Localtype

RSS follow me on twitter

On the <DL>

Originally written on: February 16, 2005 at 7:53 pm

Last Updated: June 1, 2014 at 5:00 am

[wdgpo_plusone]

Definition Lists are a little-known, but increasingly popular type of XHTML list. From research I’ve done, it was available for use starting with HTML version 3, but almost totally unused until after the advent of XHTML and modern CSS. The basic formation of the Definition List starts and ends with a standard container tag, in this case <dl>. Inside this container you have two sub elements, <dt> for “definition term”, or the thing you are going to define, and <dd> for “definition description” showing the meaning of the previous term. You can have single or multiple terms apply to one or more definitions, and you can have several term/definition pairs within a single list.

Originally, I thought that Definition Lists were only to be used in typical dictionary situations. I paid little attention to them, as I’ve never needed to write my own personal dictionary. Recently, many people have been using the <dl> in interesting and creative ways, such as marking up conversation, where the <dt> surrounds the speaker’s name and <dd> is used for the dialogue. More often, it is being used for sidebar lists on both progressive corporate sites, and the weblog community. Lists marked up using a <dl> are more “semantically correct” than generic unordered lists in that situation because there is a relationship between the header and the items within. Soon, I plan on changing the sidebar on this site to use Definition Lists, not just for the semantics, but also because of the vast CSS possibilities.

While the Definition List isn’t perfect for every situation (such as when you need to have a block level element in your <dt>, for example, a headline), They are amazingly flexible when it comes to styling the mark-up. As there are three elements to style, the possibilities are a bit more interesting than other types of lists, where you are limited to two styled elements. For example, you can make bold your <dt> and italicise your <dd> like this:

Earlier:

Later:

 

Comments are closed.