This is kinda stupid question but what markup should I use for ordered list which already has numbers? I'm currently using <OL> tag but It's kinda redundant in my eyes.
Markup:
<ol>
<li>Chapter 1</li>
<li>Chapter 2</li>
<li>Chapter 3</li>
<li>Chapter 4</li>
</ol>
Output:
1. Chapter 1
2. Chapter 2
3. Chapter 3
4. Chapter 4
For some reason I'm not using CSS so styling the <OL> is my last option.
<ol> is your best option from a semantical point of view. According to the w3 specifications, you shouldn't use the type attribute anymore but use CSS styling instead:
http://www.w3.org/TR/html401/struct/lists.html#type-values
Having said this, <ol> + CSS is the "best" option. But using <ul> instead, might be the "most pragmatic" one, to avoid styling in your specific case.
UPDATE: Actually, the type attribute was "undeprecated" again in HTML5:
This isn't a semantics issue; this is a styling issue. Semantically what you're doing is correct. You have a list of elements that are in a specific order, thus you should use <ol>. The type of list bullet being displayed is a purely aesthetic styling choice and has nothing to do with semantics.
Perhaps the problem here really is the non-descriptive name of the chapters. Perhaps 'Chapter 1' would be better off 'Some Title Describing the Chapter'
In reality, <ol> means a list to be numbered by the browser; even the W3C HTML specifications use it this way, no matter what they might say in their prose. For details, check my treatise The difference between ul and ol elements in HTML. So if you don’t want browser-generated numbering, don’t use <ol>.
If you don’t want browser-generated bullets either, <ul> is not suitable either, though bullets would be less odd than generated numbers when the items have numbers in their content. In this case, <ul> might be suitable, but maybe not optimal.
This leaves you <div>, with class if needed. You can wrap each item inside <div> to make them start on a new line, and you can additionally wrap the entire list inside an outer <div> if this is needed for styling or scripting. Using just <br> between the items is another option, but then you have no convenient way of styling the items if you later wish to do that.
Are you using a 'css reset'? It might be resetting the default OL style.
Try addings this to your css:
ol { list-style-type: decimal; }
Structure your HTML like this:
<ol>
<li>Chapter 1</li>
<li>Chapter 2</li>
</ol>
Also make sure your doctype is correctly set. Prob. should use HTML5, but there are other options.
<!doctype html>
The difference between OL and UL is 'Ordered List' and 'Un-ordered List' use the right one when appropriate. If your list already contains a number you may just want to set list-style-type: none; in your css, but I would still use OL. It's more correct in this case I think.
You can resort to using the unordered list semantic markup <ul> instead; using this sample:
<ul>
<li>Chapter 1</li>
<li>Chapter 2</li>
<li>Chapter 3</li>
<li>Chapter 4</li>
</ul>
In the end; however, you should always use CSS for styling. It's unlikely you won't need to style your markup anyway, unless it's only for diagnostic purposes or providing basic information.
Technically, to be semantically correct you should keep your <ol> markup and use CSS to achieve the appearance you desire, but this may not be important depending on your situation and intentions.
` if the content already contains numbering. The other one is purely about styling
– Lukas Eder Jan 28 '12 at 15:55` is an `
– BoltClock Jan 28 '12 at 16:24`. There is absolutely no way the content could or should ever affect its semantic meaning. If it's an ordered list, it's an `
`. *That's it.*
`. The question boils down to the way the list elements are displayed in the browser. Sounds like styling to me.
– Charles Sprayberry Jan 28 '12 at 16:24