The `<li>` tag is used to create a list item in HTML, which is typically used to create ordered or unordered lists on a web page. In this tutorial, we’ll cover the basics of how to use the `<li>` tag and some of its attributes to create different types of lists.
Basic Syntax
The basic syntax for using the `<li>` tag is as follows:
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
In this example, we’ve used the `<ul>` tag to create an unordered list, which is a list that does not have a specific order or sequence. The `<li>` tag is used to create each list item within the unordered list. Each `<li>` tag contains the content that will be displayed in the list item.
Attributes
The `<li>` tag has a few different attributes that can be used to modify the appearance and behavior of the list item. Let’s take a look at some of the most commonly used attributes:
`value`
The `value` attribute is used to set the value of an item in an ordered list (`<ol>`). For example:
<ol>
<li value=”1″>List Item 1</li>
<li value=”2″>List Item 2</li>
<li value=”3″>List Item 3</li>
</ol>
In this example, we’ve used the `value` attribute to set the value of each list item in an ordered list.
`type`
The `type` attribute is used to specify the type of marker or bullet point that is displayed before each list item. This attribute is only used with unordered lists (`<ul>`). The possible values for this attribute are:
– `disc`: This is the default value and displays a small black circle before each list item.
– `square`: Displays a small square before each list item.
– `circle`: Displays a small circle before each list item.
For example:
<ul type=”square”>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
In this example, we’ve used the `type` attribute to set the type of marker that is displayed before each list item to a square.
`start`
The `start` attribute is used to specify the starting value of an ordered list. For example:
<ol start=”5″>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>
In this example, we’ve used the `start` attribute to set the starting value of the ordered list to 5, so the first list item will have a value of 5.
Conclusion
The `<li>` tag is an essential part of creating lists in HTML, and it can be used to create both ordered and unordered lists. By using the different attributes available, you can customize the appearance and behavior of your lists to fit your needs.
