Definition Lists - The Ugly Stepchild of Lists
Monday, August 11 by DanielToday I’d like to talk about an often overlooked element in html, the Definition List.
First off, let me welcome you to MagnusFx! A new blog devoted to giving web designers helpful tips about the various tools and methods they use to make websites.
Today I’d like to talk about an often overlooked element in html, the <dl> (Definition List) tag. More often than not people don’t even know this tag exists, but it is extremely useful in the right places, I’ve found that in most places where people could use this tag, they use <ul> (Unordered List) instead, which is a lot harder to style and unsemantic.
Essentially Definition Lists are just what the name describes- lists with terms (<dt> - Definition Term) and definitions (<dd> - Definition Description). Suppose that you are doing a website for a school. They ask you to make a faculty page with names and short paragraphs describing the position and credentials of their employees. The less read designer would simply use <ul> or tables (yuck!)
The Syntax
<dl>
<dt>Ann Smith</dt>
<dd>Ann Smith was principal of Southeastern Boy's Academy from 2000 to 2005, when she moved to Michigan where she currently resides as principal of Lionheart Academy</dd>
<dt>John Doe</dt>
<dd>John Doe etc etc you get the point</dd>
</dl>
Definition lists aren’t all about being semantic- they really can save you time when you’re doing pages. You can also use them for things like online stores (Item/price) and many other things! Watch out, though. Internet Explorer 6 sometimes has some issues with this tag.
W00t!!!
There is much more to DL than this. The fact that you can have multiple DDs for each DT or multiple DTs for a DD, makes it a much more fun element to use then ul/ol.
Note that the specs say DL can be used both for pure definitions and for items that simply belong together. It’s not a strict title/definition relationship.
Quite useful indeed ^_^:
Hmm, I had not heard of or used very much at all before so was looking forward to the article. However, I’m not understanding from this what they are used for, or how they are used.
Would appreciate a more in-depth look at them perhaps.
@ Jt Hollister
I would hope that the example in the article would and the comment from elfo would illustrate perfectly what they are used for, if you would like to read more about them you can read about them in the w3 specification here.
Perhaps an example of how to style it, and showing what the output of this would be, would be helpful in the future. Right now I understand the rough idea of it but I would still have no idea how to implement it (though I could figure that out by messing around), or more importantly when is the time to implement it.
w3 schools has a great example of what you are looking for. Thanks for the feedback, my new posts will feature more images and explain things in greater detail. I’m still new to this blogging thing!
Люблю когда по сути, мне понравилось.
I simply coudn’t get by without these anymore. For those looking for styling examples, a good place to start looking is here.