What Is HTML List Tag?

HTML List Tag – In this blog post we will give you information about HTML Lists. What is the HTML List? How do I create a list in the HTML document? How many types of HTML List are. You will also find answers to questions.
To understand the HTML List , this topic is divided into different small parts. Whose list is given below or visit the video toturial on “HTML List Tag“.

Table of Content

  1. Introduction to the HTML List
  2. Name and usage of HTML elements used to create HTML list
  3. Types of HTML List
  4. HTML Unordered List
  5. HTML Ordered List
  6. HTML Definition List
  7. Nested HTML List
  8. what have you learned?

1. Introduction to HTMl List

Lists are used to make important text visible in Points in HTML document. List Elements are used to define the list.
Maintains the HTML List Document Structure and helps to display important information in Points. This makes our content meaningful and readable.
HTML List is very important. Lists are also used to create Navigation Menu in websites other than articles. HTML Lists are used to display Product Features in E-commerce Websites.

2. The names and usages of HTML elements used to create an HTML list.

Many elements are used to create an HTML list. Therefore, we are first telling the names and the use of the elements that are used to create an HTML List.
  • UL Element – The full name of the UL Element is the Unorder List. Unorder List Element is created by Bullet Lists or Unorder Lists.
  • The OL Element – OL Element’s full name is the Order List. Number or Order Lists are created by the Order List Element.
  • LI Element – The complete name of LI Element is List Item. Data item written by List Item Element is defined.
  • DL Element – The complete name of DL Element is Definition List. Definition Lists are defined by the Definition List Element.
  • DT Element – The full name of the DD Element is Definition Term. Definition Term is defined by Definition Term Element.
  • DD Element – The full name of the DD Element is Definition Description. Definition Description Element defines the definition of Definition Terms.

3. Types of HTML List

Many types of lists are used to display data in Points in HTML. Each type of list has its own special purpose and meaning. Below is the type of HTML List being mentioned.
  • Unordered List
  • Ordered List – OL List
  • Definition List – DL List
  • Nested List

Unordered List using HTML

Unordered List is defined by <ul> Tag. This type of list is used to show a type of information in no fixed order. Unordered List is also called Bulleted List. Because the Bullet takes place before List Items.

Try it

Copy the HTML code below to your Notepad, or by typing this code with your hands, save the file by htmllist1.html. And open it
HTML List -Types of HTML List - Ordered - Unordered - Attribute - Definition - Nested HTML List Tag With Example
Unordered List using HTML
When you run the HTML code written above in the browser, you will get this type of result.
Unordered List in HTML
Unordered List in HTML

4. The Type Attribute in Unordered List

In the Unordered List type Attribute is used to define Bullet Style. By “Default” in the list, “Circle” is used for List Items. But, with the help of type attribute, we can add 3 other types of List Style Type other than Circle.
  1. Circle
  2. Square
  3. Disc
  4. None

Look at it

We are explaining the list style type you mentioned above by the example. We are taking this example above for example. In this, using the Type attribute, we are setting square to List Style Type.
Type Attribute in Unordered List
Type Attribute in Unordered List

When you look at the above code in the browser, you will see some of this type of result.

type Attribute in html
Type Attribute in html
The way you set the List Style Type to the square. Similarly you can set disk, circle and none (no style no). You just have to type the back of Square instead of the Type Style and the List Style Type will change.

5. Ordered List using HTML

Ordered List is defined by <ol> Tag. And define the List item with <li> Element. Order List is also called Numbered List. OL is used to show one type of information in unit fixed order. The OL List is written before the Number Order in the list item.

Try it

To illustrate the order list, we have taken the above mentioned example. Copy the HTML code below to your Notepad, or by typing this code with your hands, save the file by htmllist2.html. And open it
Ordered List using html
Ordered List using html
When you look at the above code in the browser, you will see some of this type of result.
Ordered List in html
Ordered List in html

The Type Attribute in Ordered List

