Last week when Chris Mills and crew announced the release of their Web Standards Curriculum, the table of contents was buried away from their front page. Making it hard for visitors to get to the content.
So, to help people get to the content better in a small way, I placed the table of contents on my site with direct links to each of the articles that make up the first version of the curriculum. While I was marking up the content, I noticed a little problem on Opera’s table of contents.
If you look at Figure 1, the table of contents has two markers: a bullet and a number appended to the side of each list item. What’s actually happing behind the code is that the list is marked up with an unordered list, which auto-generates the bullet, and there is a hard-coded number for the article:
<ul> <li>12. <a href="http://dev.opera.com/articles/ view/12-the-basics-of-html/" title="HTML basics article">The basics of HTML</a>, by Mark Norman Francis.</li> ... </ul>
All that coding seemed a bit odd. I had a quick email exchange with Chris Mill after I posted my table of contents that they needed to work on increasing visibility (or “scent” as Jarod would say) to the content.
I checked back on the site a few days later in and noticed that the double markers in the table of contents were gone as shown in Figure 2.
Curious as to how they did the markup for the list, I pulled up trusty View Source and noticed something a bit shocking:
<ul style="list-style:none;"> <li>12. <a href="http://dev.opera.com/articles/ view/12-the-basics-of-html/">The basics of HTML</a>, by Mark Norman Francis.</li> ... </ul>
The markup for the lists was the same as before, however, inline CSS was made to remove the default markers.
As Ted would say, “woah!”
I shot over an email to Chris informing him of the
start attribute that can be used with ordered lists.
This rather simple attribute allows one to set the start of an ordered list with any integer and has the added benefit of fitting in rather nicely with the breaks of the curriculum’s table of contents:
<ol start="12"> <li><a href="http://dev.opera.com/articles/ view/12-the-basics-of-html/">The basics of HTML</a>, by Mark Norman Francis.</li> ... </ol>
He wrote back saying, “I honestly didn’t know you could do this!”, and has promptly fixed the markup as shown in Figure 3.
It doesn’t surprise me that Chris didn’t know about this attribute because a lot of my HTML books I own don’t even cover the attribute. (Some online HTML tutorials don’t as well.) The first book in my collection I found with this attribute listed was Molly Holzschlag’s Special Edition Using HTML and XHTML published in 2002!
Note there is a minor down-side to the start attribute: It doesn’t validate with a XHTML Strict Doctype, but it does for XHTML transitional.
Other than that, I believe the start attribute is a handy bit of HTML knowledge to know even if you are just starting out with Web design or, you know, working on a Web standards curriculum for others. (Just kidding, Chris!)