Ordered lists and the START attribute

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.