Type attribute in Ordered List is used to define List Style Type. By “Default” is used to list items for “List”. But, with the help of type attribute, we can add 5 other types of List Style Type in addition to Number.
  • Number (Default) – 1
  • Uppercase Letter – A
  • Lowercase Letter – a
  • Uppercase Roman Number – I
  • Lowercase Roman Number – i
  • None

Look at it

We are explaining all the list style types mentioned above by example. We are taking this example above for example. In this we set the List Style Type to A using Type Attribute.
Type attribute in Ordered List
Type attribute in Ordered List
When you look at the above code in the browser, you will see some of this type of result.
Type Attribute in Ordered List Example
Type Attribute in Ordered List Example
The way you set the List Style Type to A. Similarly 1, a, I, i and none can set (no style). You just have to type the rest of the A type and type the Style Type to be changed.

6. Definition List in HTML

Definition Lists are created to define a particular word or term. Definition list is defined by <dl> tag. Definition term is defined by <dt> and Definition Description is defined by <dd> Element.
Definition List is the most appropriate element to tell the meaning of a particular dictionary, Online Dictionaries, Glossary Definition. Because this List type is defined in the first Definition Term. Then the meaning of that term is enumerated. The texture of this list is like the dictionary.

Try it

Copy the HTML code below to your Notepad, or by typing this code with your hands, save the file by htmllist3.html. And open it.
Definition List in HTML
Definition List in HTML
When you look at the above code in the browser, you will see some of this type of result.
Definition List in HTML Example
Definition List in HTML Example

7. Nested HTML List

You have learned to define all kinds of Lists of HTML above. Now we will learn to create Nested List and HTML.
Nested List is not a type of HTML type. But, we’ve included it here as a 4th type. This is just like the purpose of simplifying the List Concept. So that the learners have the facility to learn.
Let’s now know what is Nested List? How is Nested List defined? And what’s the way to make Nested List?

Introduction to Nested HTML List 

Nested List means creating another list inside a list. In simple words, you can defify OL in a UL. And one can be UL Define in OL.
Try it
Copy the HTML code below to your Notepad, or by typing this code with your hands, save the file by htmllist4.html. And open it.
Nested HTML List
Nested HTML List
When you look at the above code in the browser, you will see some of this type of result.
Introduction to Nested HTML List
Introduction to Nested HTML List
By looking at the example above, you have come to understand how a Nested List is created. You may have noticed that by opening a list item, the second list has been defined in it. Then that list item has been closed. Nested Lists are made in the same way in HTML.

Using HTML List Tag

In HTML, lists are used to group a set of related items. There are three types of lists in HTML: unordered lists, ordered lists, and description lists. Lists are created using the `<ul>`, `<ol>`, and `<dl>` tags respectively. Here’s how they work:

Unordered Lists with example  `<ul>`:

An unordered list is a list of items where the order doesn’t matter. Each item in an unordered list is marked with a bullet point. To create an unordered list, you use the `<ul>` tag. Each list item is denoted by the `<li>` (list item) tag. For example:

Unordered Lists html example

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
This will create an unordered list with three items, each marked with a bullet point.

Ordered Lists with example `<ol>`:

An ordered list is a list of items where the order does matter. Each item in an ordered list is automatically numbered. To create an ordered list, you use the `<ol>` tag. Like unordered lists, list items are denoted by the `<li>` tag. For example:

Ordered Lists HTML example

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>
This will create an ordered list with three items, each numbered sequentially.

Description Lists `<dl>` with example:

A description list is a list of terms with their corresponding descriptions. Description lists are created using the `<dl>` tag. Each term is defined using the `<dt>` (description term) tag, and each description is defined using the `<dd>` (description details) tag. For example:

Description Lists HTML with example

<dl>
  <dt>Term 1</dt>
  <dd>Description 1</dd>
  <dt>Term 2</dt>
  <dd>Description 2</dd>
</dl>
This will create a description list with two terms and their corresponding descriptions.
Lists are essential for structuring content on web pages, making it easier for users to read and understand information.