Published in Web Development on Monday, May 10th, 2004
A look at some interesting markup on the new Blogger redesign. What are your thoughts?
Well, if you haven't seen it yet (somehow I doubt you'll have heard it here first), Blogger has been redesigned by StopDesign and Adaptive Path. At first glance the site looks great, easy to use and very well organized.
In it, they use a <dl> (definition list) in a rather clever way, and I would like to know - What is your opinion on using a definition list in this manner?
I had a small peek under the hood and saw the following bit of interesting markup, which provides the code for the 'Recent News' section at the bottom of the homepage:
<div id="newsblock"> <h3>Recent News</h3>
<dl class="news">
<dt>
<strong>Welcome to the new Blogger.</strong>
</dt>
<dd>
Phew, we've been busy around here!
Blogger has a new look, a new interface, and tons
of new features.
<a href="/knowledge/2004/05/
great-blogger-relaunch.pyra">
Find out what's new.
</a>
<br/>
<em class="posted">
Posted <strong>5 May 2004</strong> (by Ev.)
</em>
</dd>
</dl> </div>
In the past I think I've been prone to what I thought was abusing the definition list - I even mailed a SimpleQuiz suggestion to Dan Cederholm to try and get an idea of how others viewed <dl's>.
Given the somewhat ambiguous write-up in the specifications (Another application of DL, for example, is for marking up dialogues...
), I saw fit to come up with 'examples' of my own, examples which I eventually concluded were too far fetched.
But now I wonder: if it's good enough for StopDesign and Adaptive Path and Google, it surely should be good enough for me! What do you think of this use for a definition list?
Note: I wonder why they use the break tag there before the <em>, rather than simply em.posted ? Maybe because it looks better this way without styles?
Sitepoint's web devlopment books have helped me out on many occasions both for finding a quick solution to a problem but also to level out my knowlegde in weaker areas (JavaScript, I'm looking at you!). I am recommending the following titles from my bookshelf:
I started freelancing by diving in head first and getting on with it. Many years and a lot of experience later I was still able to take away some gems from this book, and there are plenty I wish I had thought of beforehand. If you are new to freelancing and have a lot of questions (or maybe don't know what questions to ask!) do yourself a favor and at least check out the sample chapters.
The author line-up for this book says it all. 7 excellent developers show you how to get your JavaScript coding up to speed with 7 chapters of great theory, code and examples. Metaprogramming with JavaScript (chapter 5 from Dan Webb) really helped me iron out some things I was missing about JavaScript. That said each chapter really helped me to develop my JavaScript skills beyond simple Ajax calls and html insertion with libs like JQuery.
Like the other books listed here, this provides a great reference for the PHP developer looking to have the right answers from the right people at their fingertips. I tend to pull this off the shelf when I need to delve into new territory and usually find a workable solution to keep development moving. This only needs to happen once and you recoup the price of the book in time saved from having to develop the solution or find the right pattern for getting the job done..
Comments and Feedback
I'm all in favour of <dl>s in limited doses; I think it's far too convenient and flexible a markup structure to be restricted to definitions, which I have needed to mark up maybe 3 times in my life.
However, I think the use to which they're put in that blogger excerpt is just a little bit silly. They're no more meaningful (and a lot less appropriate, I'd argue) than a simple div-and-heading-and-paragraphs combination. What, really, is the point of a list that only has one item? (and will only ever have one item, judging from the layout allotted)
I often find them useful for label->value combinations, such as address lists, question-answer lists and so forth. But when you're dealing with standalone blocks of content like this I think it's inappropriate. Just as inappropriate as, say, marking up your entire blog in a ul, but then let's not go there ;)
- Oh, but we have!
Thanks for the feedback, Alun (and congrats on your new design).
is a good way to explain it. They are incredibly useful as well from a style-hook standpoint (the extra <dl> wrapper is nice), and that's were they can get... tempting.
About that note: I think that's for unstyled view.
Hmmmm...I don't see why they haven't done it just like its accompanying item (the "Post in Seconds" thing).
So a
h3, h4and apelement would have done the job.I have seen this "innovative" markup elsewhere, on Germany's accessibility page #1:
Einfach für Alle, and to me, it doesn't make sense there either!
I think that they misused the dl element. I really wrestled over this issue in the last few days. I was wondering what makes it so different from the other elements. I think that the answer is what is mentioned above. You use it to list a label and value or a term and definition.
Last Sunday I spent a significant amount of time marking up the Bible with HTML 4.01 Strict. The site where I copied the text from, used dl. dt would mark up the verse numbers, and dd would markup the verses. The problem here is the subtle message that the verse numbers are the significant piece of information. The Bible wasn't originally written with verse numbers, so this doesn't make sense to markup the numbers as definition terms.
To put it a different way, we need to ask ourselves, what would happen if we removed the terms and just left the definitions. Would the information make sense? Would it be just as useful or useful in a similar way? For the Bible, the answer is that it would still make sense. Without verse numbers, the only consequence is that it would take longer to find the relevant information. It wouldn't be as useful because a Bible without verse numbers is more difficult to use, but it is useful in a similar way. With a dictionary, you have the same questions with different answers. A dictionary with only terms and no definitions would not be useful nor would it be useful in a similar way. So, dl and friends are the correct choice for a dictionary.
We could also look at it from a different point of view. What if the terms were hidden, but not the definitions? A dictionary would be of no use, because we don't have all of the words memorized to be able to figure out which word matches which definition. This should give hint that a dictionary without both terms and definitions is useless, thus dl and friends are the correct choice. As for the Bible, it is just as meaningless to have the verse numbers without the verses, but this differs from the dictionary, because it is still useful without the verse numbers. Marking up verse numbers with dd implies that the verse numbers are the most significant information.
Thus, I strongly disagree with W3C on their use of the dl and friends elements. I especially don't like the recipe usage. That could be accomplished with ul.
A script for actors would be useless with only the term. Nobody needs a script which lists only the people who speak and the order in which they speak. This also makes things messy. What happens when you need to add in extra comments? Do they go in the definition or the term?
For things like a web site with a list of links and comments describing the links, it is more useful to use dl. The important portions would be marked up with dt. If the dd were hidden, then it would still be useful. People care less about the comments than they do about the links.
W3C also mentioned something about sales features and benefits. I agree that that is a correct usage of dl, because the dd text explains the dt text. If you hide the dd text, then there is a still a chance of understanding the dt text.
If in doubt, the correct choices are to use div, h1, and p. If you need to make a list or something out of them, then you could always set display to inline or something. This is important for things like the Bible because you get to keep the markup the same [in other words, leaving the text as non-lists], but you still have a choice of displaying the information as lists for readability.
Sincerely, and with thanks, Eugene T.S. Wong
Hey Eugene, great comment. I\'m still digesting it, and while doing so I suppose I should go and do something about the background image that I thought was big enough!