Web Development: HTML Element: li

HTML Element: li

The <li> element in HTML stands for “list item” and is used to define individual items within ordered (<ol>) and unordered (<ul>) lists. It helps structure content and create web page lists of items, steps, or options.

Syntax

The <li> element is used as a child element within ordered and unordered lists (<ol> and <ul>). Here’s a basic example of the syntax:

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

Example

Let’s explore a practical code snippet to understand how the <li> element is used in a real-world scenario:

<ol>
  <li>Start the engine.</li>
  <li>Put the car in gear.</li>
  <li>Accelerate gently.</li>
</ol>

In this example the order of the items is important. An ordered list (<ol>) therefore provides step-by-step car driving instructions. Each <li> element represents a specific action or item in the list.

Result

Attributes

The <li> element does have a couple of very relevant attributes:

type: indicates the numbering type and can be applied to the parent <ol> or <ul> element, or more specifically on the <li> element:
- a: lowercase letters
- A: uppercase letters
- i: lowercase Roman numerals
- I: uppercase Roman numerals
- 1: numbers
value: dictates the number of the list item. Subsequent items follow on accordingly.

Here’s our previous demo of the steps required to drive, with the type and value attributes added to make things slightly confusing!

Content

The <li> element accepts various types of content, including:

Text: Plain text or inline HTML elements such as links (<a>), images (<img>), or inline formatting elements (<strong>, <em>).
Nested Lists: <li> elements can contain other lists, allowing for the creation of nested lists within parent lists.

Styling Considerations

When styling the <li> element, consider the following best practices:

List Marker Styles: Customize the appearance of list markers (e.g., bullets for unordered lists, numbers for ordered lists) using CSS. You can change their size, color, and positioning.
Text Styling: Define font styles, text color, and spacing for the text within list items to ensure readability and consistency with your overall design.
Spacing: Control the spacing between list items using margin and padding. Adjusting these values can influence the visual separation between items and surrounding content.
Nested Lists: Apply indentation or other styling techniques to differentiate nested lists from parent lists.

Did You Know?

Lists created with <li> elements are versatile and commonly used for navigation menus, instructions, product features, and more.
The choice between ordered (<ol>) and unordered (<ul>) lists depends on whether you need a specific order (numbers) or not (bullets) for your list items.
You can use the value attribute with ordered lists (<ol>) to specify a starting value for the list numbering.