HTML li tag (<li>) can be used to create a list item. It can be used either in unordered list – ul (<ul>) or in ordered list – ol (<ol>). Also note that there can be nested lists (using ul and/or ol) also.
Attributes
Specific HTML attributes (in addition to global attributes) for li tag are
- value: The ordinal value of the list item. Permitted only if the li element is a child of an ol element. Note that value attribute was deprecated in HTML4 but is supported in HTML5
- type (deprecated)
- start (deprecated)
- compact (deprecated)
CSS property display
The default value of li element’s display property is list-item.
li {
display: list-item;
}
Example – li tag with ul and ol
Unordered list <ul> <li>item1</li> <li>item2</li> <li>item3</li> </ul> Ordered list <ol> <li>item1</li> <li>item2</li> <li>item3</li> </ol>
Example – li tag with attribute value
When a value is assigned in li tag, that becomes the ordinal value of that item. Next item ordinal value is obtained by taking taken value if not specified.
Ordered list <ol> <li value="2">itemA</li> <li value="4">itemB</li> <li>itemC</li> <li>itemD</li> </ol>
Example – li tag with display inline
<style>
li {display: inline; }
</style>
Unordered list
<ul>
<li>item1</li> <li>item2</li> <li>item3</li>
</ul>
Ordered list
<ol>
<li>item1</li> <li>item2</li> <li>item3</li>
</ol>Related
- CSS list-style - shorthand for list marker type, image and position
- CSS list-style-type - specify marker (disc, square, numeric, etc.) for a list
- CSS list-style-position - specify if list markers will be outside or inside
- CSS list-style-image - use image as marker in list
- HTML ol tag
- HTML ul tag
