Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to add a list item in HTML?
To define list item in HTML we use <li> tag, it can be used inside ordered lists (<ol>), unordered lists (<ul>) and in menu lists (<menu>). In ordered list <ol>, the list items were displayed with numbers or letters. In unordered list <ul>, and in menu list <menu> the list items are displayed with bulletpoints.
Following are some examples of ordered and unordered lists −
Unordered Lists −
student 1
student 2
student 3
example 1
example 2
example 3
Ordered Lists −
student 1
student 2
student 3
example 1
example 2
example 3
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
Following example to add list item in HTML −
<!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
In this example we are adding a list in HTML by assigning values to the attributes of the <li> tag -
<!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
In here we are trying to create different types of lists –
<!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
In this example we are trying to create a nested list in HTML −
<!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
Now, we are creating a complex nested list in HTML −
<!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>
854 Views
