HTML li List Tag Tutorial with Examples

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>
Create Ordered List with <li> and <ol> Tags

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>
Set Start Number For Ordered List

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>
Create Unordered List with <li> and <ul> Tags

<li> Tag Attributes

<li> tag is a very simple tag that has only two attributes.

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 Lowercase Letter List Item with <li> Tag and type=a Attribute

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 Uppercase Letter List Item with <li> Tag

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 Lowercase Roman Numeral List Item with <li> Tag

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>
Create Uppercase Roman Numeral List Item with <li> Tag

Leave a Comment