HTML <li> Tag

What You’ll Learn

By the end of this tutorial, you’ll build semantic lists with <li> inside <ul> and <ol>.

What Is the <li> Tag?

The list item element (<li>) represents a single entry in an HTML list. It must be a direct or indirect child of a list container — typically <ul> (unordered) or <ol> (ordered) — and holds the text or content for one item.

Lists are one of the most common patterns on the web — feature lists, navigation menus, step-by-step instructions, and table-of-contents outlines all rely on <li>.

📝 Syntax

Place list content between opening and closing <li> tags inside a list parent:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Syntax Rules

• <li> must have a parent ul, ol, or menu.
• Self-closing syntax (<li />) is not valid in HTML.
• An li may contain flow content, including nested lists.
• Use ol when order matters; use ul when it does not.

⚖️ <li> in <ul> vs <ol>

The parent list type determines how browsers render each li:

⚖️ Semantic <li> vs <div>

Use real list markup instead of divs with bullet characters:

Examples Gallery

Ordered start values, unordered lists, nested items, navigation menus, and step-by-step instructions.

<ol start="5">
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
</ol>

<ul>
  <li>Item A</li>
  <li>Item B</li>
  <li>Item C</li>
</ul>

<ol>
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
</ol>

<ul>
  <li>Main Item 1
    <ul>
      <li>Subitem A</li>
      <li>Subitem B</li>
    </ul>
  </li>
  <li>Main Item 2</li>
</ul>

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<ol>
  <li>Open the application</li>
  <li>Click on the "File" menu</li>
  <li>Select "Save As"</li>
</ol>

♿ Accessibility

Semantic lists help assistive technology convey structure:

• Use ul/ol + li — not divs with manual bullet characters.
• Wrap nav in <nav> — when a list serves as site navigation.
• Keep list order meaningful — especially in ordered lists for instructions.
• Do not skip heading levels inside lists — use proper headings if sections need titles beyond the list itself.

💡 Best Practices