An HTML List allows you to organize data on web pages into an ordered or unordered format to make the information easier to read and visually appealing. HTML Lists are very helpful for creating structured, accessible content in web development.
- HTML lists organize content using tags like <ul>, <ol> & <li>.
- They improve readability by presenting data in a structured format.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML</title>
</head>
<body>
<h2>Welcome To GeeksforGeeks Learning</h2>
<h5>List of available courses</h5>
<ul>
<li>Data Structures & Algorithm</li>
<li>Web Technology</li>
<li>Aptitude & Logical Reasoning</li>
<li>Programming Languages</li>
</ul>
<h5>Data Structures topics</h5>
<ol>
<li>Array</li>
<li>Linked List</li>
<li>Stacks</li>
<li>Queues</li>
<li>Trees</li>
<li>Graphs</li>
</ol>
</body>
</html>
HTML (HyperText Markup Language) uses tags to define and structure elements on a webpage. Each tag tells the browser how to display the content — such as text, images, links, or layouts.
| Tag | Description |
|---|
| <ul> | Defines an unordered list. |
| <ol> | Defines an ordered list. |
| <li> | Defines a list item. |
| <dl> | Defines a description list. |
| <dt> | Defines a term in a description list. |
| <dd> | Details the term in a description list. |
Types of HTML Lists
There are three main types of lists in HTML
1. Using HTML Unordered List or Bulleted List
- Unordered lists are ideal for scenarios where the sequence of the items is not important.
- The unordered list items are marked with bullets, also known as bulleted lists.
- An unordered list starts with the <ul> tag, and each list item begins with the <li> tag.
Attribute: This tag contains two attributes which are listed below:
- compact: It will render the list smaller.
- type: It specifies which kind of marker is used in the list.
HTML
<!DOCTYPE html>
<html>
<body>
<h2>Grocery list</h2>
<ul>
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ul>
</body>
</html>
Syntax:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>2. Using HTML Ordered List
Ordered lists are used when the items need to follow a specific sequence.
In an ordered list, all list items are marked with numbers by default. An ordered list starts with the <ol> tag, and each list item begins with the <li> tag.
Attributes:
- compact: It defines the list should be compacted (compact attribute is not supported in HTML5. Use CSS instead.).
- reversed: It defines that the order will be descending.
- start: It defines from which number or alphabet the order will start.
- type: It defines which type(1, A, a, I, and i) of the order you want in your list of numeric, alphabetic, or roman numbers.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML</title>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<h3>HTML ol tag</h3>
<p>reversed attribute</p>
<ol reversed>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
<p>start attribute</p>
<ol start="5">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
<p>type attribute</p>
<ol type="i">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
</body>
</html>
Syntax:
<ol>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ol>
3. Using HTML Description List
A description list is a list of terms, with a description of each term. Description lists are less common but very useful for definitions, glossaries, or any other key-value pairs of items.
- The <dl> tag defines the description list, the <dt> tag defines the term name, and the <dd> tag describes each term.
- Here, <dt> (description term) is used for the term being defined, and <dd> (description details) is used for the description.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML</title>
</head>
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- 500 gms</dd>
<dt>Milk</dt>
<dd>- 1 ltr Tetra Pack</dd>
</dl>
</body>
</html>
Syntax:
<dl>
<dt>Item 1</dt>
<dd>Description of Item 1 </dd>
<dt>Item 2</dt>
<dd>Description of Item 2</dd>
</dl>
How many different types of lists provided in HTML?
Explanation:
There are 3 types of lists in HTML:
1)Ordered List or Numbered List (ol)
2)Unordered List or Bulleted List (ul)
3)Description List or Definition List (dl)
Choose the correct statement about Unordered List:
-
It lists the element same as that of paragraph
-
It follows only numeric order(i.e 1, 2, 3...)
-
It don't follow any order
-
Explanation:
Unordered list doesn't follow any order, it uses different symbols to list the items.
How does the descriptive list contain the items:
-
It contains the items in a paragraph format.
-
It contains a term and associated description about that term
-
It don't follow any order
-
Explanation:
It has a term and then it follow by its associated description.
What will the following syntax do:
<ul>
<li> </li>
</ul>
-
List the items of unordered list in circle format.
-
List the items of unordered list in square format.
-
List the items of unordered list by default format(which is disk).
-
Explanation:
It will List the items of unordered list in disc format, as this is the default style in unordered list.
Tag to be use for creating an Ordered list are:
Explanation:
Tags used are < ol > to start the ordered list, and < /ol > to close the ordered list.
Which of the three lists should be use for listing the details of students, describing his/her behaviour, nature in class according to their names?
-
-
-
-
Ordered List with alphabetic order
Explanation:
As we have to list the details, i.e (description of students), So it is best to use Descriptive list
Quiz Completed Successfully
Your Score : 2/6
Accuracy : 0%
Login to View Explanation
1/6
1/6
< Previous
Next >
Explore
HTML Basics
Structure & Elements
Lists
Visuals & Media
Layouts & Designs
Projects & Advanced Topics
Tutorial References