Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to add a list item in HTML?
To add 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, the list items are displayed with numbers or letters. In an unordered list and menu list, the list items are displayed with bullet points.
Syntax
Following is the syntax for the list item tag in HTML −
<li>Content</li>
The <li> tag must be placed inside a list container like <ul>, <ol>, or <menu>.
Attributes
The <li> tag supports the following specific attributes −
| Attribute | Value | Description |
|---|---|---|
| type | A | a | I | i | 1 | disc | square | circle | Specifies the type of list marker (deprecated in HTML5, use CSS instead) |
| value | number | Specifies the value of a list item (only for ordered lists) |
Adding Unordered List Items
Unordered lists use <ul> to create a bulleted list. Each <li> item appears with a bullet point by default.
Example
Following example creates an unordered list with three countries −
<!DOCTYPE html>
<html>
<head>
<title>Unordered List Items</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Top Cricket Playing Nations</h2>
<ul>
<li>India</li>
<li>Australia</li>
<li>South Africa</li>
<li>England</li>
</ul>
</body>
</html>
The output displays a bulleted list −
Top Cricket Playing Nations ? India ? Australia ? South Africa ? England
Adding Ordered List Items
Ordered lists use <ol> to create a numbered list. The value attribute can be used to change the starting number of a specific list item.
Example
Following example shows an ordered list with a custom starting value −
<!DOCTYPE html>
<html>
<head>
<title>Ordered List with Value Attribute</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Popular Beverages</h2>
<ol>
<li value="10">Orange Juice</li>
<li>Watermelon Juice</li>
<li>Cranberry Juice</li>
<li>Lime Juice</li>
<li>Coffee</li>
</ol>
</body>
</html>
The output shows numbering starting from 10 −
Popular Beverages 10. Orange Juice 11. Watermelon Juice 12. Cranberry Juice 13. Lime Juice 14. Coffee
Styling List Items with CSS
List items can be styled using CSS properties like list-style-type to change the appearance of bullets or numbering.
Example
Following example demonstrates different list styles applied to individual items −
<!DOCTYPE html>
<html>
<head>
<title>Styled List Items</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Mixed List Styles</h2>
<ol>
<li>Lemon Juice</li>
<li style="list-style-type: lower-alpha">Watermelon Juice</li>
<li style="list-style-type: upper-roman">Mango Juice</li>
</ol>
<ul>
<li>Coffee</li>
<li style="list-style-type: square">Tea</li>
<li style="list-style-type: circle">Milk</li>
</ul>
</body>
</html>
The output displays different numbering and bullet styles −
Mixed List Styles 1. Lemon Juice a. Watermelon Juice I. Mango Juice ? Coffee ? Tea ? Milk
Creating Nested Lists
List items can contain other lists, creating nested or multi-level structures. Simply place a new <ul> or <ol> inside an <li> element.
Example
Following example shows a nested list structure with multiple levels −
<!DOCTYPE html>
<html>
<head>
<title>Nested List Items</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Food Categories</h2>
<ul>
<li>Beverages
<ul>
<li>Hot Drinks
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Hot Chocolate</li>
</ul>
</li>
<li>Cold Drinks
<ul>
<li>Juice</li>
<li>Soda</li>
</ul>
</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Onion</li>
<li>Tomatoes</li>
<li>Leafy Greens
<ul>
<li>Spinach</li>
<li>Lettuce</li>
<li>Kale</li>
</ul>
</li>
</ul>
</li>
<li>Desserts</li>
</ul>
</body>
</html>
The output shows a hierarchical structure with proper indentation −
Food Categories
? Beverages
? Hot Drinks
? Coffee
? Tea
? Hot Chocolate
? Cold Drinks
? Juice
? Soda
? Vegetables
? Onion
? Tomatoes
? Leafy Greens
? Spinach
? Lettuce
? Kale
? Desserts
Menu Lists
The <menu> element can also contain list items, though it's primarily used for interactive menus and toolbars.
Example
<!DOCTYPE html> <html> <head> <title>Menu List Items</title> </head> <body style="font-family: Arial, sans-serif; padding: 10px;">
2K+ Views
