Setting the Start Number for an Ordered List

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:

Figure 1.

 <li>12. <a href="
view/12-the-basics-of-html/" title="HTML basics 
article">The basics of HTML</a>, by Mark Norman 

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.

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="
view/12-the-basics-of-html/">The basics of HTML</a>,
by Mark Norman Francis.</li>

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="
view/12-the-basics-of-html/">The basics of HTML</a>, 
by Mark Norman Francis.</li>

He wrote back saying, “I honestly didn’t know you could do this!”, and has promptly fixed the markup as shown in Figure 3.

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!)

7 thoughts on “Setting the Start Number for an Ordered List

  1. There is an inherent flaw in this TOC as a list because you are ignoring parent categories so the TOC that you are marking up as:

    Web Design Concepts

    Could have been marked up as:

    Web Design Concepts
    Lorem ipsum dolor sit…

    Information Architecture…
    What does a good web page need?

    Jumping numbering and interjecting headings w/in the context of the list is not how a typical TOC would be written. If you look at a text book you’d have Part 1 section one. Ocassionally you might have parts and continuous chapter numbers but the headings are part of the list. 

    Your result would/could look like

    3. Web design concepts
    –1. Information Architecture
    –2. What does a good web page need?

    You could even style it so it were w/o the numbers on the top level li’s and have roman lowercase numbering using css for the sub-li’s as follows:

    Web design concepts
    –i. Information Architecture
    –ii. What does a good web page need?

    In either case, it is more meaningful and closer to a true TOC.

  2. Here is my markup using entities. (Darn HTML filters.)
    <h3>Web Design Concepts</h3>
    <ol start=“6”>


    Could have been marked up as:

    <li><h3>Web Design Concepts</h3>
    <p>Lorem ipsum dolor sit…<p>
    <li>Information Architecture…</li>
    <li>What does a good web page need?</li>

  3. I think dropping the start attribute from the strict doctype was a poor choice. Having worked on a number of government documents, which tend to have lots of bulleted lists, I’ve been using the start attribute for years. Luckily, the start attribute makes its return in HTML5.

  4. Okay so I can agree on that point Mr. Snook but do you not agree that the hierarchical headings belong in the ordered list? It seems to make sense that if you using headings to categorize the order even if you continue the sublists original numbering (page numbers are an example where this makes significant sense) that you’d place the headings in a top level OL and the sublist in a sub-OL and restart if the IA requires it. 

    I think it is clear that some of ideals that lead to deprecations in Strict were well intended but left some use cases and communicative devices out in the cold. Oh when, oh when will HTML5 drop… Cheers.

  5. In the case of most TOCs, yes, I think headings should be within an OL but it’s a subjective choice since the order is implied. In the article example, the headings aren’t sections but ways of grouping chapters so the need to be within an OL is less important.

  6. Thank you fort hat modification. Because me and my mates are so interested in your Web Standards Curriculum, that we was very sad in cause of that hard way to get to the content. But this solution, that you called “the small way” is a big way for us to get that amazing content. A little step for you – a big step for everybody who is interested in that content.

  7. I use this attribute all of the time, for restaurant menus. It’s quite common for a take out menu to have headings interspersed within lists, which start again where they left off after the heading. I’m glad to hear this attribute will be valid in html 5, it’s quite painful trying to work around the absence.

Leave a Reply

Your email address will not be published. Required fields are marked *