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++

ul ... ⁄ul

Share it

ul intro ul optional, occurrences ul browser display ul parents - children ul syntax

HTML5 ul element

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

About ul

Display & support ul

Firefox iconChrome iconIE iconOpera iconSafari icon

Parents, children ul

Attributes ul

Syntax ul

1<ul> ... </ul> »video

Attributes and Values ul (comma separated)

<ulattribute="attribute_value(s)"> Video Examples
1. specific attributes
All Specific Attributes
2. global attributes
1.accesskey=keyboard key»img<ul accesskey="h"> ... </ul>
2.class=class name»html »img<ul class="class_name"> ... </ul>
3.contenteditable="",  , true, false »html<ul contenteditable="true"> ... </ul>
4.contextmenu=menu id value»html<ul contextmenu="menu_id_value"> ... </ul>
5.data-*= value -<ul data-http-error="404"> ... </ul>
6.dir=ltr, rtl, auto»html<ul dir="ltr"> ... </ul>
7.draggable= true,  , false»img<ul draggable="false"> ... </ul>
8.dropzone= copy, move, link, string:, file: -<ul dropzone="copy"> ... </ul>
9.hidden= "",  , hidden»html »img<ul hidden="hidden"> ... </ul>
10.id=id name»html »img<ul id="unique_id_name"> ... </ul>
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<ul lang="en"> ... </ul>
17.spellcheck="",  , true, false»html<ul spellcheck="true"> ... </ul>
18.style=CSS property:value»html »img<ul style="color:red"> ... </ul>
19.tabindex= integer »img<ul tabindex="3"> ... </ul>
20.title=text»html »link»style »abbr»dfn
»img »meter
<ul title="html page"> ... </ul>
21.translate="", yes, no»html »img<ul translate="yes"> ... </ul>
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 ul element

HTML5 ul element: render an unordered list

min video details
00:10 ul element allows you to add an unordered list to the page
00:14 li element allows you to add items to that list (unordered in this case)
00:23 adding an unordered list (ul) to the page
00:32 this is the list (l)
00:36 it is unordered (u)
00:40 adding items to the list through li element
00:50 an unordered list has bullets in front of each item
00:55 now we can populate the list with the fruits we like
01:10 this is an unordered list with 3 items
01:15 which renders in browser like this
01:18 note: the order of the items can be changed

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