The <li> Element
As defined in the HTML Living Standard, the <li> element represents a list item. It is a structural element used within unordered lists (<ul>), ordered lists (<ol>), or menus (<menu>).
- An item in an unordered list
- Another item with a bullet point
- First item in an ordered list
- Second item with a sequence number
<ul>
<li>Apples</li>
<li>Oranges</li>
</ul>
View HTML Living Standard: The li element
Strict Parentage
The <li> element must always be a child of a <ul>, <ol>, or <menu> element. Using list items outside of these parents is invalid HTML and breaks accessibility semantics.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
Lists are one of the most important structural cues for screen reader users. When text is marked up as <li>, assistive technology announces the number of items in the list (e.g., "List, 3 items"). This allows users to understand the scope of the information and navigate between items efficiently. Using dashes or numbers as plain text instead of proper list tags removes this programmatic context.
The value Attribute
When used within an ordered list (<ol>), the <li> element can take a value attribute. This attribute sets the ordinal value for the current list item and subsequent items.
- This item is number 10.
- This item follows and is number 11.
<ol>
<li value="100">High Score</li>
<li>Next Score</li>
</ol>
Best Practices
- Nesting: To create sub-lists, the new
<ul>or<ol>must be a child of an<li>element, not a direct child of the parent list. - Content: An
<li>can contain flow content, meaning you can put paragraphs, headings, or even images inside a list item if needed. - List Styling: Use the CSS
list-style-typeproperty to change bullets or numbering styles. Never use the<li>tag purely for indentation of non-list content.
A11y Tip: Navigation Lists
When using <li> for navigation menus, ensure the parent <ul> is wrapped in a <nav> element. This provides a double-layer of semantic clarity: the navigation landmark and the itemized list structure.