HTML li value Property: List Item Value

HTML li value Property: Controlling List Item Numbering

The value attribute of the HTML <li> element allows you to specify the numeric value of a list item within an ordered list (<ol>). This is particularly useful when you need to alter the sequence of numbers in a list, either to restart the numbering or to jump to a specific number. This guide provides a comprehensive overview of the li value property, its syntax, and practical examples.

What is the li value Property?

The value attribute, specific to the <li> element within an ordered list, is used to set the current number of the list item. By default, list items in an ordered list are numbered sequentially starting from 1. The value attribute overrides this default behavior, allowing you to control the numbering sequence.

Purpose of the li value Property

The primary purpose of the li value property is to give web developers control over the numbering of list items in ordered lists. It enables:

• Restarting the numbering of a list from a specific number.
• Continuing a list from a specific number after an interruption (e.g., after inserting other content).
• Creating custom numbering sequences that are not strictly sequential.

Syntax

The syntax for using the value attribute in an <li> element is straightforward:

<li value="number">List item content</li>

Where "number" is an integer specifying the new numeric value for the list item.

Important points

• The value must be an integer.
• The value attribute only affects ordered lists <ol>.
• Subsequent list items will continue numbering from the set value.

Using the li value Property

Let’s explore how to use the value property with practical examples.

Example 1: Restarting List Numbering

This example demonstrates how to restart the numbering of an ordered list using the value attribute.

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li value="5">Item 5 (Numbering restarted)</li>
  <li>Item 6</li>
</ol>

Output:

1. Item 1
2. Item 2
3. Item 5 (Numbering restarted)
4. Item 6

Example 2: Continuing List Numbering After Interruption

In this example, we’ll see how to continue the numbering of a list after an interruption with other content.

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
</ol>

<p>Some interrupting text here.</p>

<ol start="3">
  <li>Item 3</li>
  <li>Item 4</li>
</ol>

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li value="5">Item 5 (Numbering restarted)</li>
  <li>Item 6</li>
</ol>

Output:

1. Item 1
2. Item 2

Some interrupting text here.

1. Item 3
2. Item 4

Example 3: Creating a Custom Numbering Sequence

This example shows how to create a custom numbering sequence using the value attribute to jump to specific numbers.

<ol>
  <li>Item 1</li>
  <li value="10">Item 10</li>
  <li value="20">Item 20</li>
  <li>Item 21</li>
</ol>

Output:

1. Item 1
2. Item 10
3. Item 20
4. Item 21

Example 4: Using value with Different List Types

The value attribute only affects the numbering in ordered lists (<ol>). In unordered lists (<ul>), the value attribute is not applicable and will not have any effect on the list items.

<ol>
  <li>Ordered Item 1</li>
  <li value="5">Ordered Item 5</li>
</ol>

<ul>
  <li>Unordered Item 1</li>
  <li value="5">Unordered Item 2 (value has no effect)</li>
</ul>

Output:

1. Ordered Item 1
2. Ordered Item 5

• Unordered Item 1
• Unordered Item 2 (value has no effect)

Real-World Applications of the li value Property

The li value property can be useful in scenarios such as:

• Legal Documents: When referencing specific clauses or sections that need to be numbered non-sequentially.
• Tutorials: When breaking a tutorial into sections and wanting to highlight specific steps with custom numbers.
• Outlines: When creating outlines with specific numbering conventions.

Browser Support

The value attribute for the <li> element is widely supported across all modern web browsers:

• Chrome
• Edge
• Firefox
• Safari
• Opera

Conclusion

The li value property is a useful feature for controlling the numbering of list items within ordered lists. It allows web developers to create custom numbering sequences, restart numbering, and continue lists after interruptions. By understanding and utilizing the value attribute, you can create more flexible and customized lists for your web content.