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

li ... ⁄li

Share it

li intro li browser display li parents - children li syntaxli value attribute

HTML5 li element

The li element allows you to add items to any of the next 3 elements: ol, ul, menu (if type="toolbar"). »video

About li

Display & support li

Firefox iconChrome iconIE iconOpera iconSafari icon

Parents, children li

Attributes li

Observation: value attribute can be applied only to li elements children of an ol element. »video

Syntax li

<li> ... </li>
<li> ... »video

Attributes and Values li (comma separated)

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

HTML5 li element: add items

min video details
00:08 li element represents a list (l) item (i)
00:13 li element allows you to add items to:

- an unordered list: ul
- an ordered list: ol
- or to a menu(toolbar type)
00:19 adding items to an unordered list
00:19 since we have an empty unordered list (ul) on the page, let's add some items to it through li element
00:31 adding content to the items
00:43 and the items display in browser's window
00:51 adding items to an ordered list
00:51 through li element we can add items to an ordered list (ol) also
00:57 and the items of the ordered list display
01:03 adding items to a toolbar menu
01:03 the same, through li element we can add items to a toolbar menu
01:09 menu element is not yet supported in browser;
the browser display is not the expected one

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