Which of the following attribute is used only in ordered list?

The ol Element and Related Attributes: type, start, value, and reversedTuesday, February 21st, 2012 by Oli Studholme.TweetThe <ol> element has a new attribute reversed in HTM

Which of the following attribute is used only in ordered list?

Tweet

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? Lets 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 lists style in our HTML?

The type Attribute #

While an ordered lists counter style is generally presentational, in some documents it can be a part of the documents 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 lists style using the type attribute, with the following values:type attribute values and their corresponding list counter types<ol type=""> valuesEquivalent list-style-typetype="1"decimal (default style)type="a"lower-alphatype="A"upper-alphatype="i"lower-romantype="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 youre not referring to list counters in your prose, or even if you are but youre 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 theyll only work if you havent specified a list-style-type in your CSS.

The start and value Attributes #

The start attribute lets us set a lists first counter. Its 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 elements 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

Heres 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
  4. seventh item (using <ol start="7">)
  5. eighth item
  6. ninth itemUsing 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 youll probably want to avoid them and investigate CSS generated content counters instead. Youll 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 youre coding a top ten countdown or youre a space junkie, its the attribute youve 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 theres no need to also specify start unless you want something different to happen. Unfortunately, as well 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 items 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
  4. three
  5. two
  6. one
  7. three
  8. two
  9. oneA 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 attributesAttributeIEFirefoxSafariChromeOpera<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 , or Titanis polyfills, which both use the value attribute.
  2. Its bug 601912, but theres 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>
  4. three (default list with reversed)
  5. two
  6. one
  7. three (list with polyfilled reversed)
  8. two
  9. oneOur earlier reversed example using a tweaked version of Titanis <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 arent ones youll use often, but sometimes theyll be just the ticket. Theyll 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 documents meaning will change if your CSS (containing the equivalent list-style-type values) didnt load.
  • For start, consider whether your lists could be combined.
  • Avoid value if at all possible, as its less fragile and error-prone to let the browser number list items for you.
  • Unfortunately, the current lack of browser support means youll 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 Ive added more browser support information and corrections from the comments. Thanks!

Category

  • Elements

Tags

  • html5
  • li
  • ol

Oli Studholme

This article was written by Oli Studholme. He works as a developer for Information Architects, Inc. in Tokyo, Japan. He wrote Beginning HTML5 and CSS3The Web Evolved (Apress) with Rich Clark, Divya Manian, and Christopher Murphy. He also writes at oli.jp and tweets as @boblet. 宜しくね!^^

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

Philip Tellis says:February 21, 2012 at 3:06 pm

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).Reply

Sam Rayner says:February 21, 2012 at 4:44 pm

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

Louis says:February 21, 2012 at 4:55 pm

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. Thats the only browser that I know of that has support. Theres 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 havent been resurrected yet. :)

Thanks again.Reply

Niall McMahon says:February 21, 2012 at 5:23 pm

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

Kevin Sweeney says:February 21, 2012 at 7:18 pm

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.Reply

Oli Studholme says:February 21, 2012 at 10:34 pm

@Philip & Sam  thanks for the extra info, Ive 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 dont know if theres a way to do so. Hopefully someone will tell us if there is!Reply

Alohci says:February 22, 2012 at 12:43 am

@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.Reply

Pascal says:February 24, 2012 at 8:57 am

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

Raksaka Indra says:February 25, 2012 at 1:12 pm

Its a new knowledge about ol element using type, start, value, reserved. Nice post :DReply

Thierry says:February 26, 2012 at 2:39 am

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

Oli Studholme says:February 26, 2012 at 12:00 pm

@ Alohci  thanks! :)

@Pascal  I dont know, but I strongly suspect since forever, as these are HTML 3.2 attributes. I just checked IE6 and they work there.Reply

Col says:April 19, 2012 at 11:12 am

Im really looking forward to more support for the reversed attribute!

Great article.Reply

Ralf MC says:August 17, 2012 at 12:14 pm

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. ;-)Reply

Oli Studholme says:October 12, 2012 at 4:16 pm

@Ralf MC  Three comes after two, so thats what Id expect (unless the list was reversed). Unique numbering doesnt seem like a good goal if youre 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 ;-)Reply

Janet Ward says:August 5, 2013 at 6:51 pm

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?Reply

Andreas Rejbrand says:August 7, 2013 at 4:58 pm

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

Join the discussion.Click here to cancel reply.

Name (required)

Mail (will not be published) (required)

Website

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.

Enter comment

Notify me of followup comments via e-mail

Video liên quan