HTML <li> Tag
➔ The <li> element is used to represent an item in a list.
➔ It must be placed in a parent element such as an ordered list (<ol>), a unordered list (<ul>), or a <menu>.
li tag syntax
<ul>
<li>item1</li>
<li>item2</li>
<li>item n</li>
</ul>
<ol>
<li>item1</li>
<li>item2</li>
<li>item n</li>
</ol>
Common uses of the li tag.
➔ If li is used in an unordered list, the items will be displayed with bullet points.
➔ If li is used in an ordered list, the items will be displayed with numbers or letters.
➔ The li tag example.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML li tag example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<style>
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: "\2605";
}
ol.c {
list-style-type: upper-roman;
}
</style>
</head>
<body>
<h3>HTML li tag unordered list example</h3>
<ul class='a'>
<li>Apple</li>
<li>Mango</li>
<li>Orange</li>
</ul>
<h3>HTML li tag unordered list example</h3>
<ul class='b'>
<li>Blackberry</li>
<li>Blueberry</li>
<li>Strawberry</li>
</ul>
<h3>HTML li tag ordered list example</h3>
<ol class='c'>
<li value="3">Blackberry</li>
<li>Blueberry</li>
<li>Strawberry</li>
</ol>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.
The most common list-style-type CSS attribute values are:
➔ disc, circle, square, decimal, upper-alpha, lower-alpha, upper-roman, lower-roman etc.
➔ Unicode Characters Example: list-style-type: "\2605";, list-style-type: "\2606";, list-style-type: "\2b50"; etc.
Key features of the li tag.
➔ li can contain any html element and can be an inline element or a block level element.
➔ li can use other nested li elements, images, text, links, or any data as list items.
➔ If it is in an ordered list, the value attribute can optionally be used to set the starting point of the order.
➔ The structure of ul, ol, and li is semantically important for accessibility and other assistive technologies because screen readers can rely on this structure to know what type of list is being used.
Element Attributes
| Attribute | Value | Description |
|---|---|---|
value |
number | This specifies the start value of the orderd list. |
Supported Global attributes
Global attributes may be applied on all elements, although some elements may have no effect on them.
<accesskey>,
<class>,
<contenteditable>,
<contextmenu>,
<data-*>,
<dir>,
<draggable>,
<dropzone>,
<hidden>,
<id>,
<lang>,
<spellcheck>,
<style>,
<tabindex>,
<title>,
<translate>.
Supported Global Event Handler Attributes
Global Event Handler attributes may be applied on all elements, although some elements may have no effect on them.
<onabort>,
<onautocomplete>,
<onautocompleteerror>,
<onblur>,
<oncancel>,
<oncanplay>,
<oncanplaythrough>,
<onchange>,
<onclick>,
<onclose>,
<oncontextmenu>,
<oncuechange>,
<ondblclick>,
<ondrag>,
<ondragend>,
<ondragenter>,
<ondragleave>,
<ondragover>,
<ondragstart>,
<ondrop>,
<ondurationchange>,
<onemptied>,
<onended>,
<onerror>,
<onfocus>,
<oninput>,
<oninvalid>,
<onkeydown>,
<onkeypress>,
<onkeyup>,
<onload>,
<onloadeddata>,
<onloadedmetadata>,
<onloadstart>,
<onmousedown>,
<onmouseenter>,
<onmouseleave>,
<onmousemove>,
<onmouseout>,
<onmouseover>,
<onmouseup>,
<onmousewheel>,
<onpause>,
<onplay>,
<onplaying>,
<onprogress>,
<onratechange>,
<onreset>,
<onresize>,
<onscroll>,
<onseeked>,
<onseeking>,
<onselect>,
<onshow>,
<onsort>,
<onstalled>,
<onsubmit>,
<onsuspend>,
<ontimeupdate>,
<ontoggle>,
<onvolumechange>,
<onwaiting>.
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Click on the "Try it Now" button to see how it works.