Set values of LI tag in HTML

Question

I have a Ordered list that I need to set the # values for. Something like:

<ol>
 <li ShowValue=34>apple</li>
 <li ShowValue=45>pear</li>
 <li ShowValue=55>car</li>
</ol>

So that they display with the numbers I assign

34.apple
45.pear
55.car

Is there a way to tell the LI what number it should show?

Answer 1

What about taking an unordered list and writing the number inside?

<ul>
    <li>34. apple</li>
    <li>45. pear</li>
    <li>55. car</li>
</ul>

You would have to hide the list's bullets then. Use

ul {
    list-style-type: none;
}

for that.

Answer 2

It depends on how the HTML is being generated. If it's static, then simply typing the values in would work:

<li value="35">35.apple</li>

If it's generated server-side, then you can add it in the server code.

The third way would be to use jQuery to modify the contents after it has been rendered.

Answer 3

If you use HTML 4.01 you can do this:

<ol>
  <li value="34">apple</li>
  ...
</ol>

Bu notice that this is deprecated.

Answer 4

The HTML approach:

<ol start="34">
    <li>apple</li>
    <li>pear</li>
    <li>car</li>
</ol>

this is deprecated in HTML4 in favour of CSS generated content:

<style type="text/css">
    .mylist { counter-reset: mycounter 34; }
    .mylist li { counter-increment: mycounter; list-style-type: none; }
    .mylist li:before { content: counter(mycounter) ". "; }
</style>

<ol class="mylist">
    <li>apple</li> ...
</ol>

This has some advantages in that you can also let a list run through without resetting (for if you have 33 other things in a previous list). However it doesn't work in IE6/IE7 so you can forget it for now.

The deprecation of <ol start> (and <li value>) is a matter of some controversy. Many (myself included) believe it to have been a mistake, as the list number is closer to content than presentation in the common case of a continued list. Whilst the HTML hack is admittedly nasty, IMO the CSS workaround is worse.

Anyhow, HTML5 re-includes these attributes so they are not going away. If continued <ol>s are a necessity, I'd stick with the HTML start/value attributes, and use either the HTML4/XHTML1 Transitional DOCTYPE or the HTML5 one.

Answer 5

Don't use an attribute to output a numeric value. That is not what the list items are for and in using it in this manner is violating the elements semantics. The ol element is an ordered list. That means the list items in that list have an enumerated meta data value that represents an ordering opposed to an unordered list, which has no meta-data enumeration, and therefore is merely a collection of list items without regard for the position of a list item relative to the other list items.

What you are attempting is a presentation feature. HTML is not a presentation language. Use should use CSS:

#custom-item:before {
    content: "35.";
}

See this article for more information: http://www.alistapart.com/articles/taminglists/