HTML List Item Tag and Element
HTML List Item Tag and Element
Here are the HTML List Item Tag and Element examples.
<li> List Item Element
The <li> list item element create list items. There are 3 types of list styles
- Ordered List
- Unordered List
- Definition List
<ol> Ordered List Element
The <ol> ordered list element creates a list of items in sequential order. Each list item appears numbered by default. The ordered list styles are: 1, a,A,i, I.
Example
<!DOCTYPE html>
<html>
<head>
<title>Ordered List</title>
</head>
<body>
<ol>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
<li>Grapes</li>
</ol>
<ol type="a">
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
<li>Grapes</li>
</ol>
</body>
</html>
<ul> Unordered List Element
The <ul> ordered list element creates a list of items in without sequential order. Each list item appears disk by default. The unordered list styles are: disk, square and circle.
Example
<!DOCTYPE html>
<html>
<head>
<title>Unordered List</title>
</head>
<body>
<ul>
<li>Milk</li>
<li>Tea</li>
<li>Sugar</li>
</ul>
<ul type="square">
<li>Milk</li>
<li>Tea</li>
<li>Sugar</li>
</ul>
</body>
</html>
Nested List in HTML
Nested list is called child list or list inside a list. These lists can be ordered or unordered list.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Nested List</title>
</head>
<body>
<ol>
<li>Apple
<ul type="square">
<li>Royal</li>
<li>Golden</li>
<li>HoneyCrisp</li>
</ul>
</li>
<li>Banana</li>
<li>Mango
<ol type="i">
<li>Green Mango</li>
<li>Yellow Mango</li>
</ol>
</li>
<li>Grapes</li>
</ol>
</body>
</html>
<dl> HTML Definition List
The HTML <dl> element represents a description list. It is enclosing a list of groups of terms <dt> and <dd>. Definition lists entries are listed like in a dictionary or encyclopedia.
Definition List makes use of following three group tags.
<dl> − Defines the start of the list
<dt> − Defines a definition title</dt>
<dd> − Defines a definition description</dd.
</dl> − Defines the end of the list
<!DOCTYPE html>
<html>
<head>
<title>Definition List</title>
</head>
<body>
<dl>
<dt>Mouse</dt>
<dd>Mouse is an input device. It is used to click and pointing. </dd>
<dt>HTML</dt>
<dd>HTML stands for Hyper Text Markup Language. </dd>
</dl>
</body>
</html>
HTML Formatting Tag and Elements
For more HTML Element List Item reference follow this link
Leave a Reply