Mastering the HTML `<li>` Element: Creating and Structuring Lists Effectively

Learn how to use the HTML `<li>` (list item) element to create and structure both ordered and unordered lists. This tutorial covers the semantic usage of `<li>` within `<ol>` and `

` elements, demonstrates customizing list numbering and starting values, and shows how to create nested lists for complex list structures.

---

---

Understanding the HTML <li> Element

What is the <li> Element?

The HTML <li> element (list item) defines a list item within an ordered list (<ol>), unordered list (<ul>), or menu list (<menu>). It's a fundamental building block for creating lists of any kind. In unordered lists, items are typically displayed with bullet points; in ordered lists, they are numbered or lettered.

Example:

HTML

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

The `value` Attribute (for Ordered Lists)

In ordered lists (<ol>), the value attribute within the <li> tag lets you specify the starting number for the list item. Subsequent items will increment from this value.

Example:

HTML

<ol>
  <li value="5">Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Browser Support

The <li> element is fully supported by all major web browsers.

Browser	Support
Chrome	Yes
Firefox	Yes
Internet Explorer	Yes
Safari	Yes
Edge	Yes
Opera	Yes

Styling Lists with CSS

You can use CSS to customize the appearance of lists. This includes changing bullet styles, numbering styles, spacing, and more.

Nested Lists

You can create nested lists (lists within lists) by placing <ul> or <ol> elements inside other list items. This is useful for creating hierarchical structures.

---