The ol Element and Related Attributes: type, start, value, and reversed

by .

The <ol> element has a new attribute reversed in HTML5. In addition, a couple of related attributes purged in HTML 4 have made a return, namely start and type for <ol>, and value for <li>. Making things more interesting, the returning attributes were removed from HTML 4 for being presentational. So why are they back? Let’s investigate…

Presentational and semantic?

As we all know, presentational stuff belongs in CSS, not HTML. In HTML 4.01, the type attribute was replaced by list-style-type, and the start and value attributes were dropped, with only the potential (although fiddly) replacement in some cases of CSS generated content-based counters. So why would we want to specify “presentational” stuff like a list’s style in our HTML?

The type Attribute

While an ordered list’s counter style is generally presentational, in some documents it can be a part of the document’s meaning, as the specification for the type attribute notes:

The type attribute can be used to specify the kind of marker to use in the list, in the cases where that matters (e.g. because items are to be referenced by their number/letter).
HTML: Living Standard, WHATWG

Examples of this include legal or technical documents, which can contain references to non-decimal list items in prose:

Obligations of the Company – Tranche One
Subject to satisfaction of clause 3.2(a), on Tranche One Completion the Company will:
(a) Purchase a foosball table for staff use
(b) …
Mockup of an example legal document with a highlighted reference to a non-decimal list item

We can specify the list’s style using the type attribute, with the following values:

type attribute values and their corresponding list counter types
<ol type=""> valuesEquivalent list-style-type
type="1"decimal (default style)
type="a"lower-alpha
type="A"upper-alpha
type="i"lower-roman
type="I"upper-roman

Further emphasising that this is not a general alternative to list-style-type, only these five list styles are available, whereas CSS 2.1 defines eleven <ol> list styles. If you’re not referring to list counters in your prose, or even if you are but you’re just using the default decimal list counters, then you should use CSS over the type attribute. However, if the list counter type has a semantic meaning, HTML is the place to put it. Note that CSS list-style-type will override HTML type attribute values, so they’ll only work if you haven’t specified a list-style-type in your CSS.

The start and value Attributes

The start attribute lets us set a list’s first counter. It’s handy for lists that must be split over several <ol> elements, by allowing us to continue the list item numbering from where the previous list left off. The related value attribute is used on an <li> element, and lets us manually number list items. value on the first list item also overrides start. A subsequent <li> element without value will increment the previous value by one.

The first item in the list has the ordinal value given by the ol element’s start attribute, unless that li element has a value attribute with a value that can be successfully parsed, in which case it has the ordinal value given by that value attribute.
HTML: Living Standard, WHATWG

Here’s an example of how you could use start or value to continue a list, which also demonstrates type:

<!-- Continuing a previous list with value="" -->
<ol type="I">
  <li value="7">seventh item</li>
  <li>eighth item</li>
  <li>ninth item</li>
</ol>
<!-- Continuing a previous list with start="" -->
<ol type="I" start="7">
  <li>seventh item</li>
  <li>eighth item</li>
  <li>ninth item</li>
</ol>
  1. seventh item (using <li value="7">)
  2. eighth item
  3. ninth item
  1. seventh item (using <ol start="7">)
  2. eighth item
  3. ninth item
Using value and start to continue a previous list of six items

While both of these attributes give us more control, they unfortunately also mean adding or removing list items can make your start or value-based numbering appear broken, so in general you’ll probably want to avoid them and investigate CSS generated content counters instead. You’ll need to use generated content counters if you want to make “1.1.1”-style nested list counters too.

Counting It Down with reverse

The new attribute reverse allows us to make ordered lists that count down rather than up. If you’re coding a top ten countdown or you’re a space junkie, it’s the attribute you’ve always wanted.

The reversed attribute is a boolean attribute. If present, it indicates that the list is a descending list (..., 3, 2, 1).
HTML: Living Standard, WHATWG

