The <li> (list item) tag in HTML is used to define individual items in a list. It can be used within an Ordered List (<ol>) or Unordered List (<ul>) or description lists <dl>. Each <li> represents a single item within these lists, helping to structure content and make it more readable and accessible.
HTML
<!DOCTYPE html>
<html>
<body>
<h1>Shopping List</h1>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
</ul>
<h1>To-Do List</h1>
<ol>
<li>Buy groceries</li>
<li>Complete homework</li>
<li>Walk the dog</li>
</ol>
</body>
</html>
Note: The end tag can be omitted if the list item is immediately followed by another <li> element, or if there is no more content in its parent element.
Syntax
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
Attribute Value
value: The value attribute is used to specify the starting number of the list item. The list item starts from this number and increments its value with every addition of items to it. The value attribute only works for the ordered lists i.e. <ol> tag.
HTML
<!DOCTYPE html>
<html>
<body>
<h1>Shopping List</h1>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
</ul>
<h1>To-Do List</h1>
<ol>
<li value="4">Buy groceries</li>
<li>Complete homework</li>
<li>Walk the dog</li>
</ol>
</body>
</html>
HTML <li> Tag – FAQs
Can the <li> tag be used outside of <ul>, <ol>, or <menu>?
No, the <li> tag should only be used within a <ul>, <ol>, or <menu> container. Using it outside of these tags is invalid and can cause rendering issues.
What is the difference between <li> tags in <ul> and <ol>?
When used within a <ul> (unordered list), each <li> item is displayed with a bullet point by default. When used within an <ol> (ordered list), each <li> item is numbered or ordered by default.
Can the appearance of list bullets or numbers be customized in the <li> tag?
Yes, you can customize list markers using the list-style-type CSS property. You can change bullets to different symbols or styles, or even replace them with custom images.
How do you nest lists using the <li> tag?
You can nest lists by placing another <ul> or <ol> inside an <li> element. This creates a hierarchical structure, useful for sub-items or categories within a list.
How do you control the position of the list marker in the <li> tag?
You can control the position of the list marker (bullet or number) using the list-style-position property in CSS. The values can be inside (marker is inside the content) or outside (default, marker is outside the content).