Valid replacement for ol type=”a”
I was recently sent this question:
I have used <ol type=”a”> in my markup. The W3C validator tells me that this is invalid. How can I change the “type” of an ordered list’s the list without using this attribute?
Answer:
The type attribute associated with the <ul> , <ol> and <li> has been deprecated as it is considered style information. This means it should be achieved using CSS rather than markup.
Ideally, authors should use the list-style-type property which can specify a wide range of options including:
- disc
- circle
- square
- decimal
- decimal-leading-zero
- lower-roman
- upper-roman
- lower-greek
- lower-alpha
- lower-latin
- upper-alpha
- upper-latin
- hebrew
- armenian
- georgian
- cjk-ideographic
- hiragana
- katakana
- hiragana-iroha
- katakana-iroha
So, the preferred markup would be something like:
HTML:
<ol
class="lower-alpha" class="class-name">
CSS:
.class-name { list-style-type: lower-alpha; }
Date: 16 September 2008
Author: Russ Weakley
Category: Articles, CSS, HTML, News, Q and A, Web, Web standards
Tags: , list, type, valid
It might be worth setting the nested <ol> list-style-types as well, especially if you’ve reset all <ol> tags to be lower-alpha. I’m not sure what the browser defaults are for nested <ol> tags.
For example:
ol.lower-alpha { list-style-type: lower-alpha; }
ol.lower-alpha ol { list-style-type: lower-roman; }
ol.lower-alpha ol ol { list-style-type: decimal; }
I would argue that you probably shouldn’t use a class-name that describes how the element is styled – just like
.red {color: red;}
.left {float: left;}
would be bad ideas…
If you later changed your mind, you’d have to alter your HTML (not only the CSS) because otherwise you’d have
.lower-alpha {list-style-type: square;}
which is clearly misleading…
@Christian Sonne: Completely agree. This was an example only – and the class was named this way to make it clearer. Ideally, the class should be named to reflect the purpose of the content – not its appearance.
I popped in to make the exact same comment as Christian, and I’m glad to see you agree Russ. However, since the purpose of this post is to educate the masses in regards to web standards, surely any example you give should follow best practice.
I think this is the first time I’ve commented here, so it would be remiss of me not to say thanks for your links for light reading posts. They almost always have one or two items of interest I wouldn’t have seen elsewhere.
@Sean: yes, depending on the needs of your content.
@Simon: Yes… it seems a less presentational name would have been better – the example has been updated slighty
And thanks for you comments re light reading posts.
Russ,
‘depricated’ ? (my spell checker goes crazy :/)
Thx.
@Philippe – ooops – thanks
this is one case where i’m on the fence, to be honest. is the numbering style not part of the content, particularly when you refer to certain points in other parts of the page? say you have set the list to use roman numerals, and in one of the paragraphs you write “see also section XII”. in non-CSS-capable browsers, this would make no sense unless you mentally converted the roman numerals to arabic numbers. even more confusing with complex nested lists that use a mix of letters, numbers, etc. so, is the numbering style not part of the content itself?
@patrick: There are times when I agree – when the numbering seems like it is content rather than presentational. A recent complex legal document comes to mind. However, the various options for ordered lists are normally used to enhance the core concept – a series of ordered items.
Russ – I’d like to echo Simon’s comment about the links for light reading posts. I absorb a heck of a lot of information each day from the 30-40 feeds I follow, but there’s usually 1-2 things in your links that are on feeds that I don’t have. Keep up the good work
@Sean Curtis: Thanks heaps!