Ordered lists and the START attribute

Date: 24 November 2009
Author: Russ Weakley

The Scenario

You have an HTML document that includes ordered lists interspersed with other content. The ordered list items must be numbered continuously throughout the document (not restarting at number 1 each time an ordered list is used).

The simplest way to achieve this is using the “start” attribute: <ol start="4" type="1">. However, you may also want to use an XHTML1.0 Strict or HTML4.01 Strict doctype.

Problem

The “start” and “type” attributes are not allowed in XHTML1.0 Strict or HTML4.0 Strict documents. These attributes ARE allowed if XHTML1.0 Transitional or HTML4.01 Transitional are used.

Why are these attributes not allowed using Strict doctypes?

The W3C determined that the attributes “type” and “start” were purely presentational and should be removed from markup – to be replaced with CSS counters.

It is interesting that the W3C’s preferred method for list numbering fails one of it’s core principles – documents must be able to work with and without presentation.

A lot of people (including myself) disagree with the decision to define these attributes as presentational – especially in the case of legal documents, where exact numbering is considered critical to the content itself.

How can you overcome this?

Here are the five main options and their issues:

  • Option 1 – Use <ol> with “start” and/or “type” attributes using XHTML1.0 Strict or HTML4.01 Strict doctype
    Issue: The document will be invalid
  • Option 2 – Use <ol> with “start” and/or “type” attributes using XHTML1.0 Transitional or HTML4.01 Transitional doctype
    Issue: Authors may not like or be able to use transitional doctype?
  • Option 3 – Use <ol> with CSS counters
    Issue 1: Lack of support in some earlier browsers (especially IE)
    Issue 2: No meaning provided if document is viewed with CSS turned off
  • Option 4 – Use <ul>, hide the default list numbering (“list-style-type: none”) and use manual numbering (within the content itself)
    Issue: All numbers have to be created manually
  • Option 5 – Use <ol> with “start” and/or “type” attributes using the HTML5 Doctype. As the W3C HTML Working Draft states: “The value attribute for the li element is no longer deprecated as it is not presentational. The same goes for the start attribute of the ol element”. Browser testing suggests support is good
    Issue: Authors may not wish to or be able to use HTML5 doctype

More on CSS counters

  • Assuming you would like to go with option 3 from above, David Storey has a good article on CSS counters with a demo.
  • Be aware that this solution is far from ideal. In order to mark up a large document with various <ol> lists – you need to manually adjust the CSS to suit the document. This means that if someone adds a bullet-point, there is a strong possibility that the CSS may need to be adjusted as well. Also, the solution uses “nth-of-type” which is far from ideal in a real-world environment. I think it is easier to use specific classes. Finally, I would also add a float to the generated numbers so all content is justified correctly (regardless of how many digits the numbers include).
  • Here is a quick sample using classes and floated generated numbers.

Comments so far

  1. Jack Sleight says:

    Do you know what the W3Cs rationale for deprecating start was? In my mind it’s obviously structural, and definitely not purely presentational, but they must have had their reasons.

    Anyway, I’m using an HTML 5 doctype these days, so option 5 is my choice, and certainly the best solution going forward.

  2. Zack says:

    Depending on precisely how you write it, the Transitional doctypes may trigger quirks mode (or “almost standards” mode) in various browsers, which is another reason to avoid it. See e.g.https://developer.mozilla.org/en/Mozilla's_DOCTYPE_sniffing

    With my Mozilla developer hat on, we think option 5 is the way to go.

  3. Brian says:

    “…in the case of legal documents, where exact numbering is considered critical to the content itself”

    Well two things: 1) legal paragraphs are paragraphs not lists; and 2) if the numbering is *critical* to the content then it should be *in* the content.

  4. Russ says:

    @Brian agree if numbering is critical, it should be in the content – as per option 4. Regarding whether they are paragraphs or lists, it really depends on the content of the specific document. I have seen some that are definitely lists – not paragraphs.

  5. Stephen Bunt says:

    I agree, Russ. This used to frustrate & infuriate me (do I need to get a life?), because of the “…documents must be able to work with and without presentation” requirement. It just didn’t make sense that the document would have different ‘content’ without styling. CSS counters just don’t have the same _meaning_.

    I often had to mark up terms & conditions for many of the promotional events at KCA. These are legal documents and are very much numbered points rather than paragraphs.

    Because I had control over the code, I (grudgingly) used option 2, but I agree that option 5 is probably the best going forward.

  6. Jermayn says:

    Always always wanted to know how to do this, so thank you…

  7. Brian says:

    @Russ I guess my view is that if you *have* to number ordered list items continuously throughout a document then that goes beyond the semantics that HTML can express – especially with the “start” attribute, which is prone to author error. Maybe a better way would be something like the “for” attribute for LABELs that would link two discrete OLs together so that the browser can treat them as a single list – e.g … .

    HTML5′s undeprecation of the “start” and “type” attributes seems to me to be another example of the “paving the cowpaths” and fits with my overall feeling about the spec that it’s “two steps forward, one step back”.

    As an aside – is there actually a valid use case for CSS Counters, given that they don’t degrade gracefully?

  8. Russ says:

    @Brain, an interesting question. I suppose some people would argue that there are times – maybe if the numbering is more presentational… but I would find it hard to justify using a technique that disappears if CSS is turned off :)

  9. Brian says:

    @Russ I just realised I forgot to escape my HTML syntax in the example I was trying to give – it was this:

    <ol id=”list1″> … <ol continues=”list1″>

    Hopefully that works :)

  10. Russ says:

    An interesting idea… :)

  11. Charles says:

    I should really thank you for the post because it has been presented in an impressive manner, its been very useful to me and i am really looking forward for more of this sort, thank you.

  12. David Hucklesby says:

    Interesting dilemma. Speaking personally, I make good use of both spell-checker and validator during development. A strict DOCTYPE makes most sense to me. But just as I’d note, but not correct some spelling “errors,” the same goes for HTML “deprecated” items where the alternatives are poor, such as this case.

    In other words, checking against a strict DOCTYPE is invaluable; avoiding flagged items like a plague seems less useful…