By default, <ol reversed> starts from the total number of list items and counts down to one, so there’s no need to also specify start unless you want something different to happen. Unfortunately, as we’ll see in the browser support table in just a moment, none of them do yet, so in the meantime you can make a reversed list by manually specifying each list item’s number with value (as you can see in the following example) or via CSS counters.

<!-- default list -->
<ol>
  <li>three</li>
  <li>two</li>
  <li>one</li>
</ol>
<!-- using the reversed attribute (will look the same as the third list in a supporting browser) -->
<ol reversed>
  <li>three</li>
  <li>two</li>
  <li>one</li>
</ol>
<!-- using value attributes on li -->
<ol>
  <li value="3">three</li>
  <li value="2">two</li>
  <li value="1">one</li>
</ol>
  1. three
  2. two
  3. one
  1. three
  2. two
  3. one
  1. three
  2. two
  3. one
A normal ordered list, an ordered list with reversed, and an ordered list with each list item numbered manually via value

Browser support table

Browsers support the start, type, and value attributes as part of supporting legacy content (HTML 3.2 represent!), so we can use them now.

Browser support for type, start, value, and reversed attributes
Attribute IE Firefox Safari Chrome Opera
<ol type="">
<ol start="">
<li value="">
<ol reversed> ¹ ² 5.2 ³ 18 ³
  1. We can use a JavaScript polyfill to get around the lack of native support for the reversed attribute, such as the polyfill (and accompanying article) from Louis Lazaris, or Titani’s polyfills, which both use the value attribute.
  2. It’s bug 601912, but there’s no progress as yet
  3. Chrome 18 (in the dev channel at the time of writing) has support for reversed (thanks Philip Tellis), as does Safari 5.2 Developer Release (thanks Sam Rayner)
<!-- default (unsupported) reversed attribute -->
<ol reversed>
  <li>three</li>
  <li>two</li>
  <li>one</li>
</ol>
<!-- using a reversed attribute polyfill -->
<ol class="polyfill-me" reversed>
  <li>three</li>
  <li>two</li>
  <li>one</li>
</ol>
  1. three (default list with reversed)
  2. two
  3. one
  1. three (list with polyfilled reversed)
  2. two
  3. one
Our earlier reversed example using a tweaked version of Titani’s <ol reversed> polyfill

You can detect for browser support using Modernizr, via the Community add-on “lists-reversed”. If your polyfill was called reversed.js you could load it using the following code:

yepnope({
  test : Modernizr.olreversed,
  nope : ['reversed.js']
});

The custom Modernizr build for doing this would be:

  • Extra > Modernizr.load
  • Extensibility > Modernizr.addTest
  • Community add-ons > lists-reversed

Conclusion

These attributes aren’t ones you’ll use often, but sometimes they’ll be just the ticket. They’ll help you avoid adding list item numbering as part of your content (leading to double numbering if your CSS with list-style-type: none; is disabled), or ugly hacks like height:0; on a bunch of filler <li> elements to get the right start value. Even better, type, start, and value are supported and ready to use now.

As usual, just make sure you are only using them where appropriate:

  • Only use type if the list style for counters is semantic, and the document’s meaning will change if your CSS (containing the equivalent list-style-type values) didn’t load.
  • For start, consider whether your lists could be combined.
  • Avoid value if at all possible, as it’s less fragile and error-prone to let the browser number list items for you.
  • Unfortunately, the current lack of browser support means you’ll need to polyfill reversed if you want to use it for now.

So what do you think of these new attributes? Have you needed them in the past? Have you actually used some of them back in the day to rock some old-skool HTML 3.2? Will you use them in the future? Let us know in the comments!

Updates

  1. I’ve added more browser support information and corrections from the comments. Thanks!

16 Responses on the article “The ol Element and Related Attributes: type, start, value, and reversed

Philip Tellis says

Very well written article, thank you. Just wanted to point out that the reversed attribute is supported by Chrome 18 (currently in the beta channel I think).

