HTML <li> Element

Publish in HTML Tutorial el 24/05/2025 16:33

The <li> (List Item) element is used to represent an item in a list. It must be contained within a parent element: either an <ol> (ordered list), <ul> (unordered list), or <menu> (menu list). The <li> element is fundamental for creating structured content in HTML documents.

Basic Syntax

Here's how the basic syntax of an <li> element looks:

When rendered, this will appear as:

First item
Second item
Third item

Attributes

The <li> element supports several attributes:

value (for <ol> only): Sets the number of the list item
type (deprecated): Was used to set the numbering/bullet type

Examples

Example 1: Basic Unordered List

A simple unordered list with default bullet points:

Play Code

      <ul>
        <li>Apples</li>
        <li>Bananas</li>
        <li>Oranges</li>
      </ul>

Example 2: Ordered List with Value Attribute

An ordered list where we manually set the numbering using the value attribute:

Play Code

      <ol>
        <li value="10">Tenth item</li>
        <li>Eleventh item (auto-incremented)</li>
        <li value="20">Twentieth item</li>
        <li>Twenty-first item</li>
      </ol>

Example 3: Nested Lists

Lists can be nested inside other list items to create hierarchical structures:

Play Code

      <ul>
        <li>Fruits
          <ul>
            <li>Apples</li>
            <li>Bananas</li>
          </ul>
        </li>
        <li>Vegetables
          <ul>
            <li>Carrots</li>
            <li>Broccoli</li>
          </ul>
        </li>
      </ul>

Example 4: Dynamic List with JavaScript

Creating a list dynamically using JavaScript:

Play Code

      <ul id="dynamicList"></ul>
      <script>
        const items = ['First', 'Second', 'Third'];
        const list = document.getElementById('dynamicList');
        
        items.forEach(item => {
          const li = document.createElement('li');
          li.textContent = item;
          list.appendChild(li);
        });
      </script>

Example 5: Interactive List with JavaScript

A list with interactive items that respond to clicks:

Play Code

      <ul id="interactiveList">
        <li>Click me!</li>
        <li>No, click me!</li>
        <li>I'm the best to click!</li>
      </ul>
      <script>
        const listItems = document.querySelectorAll('#interactiveList li');
        listItems.forEach(item => {
          item.addEventListener('click', () => {
            item.style.color = 'red';
            item.textContent += ' (Clicked!)';
          });
        });
      </script>

Tips and Tricks

You can style list items individually using CSS classes or IDs
To remove default bullets in unordered lists, use list-style-type: none in CSS
List items can contain any HTML elements, not just text
For semantic correctness, always wrap <li> elements in a proper parent (<ul>, <ol>, or <menu>)
Use CSS counters for advanced numbering schemes in ordered lists