HTML provides the <li> tag which is used to created different types of lists. These lists can be ordered or in ordered and <li> tag is used as a child item for the <ol>, <ul> and <menu> tags which are explained below.
Create Ordered List with <li> and <ol> Tags
Ordered list and items can be created by using <ol> and <li> tags. <ol> tag is used to create the ordered list and <li> tag is used to add an item to this list. The ordered list means the items will be numbered by default and these numbers are will start from 1 by default and increase.
<html>
<body>
<h1>Ordered List with Number</h1>
<p>The ol element defines an ordered list:</p>
<ol>
<li>Turkey</li>
<li>USA</li>
<li>UK</li>
<li>Germany</li>
<li>Italy</li>
</ol>
</body>
</html>
Set Start Number For Ordered List
By default ordered list will start from the number 1 which is the first counting number. Alternatively, we can specify a start number explicitly from the provided value. We will use the value attribute of the <li> tag . In the following example, we will start the ordered list numbering from 3.
<html>
<body>
<h1>Ordered List with Number</h1>
<p>The ol element defines an ordered list:</p>
<ol>
<li value=3>Turkey</li>
<li>USA</li>
<li>UK</li>
<li>Germany</li>
<li>Italy</li>
</ol>
</body>
</html>
Create Unordered List with <li> and <ul> Tags
If we do not need and want to use numbers for the list items we should use the unordered list with the <ul> and <li> tags. The unordered list simply uses bullets as list item signs.
<html>
<body>
<h1>Unordered List with Number</h1>
<p>The ul element defines an unordered list:</p>
<ul>
<li>Turkey</li>
<li>USA</li>
<li>UK</li>
<li>Germany</li>
<li>Italy</li>
</ul>
</body>
</html>
<li> Tag Attributes
<li> tag is a very simple tag that has only two attributes which are defined below.
value attribute is used to set the start number of the list item.
type attribute is used to set the list type like lowercase letters, uppercase letters, numbers, lowercase Roman numerals, and uppercase Roman numerals. This attribute is deprecated with the new versions of HTML and CSS list-style-type property should be used instead.
Create Lowercase Letter List Item with <li> Tag and type=a Attribute
In the following example, we will create an ordered list where lowercase letters will be used to number each item. We will set each item attribute to type=a like below.
<!DOCTYPE html>
<html>
<body>
<h1>Ordered List with Lowercase Letters</h1>
<p>The ol element defines an ordered list:</p>
<ol>
<li type=a>Turkey</li>
<li type=a >USA</li>
<li type=a>UK</li>
<li type=a>Germany</li>
<li type=a>Italy</li>
</ol>
</body>
</html>
Create Uppercase Letter List Item with <li> Tag
We can also use uppercase letters in order to use in list items. We will use <li> tag type=A attribute.
<html>
<body>
<h1>Ordered List with Uppercase Letters</h1>
<p>The ol element defines an ordered list:</p>
<ol>
<li type=A>Turkey</li>
<li type=A >USA</li>
<li type=A>UK</li>
<li type=A>Germany</li>
<li type=A>Italy</li>
</ol>
</body>
</html>
Create Lowercase Roman Numeral List Item with <li> Tag
We can also use lowercase Roman numerals in order for list items. We will set the <li> tag attribute as type=i like below.
<html>
<body>
<h1>Ordered List with Lowercase Roman Numerals</h1>
<p>The ol element defines an ordered list:</p>
<ol>
<li type=i>Turkey</li>
<li type=i >USA</li>
<li type=i>UK</li>
<li type=i>Germany</li>
<li type=i>Italy</li>
</ol>
</body>
</html>
Create Uppercase Roman Numeral List Item with <li> Tag
We can use uppercase Roman numerals for the list items with the type=I <li> tag attribute.
<html>
<body>
<h1>Ordered List with Uppercase Roman Numerals</h1>
<p>The ol element defines an ordered list:</p>
<ol>
<li type=I>Turkey</li>
<li type=I >USA</li>
<li type=I>UK</li>
<li type=I>Germany</li>
<li type=I>Italy</li>
</ol>
</body>
</html>