Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Add a List Item in HTML
Adding Ordered Unordered Lists
To define a list item in HTML, use the <li> tag. It can be used inside ordered lists (<ol>), unordered lists (<ul>) and menu lists (<menu>). In an ordered list <ol>, the list items are displayed with numbers or letters. In an unordered list <ul>, and a menu list <menu>, the list items are displayed with bullet points.
Syntax
Following is the syntax list item in HTML ?
<li>??? </li>
The list tag also supports the following additional attributes ?
| Attribute | Value & Description |
|---|---|
|
type |
AaIi1disc square circle Specifies the type of the list |
|
value |
Number Specifies the value of a list item |
Example: Adding Unordered List
This HTML code creates an unordered list with the heading "Rank". The list contains three items: India, Australia, and South Africa, each represented by the <li> tag within the <ul> tag.
<!DOCTYPE html>
<html>
<head>
<title>HTML li Tag</title>
</head>
<body>
<p>Rank</p>
<ul>
<li>India</li>
<li>Australia</li>
<li>South Africa</li>
</ul>
</body>
</html>
Example: Adding Ordered List
In this example, we add a list in HTML by assigning values to the attributes of the <li> tag. This HTML code creates an ordered list with the heading "The li value attribute." The first item, "Juice," is assigned a value of 200, while the remaining items are listed sequentially.
<!DOCTYPE html>
<html>
<body>
<h1>The li value attribute</h1>
<ol>
<li value="200">Juice</li>
<li>Watermelon Juice</li>
<li>Canbarey Juice</li>
<li>Lime Juice</li>
<li>Wine</li>
<li>Beer</li>
</ol>
</body>
</html>
Example: Styled HTML Lists
This HTML code creates ordered and unordered lists with custom styles. The ordered list includes items with different list styles, while the unordered list uses bullet points and squares for list items.
<!DOCTYPE html>
<html>
<body>
<h1>List type with CSS</h1>
<ol>
<li>lemon Juice</li>
<li style="list-style-type:lower-alpha">Watermelon Juice</li>
<li>Mango Juice</li>
</ol>
<ul>
<li>Coffee</li>
<li style="list-style-type:square">Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Example: Adding Nested List
This HTML code creates a nested list with the heading "List inside another list." The main list contains "Juices," "Vegetables" and "Deserts" as items.
<!DOCTYPE html>
<html>
<body>
<h1>List inside another list</h1>
<ul>
<li>Juices</li>
<li>Vegetables <ul>
<li>Onion</li>
<li>Tomatos</li>
<li>Curry Leaves</li>
</ul>
</li>
<li>Deserts</li>
</ul>
</body>
</html>
Example
Here, this code creates a nested list with the heading "List inside another list." The main list contains "Juices," and "Vegetables" as items.
<!DOCTYPE html>
<html>
<body>
<h1>List inside another list</h1>
<ul>
<li>Juices</li>
<li>Vegetables <ul>
<li>Onion</li>
<li>Tomatos</li>
<li>Curry Leaves</li>
<ul>
<li> Methi leaves</li>
<li> Coriander Leaves</li>
<li> Curry Leaves </li>
<li> Palal Leaves </li>
</ul>
</ul>
</li>
<li>Deserts</li>
</ul>
</body>
</html>
1K+ Views
