HTML reference

li

The <li> element represents one item in a list. It normally appears as a direct child of <ul>, <ol>, or <menu>.

What you will learn

  • What one li represents
  • How it relates to ul, ol, and menu
  • How to style list items without losing meaning

Basic examples

<ul>
  <li>Tea</li>
  <li>Coffee</li>
</ul>

<ol>
  <li>Choose a file</li>
  <li>Upload it</li>
</ol>

The parent determines whether the items are unordered, ordered, or actions. Use li for the item itself rather than placing arbitrary sibling text directly inside the list.

Nested lists

A nested list belongs inside an li when it describes subitems. This preserves the relationship between the parent item and its children.

Style with CSS

Use CSS properties such as list-style-type, list-style-position, and ::marker for presentation. Do not replace meaningful lists with unrelated elements just to remove bullets.

Related pages