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?

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

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.

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>

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.

1. We can use a JavaScript polyfill to get around the lack of native support for the reversed attribute, such as the , 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>

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. 2012-02-22 I’ve added more browser support information and corrections from the comments. Thanks!