W3-Video WEB Tutorials

w3-video.com is a Free eLearning Website with over 500 video tutorials on HTML5, XAMPP, .htaccess, Firefox, Notepad++

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++

ol ... ⁄ol

Share it

ol intro ol, optional, occurrences ol browser display ol parents - children ol vs ulol syntaxol reversed attributeol start attributeol type attribute

HTML5 ol element

The ol element allows you to render an ordered list of items in your HTML document. »video

About ol

Display & support ol

Firefox iconChrome iconIE iconOpera iconSafari icon

Parents, children ol

Attributes ol


The difference between ul and ol: »video

Syntax ol

1<ol> ... </ol> »video

Attributes and Values ol (comma separated)

<olattribute="attribute_value(s)"> Video Examples
1. specific attributes
1.reversed="",  , reversed»video<ol reversed"> ... <⁄ol>
2.start=integer»video<ol start="2"> ... <⁄ol>
3.type=1, a, A, i, I »video<ol type="i"> ... <⁄ol>
All Specific Attributes
2. global attributes
1.accesskey=keyboard key»img<ol accesskey="h"> ... </ol>
2.class=class name»html »img<ol class="class_name"> ... </ol>
3.contenteditable="",  , true, false »html<ol contenteditable="true"> ... </ol>
4.contextmenu=menu id value»html<ol contextmenu="menu_id_value"> ... </ol>
5.data-*= value -<ol data-http-error="404"> ... </ol>
6.dir=ltr, rtl, auto»html<ol dir="ltr"> ... </ol>
7.draggable= true,  , false»img<ol draggable="false"> ... </ol>
8.dropzone= copy, move, link, string:, file: -<ol dropzone="copy"> ... </ol>
9.hidden= "",  , hidden»html »img<ol hidden="hidden"> ... </ol>
10.id=id name»html »img<ol id="unique_id_name"> ... </ol>
11.itemid= URL --
12.itemprop= string »link »a-
13.itemref= string --
14.itemscope= "",  , itemscope--
15.itemtype= absolute URL --
16.lang=language code »html »head»title »img<ol lang="en"> ... </ol>
17.spellcheck="",  , true, false»html<ol spellcheck="true"> ... </ol>
18.style=CSS property:value»html »img<ol style="color:red"> ... </ol>
19.tabindex= integer »img<ol tabindex="3"> ... </ol>
20.title=text»html »link»style »abbr»dfn
»img »meter
<ol title="html page"> ... </ol>
21.translate="", yes, no»html »img<ol translate="yes"> ... </ol>
All Global Attributes
3. global event attributes
1.onclick=script» list<element onclick="script" > ...
2.ondblclick=script» list<element ondblclick="script" > ...
All Event Attributes

Video demonstration ol element

HTML5 ol element: render an ordered list

min video details
00:08 the ol element allows us to add an ordered list to the page
00:12 the li element allows us to add items to the list (ordered in this case)
00:15 in an ol, the items are ordered by default: ascending

- first item has the ordinal value = 1
- the second item has the ordinal value = 2
00:25 adding an ordered list (ol) to the page
00:32 adding items to the list through li element
00:44 an ordered list displays by default numbers in front of each item (li)
00:50 now we can fill in the list
01:04 this is an ordered list with 3 items
01:07 which renders in browser like this
01:12 note:
by changing the position of the items in an ordered list we're changing the meaning of the list
01:21 player no2 is now on first position;
first position = the winner position (→ if he won the competition than this list is valid, otherwise no!)

For more information about the ol element, please see the specs: W3CWHATWG