HTML li Tag for Ordered List Items

Updated on 13 Feb 2012,
Published on 23 Jun 2008

HTML li tag is placed inside the HTML ol tag for rendering the list items for HTML ordered lists. In the previous article about HTML ol tag for ordered list, we discussed about the type and start attribute of HTML ol tag. Type and start attribute controls the starting point of number system associated with HTML ordered list. For example if type attribute consists of value as Arabic Numbers then it displays 1, 2 and 3 as list item index, if type="a" then it displays a, b, c and if type="i" then it shows i, ii and iii as list item value. Here we will discuss about the HTML li tag along with its attribute similar to the attributes of <ol> tag. HTML li tag is also used as paired tag <li> and </li> inside the <ol> and </ol> tag to generate an item.

HTML Examples:

You can see the live samples and examples of HTML Basic tags from the following links:

Example code for HTML ol and li tag

<ol>
    <li>item 1</li>
</ol>

HTML li tag Attributes

HTML li tag has 2 attributes associate with HTML ordered list ol tag

1. type: type attribute of HTML li tag also accepts values for Arabic Numbers, Letters and Roman Numerals as 1, a, A, i and I. This attribute changes the type of numbering in front of list item where ever type attribute is used in the li tags of HTML ordered list.

2. value: value attribute of HTML li tag changes consecutive numbering order of HTML ordered list. For example if you will set the value of value attribute as 10 for the second li tag, then it will display number 10 just after the first list item starting with value 1. Actually it changes the starting point of ordered list where value attribute is defined for HTML li tag.

Example of HTML li tag using type and value attributes

<ol>
    <li type="a">list item a</li>
    <li type="1">list item 2</li>
    <li type="a">list item c</li>
    <li type="i">list item iv</li>
    <li type="i" value="10">list item with attribute value="10"</li>
    <li>next item with value 11</li>
    <li>next item with value 12</li>
</ol>

Output:

HTML Ordered List Item Tag

Continue to next tutorial: HTML ul Tag for Unordered List Bullets to learn the HTML Unordered list formatting using ul tag.

Previous Tutorial

Next Tutorial