<li> List item
A single item in a ul, ol or menu.
Each <li> is one item of a <ul>, <ol> or <menu>. Inside it you can put text, links, paragraphs or a whole second list. That last option is how nested lists work.
In an ordered list, value sets the number for that item. Close every li with </li>. Browsers can work out where an item ends, but leaving the tags off makes nesting errors far too easy.
The value attribute for ordered lists is defined with the li element in the WHATWG standard (opens in a new tab). Build lists inside lists in the Nested Lists lesson.
Syntax
<ul>
<li>Item</li>
</ul>When to use it
Every item in a ul, ol or menu is an <li>. The interesting part is what goes inside. A short item can be plain text or one link. A longer one, like a news teaser or a product in a page of search results, can hold a heading, an image and a couple of paragraphs. That is valid HTML, and screen reader users still hear how many results there are.
An li outside a list is invalid, and a grid of unrelated boxes is not a list. If you have a term followed by its explanation, dt and dd describe the relationship better.
The value attribute renumbers its own item and every item after it, which count on from the new number. So when a list continues from a previous page, set value once, on the first item. It must be a whole number, and inside a ul it does nothing.
Attributes
| Attribute | What it does |
|---|---|
value | In an ol, the number for this item. Following items continue from it. |
Live example
Edit the code and watch the preview.
<ol>
<li>First</li>
<li value="10">Jump to ten</li>
<li>Eleven</li>
</ol>More examples
Search results with rich items
One li per result, each with a linked heading, a thumbnail and a short summary. The ordered list keeps the ranking, and screen readers can say how many results there are.
<ol>
<li>
<h3><a href="/cats/">Cat care basics</a></h3>
<img src="cat.svg" alt="" width="100" height="75">
<p>Feeding, grooming and play for indoor cats.</p>
</li>
<li>
<h3><a href="/dogs/">Training a young dog</a></h3>
<img src="dog.svg" alt="" width="100" height="75">
<p>Short daily sessions that build good habits.</p>
</li>
</ol>Checklist with sub-steps
The nested ordered list lives inside an li, and type="a" labels the sub-steps with letters. Nest lists this way, with the inner list inside the item it explains.
<ol>
<li>Pack the bag
<ol type="a">
<li>Water bottle</li>
<li>Snacks</li>
<li>Rain jacket</li>
</ol>
</li>
<li>Check the weather</li>
<li>Tell someone your route</li>
</ol>Tip: Close every li, and take extra care in nested lists.
Browser support
Every browser and screen reader supports li. Its type attribute is obsolete, so style markers in CSS. The ::marker pseudo-element works in current browsers, at least for the color and size of bullets and numbers.
Accessibility
Screen readers can report a position like item 2 of 5 only when the li sits in a proper list. The W3C note Understanding Info and Relationships (opens in a new tab) explains why list structure has to exist in the markup.
Common mistakes
Wrong
<div>
<li>Home</li>
<li>About</li>
</div>Right
<ul>
<li>Home</li>
<li>About</li>
</ul>An li needs a ul, ol or menu parent.
Frequently asked questions
Can I use li without ul or ol?
No. An <li> has to be a child of <ul>, <ol> or <menu>. On its own it is invalid, and assistive technology will not present it as a list item. Need one line with a marker? Wrap it in a one-item list, or use a paragraph and style it with CSS.
What can I put inside an li element?
Any flow content goes in an <li>. Text, links, images, paragraphs, headings, a nested list and even a full card layout are all allowed, which is why so many menus and product grids are built from lists. The one rule: the li itself stays a direct child of its list element.
Practise it
- Lists (Module 2: Text)
- Nested Lists (Module 2: Text)
- Project: Recipe Card (Module 2: Text)
- Relative and Absolute Paths (Module 3: Links and Media)
- New Tabs and Page Jumps (Module 3: Links and Media)
- Project: Travel Postcard (Module 3: Links and Media)