Sam Rayner says

<ol reversed> is also supported in the Safari 5.2 developer release :)

Louis says

Hey, nice write-up, Oli. And thanks for mentioning my polyfill (which was improved recently by Remy Sharp). As Philip mentions, the latest Chrome Canary build supports reversed. That’s the only browser that I know of that has support. There’s still an open bug report for Gecko (linked in my blog post that you cited).

And one small correction: My last name is spelled “Lazaris”, not “Lazarus”. Common mistake, but I haven’t been resurrected yet. :)

Thanks again.

Niall McMahon says

This will certainly come in handy. I’ve had to use specific values for each before, which isn’t too much of an issue for static lists, but it creates extra work if you were getting dynamic results from a database for example.

Kevin Sweeney says

Being able to break lists up is great, but I wish there was also a way to denote this relationship, aside from simply assuming that an ol with a “start” attribute continues the previous ol instance, which might not always be the case.

Oli Studholme says

@Philip & Sam — thanks for the extra info, I’ve updated the article.

@Louis — sorry for the typo! Corrected. Thanks for the polyfill too :) Also thanks to Matthew and @lennym for the code typo heads-up. Two typos!? I must be slipping >_<

@Kevin — I don’t know if there’s a way to do so. Hopefully someone will tell us if there is!

Alohci says

@Kevin – If I recall correctly such an idea was discussed on the w3c public-html mailing list (and probably elsewhere) and while it seems a good idea it raises all kinds of practical problems.

For example, what should happen if list A says it follows from list B, and list B says it follows from list A? What happens if list B and list C both say they follow from list A? Or what happens if list C says it follows from list B which says it follows list A, and then list B is deleted from the DOM in script?

No-one seemed to consider the use case valuable enough to want to identify all the possible issues that could arise, and define what should happen in each and every case, and then be in a position to get the browser manufacturers to sign up to implement it consistently.

Pascal says

Very intersting !
Juste a precision : when you say that “start”, “value” and “type” are supported by IE, you mean which version ? (I don’t find it on caniuse website).
Cheers

Raksaka Indra says

It’s a new knowledge about ol element using type, start, value, reserved. Nice post… :D

Thierry says

Nice write-up. I think you cover pretty much everything there is to know.
Thanks!

Oli Studholme says

@ Alohci — thanks! :)

@Pascal — I don’t know, but I strongly suspect “since forever”, as these are HTML 3.2 attributes. I just checked IE6 and they work there.

Col says

I’m really looking forward to more support for the reversed attribute!

Great article.

Ralf MC says

This really creeps me out:


<ol>
<li value="3">3</li>
<li value="2">2</li>
<li>?</li>
</ol>

My browser answers ’3′, what does yours come up with?!

I would say that it should have been either ’4′ (skip the ’3′ that is already there) or ’1′ (implied reverse attribute). What do you think?

@ Oli: IE6 hardly seems a standards conformance checker for any standard. ;-)

Oli Studholme says

@Ralf MC — Three comes after two, so that’s what I’d expect (unless the list was reversed). Unique numbering doesn’t seem like a good goal if you’re manually numbering some items using value. Both of your suggestions would make some custom lists impossible — people want to do all kinds of crazy stuff — plus be really hard to spec and implement.

IE6 was used to check browser support (not standards conformance) as it was in the ancient past of 11 years ago ;-)

Janet Ward says

HELP can any one help me. Is there a way to use CSS number style to format the following style.
1
1.1
1.2
2
2.1
2.2
etc?

Andreas Rejbrand says

@Janet: Have a look at “CSS counters”. You can learn more about this topic, for instance, at Mozilla.

Join the discussion.

Some HTML is ok

You can use these tags:
<a href="" title="">
<abbr title="">
<b>
<blockquote cite="">
<cite>
<del datetime="">
<em>
<i>
<q cite="">
<strong>

You can also use <code>, and remember to use &lt; and &gt; for brackets.