li Tag in HTML
Introduction
A list item in various HTML lists is specified using the <li> tag. It can be found in a directory, a menu <MENU>, an unordered list <UL>, an ordered list <OL>, and more. A counter that is always rising is typically used to display list items in ordered lists. Unordered lists have bullet points to indicate list items.
Syntax
A block-level element in HTML is the <li> tag. Using the entire available width, it begins on a new line. With the list item placed in between the start and end tags, the <li> tag is written as <li></li>. The element needs to be inserted into a <ol> or <ul> tag in order to display each list item inside of those tags.
Though that element is presently only supported by the HTML 5.1 specification and the WHATWG HTML Living Standard, the <li> tag can also be used inside the <menu> element (but only when the element is in the toolbar state). The W3C HTML5 specification does not include this element.
<OL>
<li> list item1</li>
<li> list item2</li>
<li> list item3</li>
<li> list item4</li>
<\OL>
The <li> element has been utilized to define the list item within the <OL> or ordered list. Keep in mind that if the next list item or the list closure tag, such as </OL>, comes before the closing tag, </li> it is not required.
Ordered Lists
Numerical or alphabetical lists can be arranged either way. They begin with the <OL> tag. The <li> tag appears at the beginning of each of its items. By default, numerals are used to indicate them.
Example:
Consider the following example: we have a list of musical instrument names that we want to publish in an ordered list on our webpage.
<html>
<head>
<title>Lists</title>
</head>
<body>
<h2 class="title">Musical Instruments</h2>
<OL>
<li>Piano</li>
<li>Flute</li>
<li>Veena</li>
<li>Violin</li>
<li>Guitar</li>
<li>Drums</li>
</OL>
<script src="script.js"></script>
</body>
</html>
The web page's list of musical instruments in the example above is arranged in an ordered list. Every musical instrument has an initial number, which begins at 1 by default and increases by 1 for each additional item.
Unordered Lists
Unordered lists start with the tag <UL>. Every item has a <LI> tag at the beginning. By default, the list elements are indicated with bullets, which are tiny black circles.
They differ from ordered lists in that the latter contain bullet points, while the former have their contents arranged alphabetically or numerically.
Example:
Consider an unordered list of HTML tags as an example.
<html>
<head>
<title>Unordered Lists</title>
</head>
<body>
<h1 class="title">HTML tags</h1>
<ul>
<li><b>TITLE tag </b>- It contains the title of the page, which is to be displayed on the title bar of the browser.</li>
<li><b>HEADING tag </b>- It is a heading tag. Headings help in dividing pages into various sections.</li>
<li><b>PARAGRAPH tag </b>- It lets us create paragraphs that break the content into points. </li>
<li><b>ROOT ELEMENT tag </b>- HTML tag at the beginning of the webpage HTML file. </li>
</ul>
</body>
</html>
The purpose of the HTML tags is to be printed in the sample. Bold text is indicated using <b>…</b> tags. For every item on the list, the element <li> is used.
Attributes
Any global attribute can be used with the <li> tag. It has two specific attributes: value and type.
Type attribute
The type of items on the list is indicated by the <li> type attribute. The style of the list items' bullet points is likewise represented by it. The <OL> or <OU> tag contains it.
In a list, the following types are most frequently used:
For unordered lists:
1 - numbers
I - uppercase Roman numerals
i - lowercase Roman numerals
a - lowercase letters
A - uppercase letters
For ordered lists:
disc
square
circle
Note: HTML5 no longer supports the type attribute of the <LI> tag. Instead, CSS is used.
Example
<html>
<head>
<title>Lists</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1 class="title">Lists in HTML</h1>
<h2> Type Attribute </h2>
<UL type = 'square'>
<li>Data Structures
<ol type = 'I'>
<li>Stack</li>
<li>Queue</li>
<li>Linked List</li>
</ol>
</li>
<li>Algorithms
<ol type = 'I'>
<li>Binary Search Algorithm</li>
<li>Kruskal's Algorithm</li>
<li>Dijkstra's Algorithm</li>
</ol>
</li>
</UL>
<script src="script.js"></script>
</body>
</html>
The list with type = "square" in the example above begins with a solid square, and the sublist with type = "I" begins with Roman capital numerals. The counter value of the sublist increases with each element in the list.
Value attribute
It is only with sorted lists that the value attribute is used. This is the list's initial index number. When an element is added to the list, the number in the first entry is increased from the starting value specified in the value attribute. Inside the <li> tag is where it is written.
Example: Ordered List with Custom Value
Let us examine an answer key with distinct sections and sequential question numbers.
<html>
<head>
<title>Lists</title>
</head>
<body>
<h2 class="title">Answer Key</h2>
<h3>Section - A (MCQs)</h3>
<OL>
<li>a
<li>b
<li>c
<li>b
<li>d
<li>d
<li>c
<li>a
</OL>
<h3>Section - B (One-word Answers)</h3>
<OL>
<li value = "9">undertaking
<li>the
<li>nor
<li>whether
</OL>
<h3>Section - C (Short Answers)</h3>
<OL>
<li value = "13">Tallam is situated on the southern arm of a deep Bay of the Western Ghats.
<li>Sachin Tendulkar has played for more than 20 years for the country.
<li>The modern student understands the importance of Physical exercise.
</OL>
<script src="script.js"></script>
</body>
</html>
Since the questions in the example above are asked in order, we are defining the value in Section - B inside the <li> tag of the first element. The value of the subsequent element increases automatically. In a similar vein, value 13 for Section - C is being defined.
Applying Styles
The CSS properties that style <li> elements are list-style, list-style-image, list-style-position, and list-style-type.
Many times, these properties come with the parent element and are handed over to the <li> element; however, you can also declare them explicitly on the element as well.
Here are a few examples.
Roman Numerals
In this case Roman numerals are set with the setting of list-style-type property.
<!DOCTYPE html>
<title>Example</title>
<style>
ol { list-style-type: lower-roman; }
</style>
<ol>
<li>Cats</li>
<li>Dogs</li>
<li>Birds</li>
</ol>
Square Bullets
This is the bullet style of every list item that is distinguished by the list-style-type attribute in the square format.
<html>
<title>Example</title>
<style>
ul { list-style-type: square; }
</style>
<ul>
<li>Cats</li>
<li>Dogs</li>
<li>Birds</li>
</ul>
Position of List Item
Here, the list-style-position property is applied to define the position of the list items.
<!DOCTYPE html>
<title>Example</title>
<style>
ol.inside { list-style-position: inside; }
</style>
<p>Normal:</p>
<ol>
<li>Cats</li>
<li>Dogs</li>
<li>Birds</li>
</ol>
<p>With <code>list-style-position: inside;</code> applied:</p>
<ol class="inside">
<li>Cats</li>
<li>Dogs</li>
<li>Birds</li>
</ol>
What is the use of the <li> Tag?
HTML uses it to represent list elements in menus, unordered and ordered lists, and dir. The <OL> and <UL> tags are utilized to build lists; nevertheless, it is only the <LI> tag that is important to add items to them. We will always get an empty list with no entries in it in case of <LI> tags non-existence.
Example: Nested Lists
Let us look at a TO-DO list example. We will be using type and value attributes, lists, and sublists in this to-do list.
<html>
<head>
<title>Lists</title>
</head>
<body>
<h2 class="title">My TO-DO List</h2>
<h3>Section - A (MCQs)</h3>
<UL>
<LI>Today
<OL type = 'a'>
<LI>Get calculator fixed</LI>
<LI>Pay college fees</LI>
<LI>Make Calls
<UL type = 'square'>
<LI>Jonathan</LI>
<LI>Lara</LI>
<LI>Natali</LI>
<LI>Joseph</LI>
</UL>
</LI>
</OL>
</LI>
<LI>Tomorrow
<OL type = 'a'>
<LI value = "4">Write redesign feedback</LI>
<LI>Buy tools for Geometry class</LI>
<LI>Watch Budget news</LI>
</OL>
</LI>
<LI>Upcoming
<Ol type = 'a'>
<LI value="7">Attend Mark's Party</LI>
<LI>Participate in the coding contest</LI>
<LI>Call the fire department to schedule the training classes</LI>
</OL>
</LI>
</UL>
<script src="script.js"></script>
</body>
</html>
There are three areas on the TO-DO list: Today, Tomorrow, and Upcoming. An ordered list of types a is contained in each. There is also another unordered list of type squares under Make Calls. Additionally, we are using the value attribute to maintain the order of the task list. The value attribute is defined as 4 in Tomorrow and 7 in Upcoming.' is an entity number for the Apostrophe symbol.
Browser Support
All the major browsers support the <LI> tag.
| Browser | Version |
| Firefox | 1 |
| Chrome | 1 |
| Internet Explorer | 5.5 |
| Opera | 12.1 |
| Apple Safari | 3 |
Conclusion
Additionally, all of HTML's global attributes are supported by the <LI> element.rs will find it to be a great way to convert HTML and, finally, JPG.
The list elements of both sorted and unordered lists are defined by the <LI> … <LI> tag.
Its attribute value is one. It is only used to indicate the beginning list number in an ordered list.
Nearly all of the popular current browsers support the <LI> tag.