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 parent to several tags in HTML?
The HTML list of items is displayed using the <li> tag. It has to be encapsulated by a parent element. It is used to specify list items in various lists in HTML. It is utilized in menu <menu>, directory, ordered list <ol>, and unordered lists <ul>. In ordered lists, the list elements are typically shown with an ascending counter. The list items in unordered lists are presented as bullet points. The various types of lists are −
Ordered List
Unordered List
Definition List
HTML Ordered List
The numbered format of elements is displayed via the HTML ordered list or numbered list. For an ordered list, use the <ol> HTML tag. Using an ordered list, we can display items in numerical order, alphabetical order, or any other format where the importance of the order is highlighted.
Syntax
Following is the syntax for HTML ordered list
<ol> <li>..</li> </ol>
Example
Let’s look at the following example, where we are going to create a list using the ordered list.
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-family: verdana;
font-size: 15px;
}
</style>
</head>
<body style="background-color:#D5F5E3">
<h1 style="color:#DE3163; font-family:verdana">Ordered List</h1>
<p>start attribute</p>
<ol start=4>
<li>BMW</li>
<li>BUGATI</li>
<li>CHERON</li>
</ol>
<p>type attribute</p>
<ol type="I">
<li>AUDI</li>
<li>RS7</li>
<li>Q4</li>
</ol>
</body>
</html>
When we run the above code, it will generate an output consisting of the ordered list applied to different attributes displayed on the webpage.
HTML Unordered List
An unordered list is a collection of related items that have no special order or sequence. This list is created by using HTML <ul> tag. Each item in the list is marked with a bullet.
Syntax
Following is the syntax of HTML unordered list
<ul> <li>…</li> </ul>
Example
In the following example, we are going to create an unordered list on the webpage.
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-family: verdana;
font-size: 15px;
}
</style>
</head>
<body style="background-color:#D5F5E3">
<h1 style="color:#DE3163; font-family:verdana">Unordered List</h1>
<p>Unordered list with type="square"</p>
<ul type="square">
<li>ANT</li>
<li>BAT</li>
<li>CAT</li>
<li>DOG</li>
</ul>
<p>Unordered list with type="circle"</p>
<ul type="circle">
<li>ELEPHANT</li>
<li>FISH</li>
<li>GOAT</li>
<li>HEN</li>
</ul>
</body>
</html>
On running the above code, the output window will pop up, displaying the unordered list of different types displayed on the webpage.
HTML Definition List
Use the <dl> tag to add definition lists. The HTML <dl> tag is used for declaring a definition list. This tag is used within <dd> tag. A definition list is similar to other lists but in a definition list, each list item contains two entries − a term and a description.
Syntax
Following is the syntax for HTML definition list
<dl> <dt>…</dt> <dd>…</dd> </dl>
Example
Following is an example of how we are going to create a definition list on the webpage.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: verdana;
background-color: #D5F5E3;
}
h2 {
color: #DE3163;
}
</style>
</head>
<body>
<h2>Definition List</h2>
<dl>
<dt>CHERON</dt>
<dd>It's a Bucati product</dd>
<dt>Q4</dt>
<dd>It's a series in Audi</dd>
</dl>
</body>
</html>
When we run the above code, it will generate an output consisting of the definition list applied with CSS displayed on the webpage.
8 Views
