HTML5 Lists and attributes

Hungarian Version!

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)
    abc sequence, ascending (a, b, c, d)
A     abc sequence, descending (A, B, C, D)
i     roman numbers (i, ii, iii, iv)
    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

Creative Commons Licenc
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 https://html5.ugyesen.com.

You may also like...