More of You have indicated, that the lists and the changes of the lists have been out of the articles so far. Now I would like to dissolve this gap. In my opinion there are less changes that happened according to HTML4.
You can make lists (ordered: (<ol> … <li>) or unordered (<ul>…<li>) or mixed lists (ordered and unordered) in a similar manner. So far we had opportunity to create lists in html aswell so let’s see an example for this:
The build-up of an unordered list:
<ul> <li>Budapest</li> <li>Pécs</li> </ul>
The build-up of an ordered list:
<ol> <li>Budapest</li> <li>Pécs</li> </ol>
or we can mix them:
<ol> <li>Cities <ol> <li>Budapest</li> <li>Pécs</li> </ol> </li> <li>Towns <ul> <li>Mohács</li> <li>Bóly</li> </ul> </li> </ol>
Let’s see the attributes of the listelements:
In the case of the <ul> we can use only global non-list specific attributes so we are not going to deal with them. In the case of the <ol> we can choose from three attributes (1 of them is new) which are the following:
- start – <ol start=”50”> You can define the initial number.
- type – <ol type=”I”> We can set the type of our sequence which are the following::
1 Number (this is the default) (1, 2, 3, 4)
a abc sequence, ascending (a, b, c, d)
A abc sequence, descending (A, B, C, D)
i roman numbers (i, ii, iii, iv)
I roman numbers (I, II, III, IV)
- reversed – <ol reversed=”reversed”> descending numbers.. pl. 5,4,3,2,1
unfortunately none of the browsers that i have tried in supported the last one so the third part of the next example is not reversed.
However i do not think that the support of this is a complex thing that would be a challenge task for programming. But the release of the final standard is not close so let’s hope they will not leave this out. In the case of the <li> there is only one attribute which is the following:
- value – <li value=”3”> we can set manually the number and the value of the list.
Here is a simple examle by the above:
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Basic lists</title> </head> <body> <ol> <li>Coffee</li> <li>Syrup</li> <li>Milk</li> </ol> <ol start="100"> <li>Coffee</li> <li>Syrup</li> <li>Milk</li> </ol> <ol reversed> <li>Coffee</li> <li>Syrup</li> <li>Milk</li> </ol> <ol type="I"> <li>Coffee</li> <li>Syrup</li> <li>Milk</li> </ol> <ol> <li value="3">Coffee</li> <li value="2">Syrup</li> <li value="1">Milk</li> </ol> </body> </html>
You can download the example from here.
If You have any further questions or opinions You can write to the e-mail address that has been given in the Contact menu.
Source:
http://www.w3.org/TR/html5/grouping-content.html#the-ol-element
HTML5 Lists and attributes a Creative Commons Nevezd meg! – Ne add el! – Így add tovább! 2.5 Magyarország Licenc alatt van.
Permissions beyond the scope of this license may be available at http://html5.ugyesen.com.