List items (<li>) html tag
In HTML web pages, the list <li> tag is used to manually create user-defined list items inside ordered list items (<ol>) and unordered list elements (<ul>) tags. Where each list item in the <li> tag represents a separate individual list text object in the list. Web developers use the list tag to create multiple list items in HTML web pages.
Basic structure of ordered and unordered list elements in HTML web pages.
Here in HTML web pages, web developers can create multiple list objects inside <ol> ordered list items and <ul> tags using <li> tags as per their web development needs.
Ordered list example in HTML web page.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Html Ordered List Tag</title>
</head>
<body>
<p><b><font size=”5″>Top World Countries</b></p></font>
<ol>
<li>India</li>
<li>Usa</li>
<li>Uk</li>
<li>Rusia</li>
<li>Japan</li>
</ol>
</body>
</html>
Unordered list example in HTML web page.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Html Unordered List Tag</title>
</head>
<body>
<p><b><font color=”red”><font size=”5″> World Top Speaking Language</b></p></font>
<ul>
<li>Chinese</li>
<li>Spanish</li>
<li>English</li>
<li>Arabic</li>
<li>Hindi</li>
</ul>
</body>
</html>
Advanced uses of list items in HTML web page.
Nested lists in HTML web page.
You can create nested list item objects in any HTML web page by creating unordered list item <ul> and <ol> ordered list item elements inside the list tag <li> element. As compared to normal list item, nested list items are useful for creating multiple list objects inside an existing list by placing already created list items in hierarchical list order.
Nested Lists Example in HTML Web Page.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Html Nested List Example</title>
</head>
<body>
<p><b><font size=”5″>Programming Language</b></p></font>
<ul>
<li>Web Development Programming
<ul>
<li>Web Design
<ul>
<li>Html</li>
<li>Css</li>
<li>Php</li>
<li>JavaScript</li>
</ul>
</li>
<li>High Level Language
<ul>
<li>C Language</li>
<li>C++ Programming</li>
</ul>
</li>
</ul>
</li>
<li>Web Development Framework
<ul>
<li>Css Framework
<ul>
<li>W3.css</li>
<li>Bulma Css</li>
<li>Bootstrap Css</li>
<li>Tailwind Css</li>
</ul>
</li>
<li>JavaScript Framework
<ul>
<li>Jquery</li>
<li>Node.js</li>
<li>Angular.js</li>
<li>Express.js</li>
</ul>
</li>
</ul>
</li>
<li>Computer Programming</li>
<ul>
<li>Pythpn</li>
<li>Java</li>
<li>C#</li>
<li>F#</li>
<li>Sql</li>
</ul>
</ul>
</body>
</html>
List item creation tips in HTML web page.
- <li> tag – You can define any type of list item element required inside unordered <ul> and ordered list <ol> items in any HTML web page.
- Nesting – To create list items or elements inside nested lists in any HTML web page, you can create ordered list item or unordered list item objects by using <ul> or <ol> tags as per requirement inside list item <li>.
- HTML Elements – You can manually create multiple HTML elements inside list item <li> tags to develop list items in any HTML web page. Remember, list item previews your simple web page text info in a list sequence and random order.
