Feed Sign in with OpenID OpenID

Simon Willison’s Weblog

HTML Definition Lists

Ben Meadowcroft has a new tutorial up showing how definition lists can be used in semantic markup for lists of definitions, such as glossaries.

Definition Lists are the third type of list present in HTML, after the far more common ordered and unordered list types. They’re an interesting if slightly odd concept: although their obvious use is to provide a list of definitions, the HTML specification seems to indicate that they can also be used to indicate a logical connection between two items of text; one a label for the other. This slight confusion is caused by the examples provided in the specification, which use a definition list both for separating the different sections of a recipe and for extending a set of key marketing features for an imaginary product.

Incidentally, although the default style for a definition list is to have the definitions indented to the right of the terms, this can be easily modified by setting the margin and padding for the elements explicitly using CSS.

Posted 17th June 2003 at 10:40 pm

This is HTML Definition Lists by Simon Willison, posted on 17th June 2003.

View blog reactions

Next: Easier form validation with PHP

Previous: Gecko beats IE!

9 comments

  1. although they're obvious use is to provide a list of definitions? Surely you mean their, Simon?

    Lach - 18th June 2003 03:25 - #

  2. Erk, I never usually make that mistake. Fixed.

    Simon Willison - 18th June 2003 03:28 - #

  3. You can also use these kind a lists for a conversation between people.

    Example:

    Lach
    "although they're obvious use is to provide a list of definitions?" Surely you mean their, Simon?
    Simon Willison
    Erk, I never usually make that mistake. Fixed.

    Anne van Kesteren - 18th June 2003 06:28 - #

  4. I was just working with a definition list today to create a glossary. Small world.

    Another trick with definition lists: mark a term in your text with <dfn> or something similar the first time you use it, and add a footnote linking to the term's definition in a definition list. I ended up writing a tiny bit of javascript to do it automatically (much like your blockquote citations), and now I like the effect so much I'm looking for other places to use it.

    I'm wondering, though, if <dfn> is the right way to mark it up; the spec says to use it for "the defining instance of the enclosed term," which isn't particularly helpful.

    James - 18th June 2003 07:53 - #

  5. Anne,

    Whilst the W3C use a conversation as an example in the HTML specification, it's a bad idea to do this for your own pages. This is because it isn't a list of definitions. It makes no sense to use a <dl> element for this.

    There are a number of mistakes in the HTML specification like this, such as the abbr/acronym confusion, and the definition of the alt attribute as a "description" for the image, instead of an alternative.

    Jim - 18th June 2003 09:10 - #

  6. About the uses of DL: I was wondering if using DT for a blog title, and DD for blog text is applicable. what are your thoughts?

    An example

    HTML Definition Lists
    Ben Meadowcroft has a new tutorial up showing how definition lists can be used in semantic markup for lists of definitions, such as glossaries.

    deelan - 18th June 2003 14:38 - #

  7. I use a DL on my home page to list recent music purchases. I apply DT for the artist and DD for the title. Not really a definition list as such, but I'd rather take on board the spirit indicated by W3C, rather than the letter of the law.

    IMO a DL could be used for blog entries, however I felt that using H2 for my post titles was 'stronger' markup (it also helps screen reading software to scan through headings).

    Rich - 18th June 2003 15:28 - #

  8. Jim,

    I did know about the image tag (I just love Mozilla, which doesn't display it as a tooltip), but this one i didn't knew. Sounds interesting though, but why didn't they fix this, in for example xhtml1.0.

    Anne van Kesteren - 18th June 2003 15:46 - #

  9. Couldn't the Blogs I Read sidebar on this page be a definition list? It's a list of weblogs, and the date/time updated information describes the weblogs.

    kirkaracha - 19th June 2003 17:48 - #

Comments are closed.

Previously hosted at http://simon.incutio.com/archive/2003/06/17/definitionLists

A django site