HTML Custom List Values -

HTML custom list values allow you to control the numbering of individual items in an ordered list. By using the value attribute on the <li> element, you can assign a specific number to a list item and change the numbering sequence that follows it.

Custom list values are useful for numbered instructions, rankings, chapters, and lists that need to continue from a particular number. HTML also provides the start attribute to specify the initial number of an ordered list and the type attribute to change its numbering style.

What Are Custom List Values in HTML?

Custom list values are numbers assigned to individual list items in an ordered list. The <li> element supports the value attribute, which specifies the item’s ordinal value.

Unlike the start attribute, which sets the initial number for an entire list, the value attribute changes the numbering at a particular list item.

HTML Custom List Values Syntax

<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li value="5">JavaScript</li>
    <li>React</li>
</ol>

In this example, HTML is numbered 1, CSS is numbered 2, JavaScript is numbered 5, and React is numbered 6.

HTML Custom List Values Example

The following example demonstrates how to use the value attribute in a complete HTML document.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Custom List Values</title>
</head>
<body>

    <h1>HTML Custom List Values</h1>

    <h2>Web Development Topics</h2>

    <ol>
        <li>HTML Basics</li>
        <li>HTML Elements</li>
        <li value="5">HTML Attributes</li>
        <li>HTML Forms</li>
        <li>HTML Tables</li>
    </ol>

</body>
</html>

The browser displays the list with numbering 1, 2, 5, 6, and 7. When the browser encounters value="5", it assigns the number 5 to that list item and continues numbering subsequent items from that value.

HTML List Value Attribute

The value attribute is used with the <li> element to set an item’s number in an ordered list.

Attribute	Element	Description	Example
`value`	`<li>`	Sets the ordinal value of an individual list item.	`<li value="5">HTML</li>`
`start`	`<ol>`	Specifies the starting number of the entire list.	`<ol start="5">`
`reversed`	`<ol>`	Displays list numbering in descending order.	`<ol reversed>`
`type`	`<ol>`	Specifies the numbering style.	`<ol type="A">`

The value attribute accepts an integer. Its numbering effect is intended for ordered lists, not unordered lists.

Using Custom Values with Reversed Lists

You can combine the value attribute with the reversed attribute to customize the numbering of a descending ordered list.

<ol reversed>
    <li>First Item</li>
    <li>Second Item</li>
    <li value="5">Third Item</li>
    <li>Fourth Item</li>
</ol>

Here, the third item is explicitly assigned the number 5. Because the list is reversed, subsequent numbering continues downward, so the fourth item receives 4.

Custom List Values with Different Numbering Styles

The value attribute can also be used when an ordered list displays letters or Roman numerals. The assigned integer is converted into the corresponding marker style.

<ol type="A">
    <li>Introduction</li>
    <li>HTML Basics</li>
    <li value="5">HTML Lists</li>
    <li>HTML Tables</li>
</ol>

The list displays A, B, E, and F. Although the value attribute uses the integer 5, the browser displays the corresponding uppercase letter, E.