How to Semantically Expand the Markup of Lists

Lists are an important element in the structure of a website. Definition lists, ordered lists and unordered lists each have an official W3C use guideline but semantic interpretation of implementation methods are varied.

Every so often, a sensible method arises.

Happy Cog got markup and style assistance from Dan Mall who wrote The Agency Formerly (and Currently) Known as Happy Cog which introduced the redesign. It’s a pleasant article but it’s the comments that should be read. Especially, those by Matthew Pennell.

The expanded use of an ordered/unordered list embedded with header and paragraph(s) for article titles and summaries of the articles makes sense. [Note: The Happy Cog site was marked-up with it.]

The (reduced) HTML,


<ol>
<li>
<h3>[Title]</h3>
<p>[Date]</p>
<p>[Summary paragraph]</p>
</li>
<li>
<h3>[Title]</h3>
<p>[Date]</p>
<p>[Summary paragraph]</p>
</li>
[...]
</ol>

Simple semantics.

I’ll use it. I mean, it’s got to be an acceptable, semantic method if Matthew Pennell suggested it and Dan Mall implemented it and Jeffrey Zeldman approved it, doesn’t it.

Sean Fraser posted this on February 15, 2007 02:01 PM.

Comments

zcorpan wrote this at February 15, 2007 05:10 PM: Well, I'd use a <dl> with the title as <dt> and the paragraphs in the <dd>.

Sean Fraser wrote this at February 15, 2007 06:01 PM: zcorpan: Yes, that works, too. But would not that be an unsemantic use of a definition list? kinda like using a <dl> for dialogue.

zcorpan wrote this at February 17, 2007 03:53 PM: As of HTML5, <dl> is not by itself a definition list; it's just a generic name/value associasion list. (You can still use it as a definition list in combination with <dfn>.)

Sean Fraser wrote this at February 17, 2007 04:46 PM: zcorpan: So, if <dl> is just a generic name/value, it should follow that the order of <dd> and <dt> is no longer relevant.

Anne van Kesteren wrote this at February 22, 2007 11:45 AM: How can you determine what value belongs to what key when there's no order? Note that a value can belong to multiple keys and that a key can have multiple values.

Sean Fraser wrote this at February 22, 2007 01:26 PM

Anne: HTML5 specifies the <dl> child element(s) order. So,

is failed by

The (X)HTML5 Conformance Checker.

However.

The W3C HTML Validation Service passes it.

It seems that User Agents (based on W3C results) would be able to determine what value belongs to what key when there's no order.

Anne van Kesteren wrote this at February 23, 2007 12:26 PM: Right. Don't trust the validator! I suppose it could theoretically be made to work for the case where there's only a single key and a single value, but try to think about the implications of what you're suggesting.

Michał Stempień wrote this at March 2, 2007 05:11 AM: I was always tempted to use this solution but I wasn't sure will it be accepted. Thanks for this post!

Sean Fraser wrote this at March 2, 2007 09:46 AM: Michał: You're very welcome. The proper semantic use of markup elements is interesting, isn't it. Especially, when most web developers have their own preferences for what constitutes "proper semantics".

Comments are closed.

The Elementary Standards: A Compendium of Web Standards, CSS, Linguistics and Search Engine Optimization methodology Copyright ©2005-2008 Sean Fraser. All work is published under a Creative Commons License. All Rights Reserved.