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; }
September 16th, 2008
5:16 pm
Permalink
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; }
September 16th, 2008
6:37 pm
Permalink
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…
September 16th, 2008
7:06 pm
Permalink
@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.
September 16th, 2008
8:48 pm
Permalink
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.
September 16th, 2008
8:57 pm
Permalink
@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.
September 16th, 2008
10:35 pm
Permalink
Russ,
‘depricated’ ? (my spell checker goes crazy :/)
Thx.
September 16th, 2008
11:39 pm
Permalink
@Philippe - ooops - thanks
September 17th, 2008
6:49 am
Permalink
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?
September 17th, 2008
7:08 am
Permalink
@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.
September 17th, 2008
8:54 am
Permalink
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
September 17th, 2008
2:54 pm
Permalink
@Sean Curtis: Thanks heaps!