HTML list

To better decorate the text, Or to mark line list HTML List tag is used inside the HTML code. There are 3 types of HTML List such as unordered list (<ul>), ordered list (<ol>), and Description List(<dl>).

To teach you more thoroughly, we have some examples available, after seeing which you will find out how you can use List. Let’s know

Unordered List HTML

To create an unordered List, the <ul> tag has to be used. And for the list to be made inside it has to use the <li> tag. This list will be made with circles by default. Below you can see the whole example.

<ul>
	<li>List 1</li>
	<li>List 2</li>
	<li>List 3</li>
	<li>List 4</li>
	<li>List 5</li>
	<li>List 6</li>
	<li>List 7</li>
	<li>List 8</li>
</ul>

But if you want to use another marker instead of a circle, then for that you will have to use the list-style-type property.

/ ***** Circle HTML list ***** /

<ul style=”list-style-type:circle;”>
	<li>List 1</li>
	<li>List 2</li>
	<li>List 3</li>
	<li>List 4</li>
	<li>List 5</li>
	<li>List 6</li>
	<li>List 7</li>
	<li>List 8</li>
</ul>

/ ***** Square HTML list ***** /

<ul style=”list-style-type:square;”>
	<li>List 1</li>
	<li>List 2</li>
	<li>List 3</li>
	<li>List 4</li>
	<li>List 5</li>
	<li>List 6</li>
	<li>List 7</li>
	<li>List 8</li>
</ul>

Remove List Marker
But if you want to remove the marker of your list, then for that you have to put list-style-type: none.

<ul style=”list-style-type:none;”>
	<li>List 1</li>
	<li>List 2</li>
	<li>List 3</li>
	<li>List 4</li>
	<li>List 5</li>
	<li>List 6</li>
	<li>List 7</li>
	<li>List 8</li>
</ul>

Ordered List HTML

Then comes the Ordered List. For which the <ol> tag is used, and for the ordered list item, the <li> tag is used. Take care Ordered List always starts with numbers by default.

<ol>
	<li>List 1</li>
	<li>List 2</li>
	<li>List 3</li>
	<li>List 4</li>
	<li>List 5</li>
	<li>List 6</li>
</ol>

There are several types of Ordered List markers, such as if you want to mark your list with a number, or you can use letters (ABC).

/ ***** Uppercase Letters ***** /

<ol type=”A”>
	<li>List 1</li>
	<li>List 2</li>
	<li>List 3</li>
	<li>List 4</li>
	<li>List 5</li>
	<li>List 6</li>
</ol>

/ ***** Lowercase Letters *****/

<ol type=”a”>
	<li>List 1</li>
	<li>List 2</li>
	<li>List 3</li>
	<li>List 4</li>
	<li>List 5</li>
	<li>List 6</li>
</ol>

/ ***** Roman Numbers ***** /

<ol type=” I “>
	<li>List 1</li>
	<li>List 2</li>
	<li>List 3</li>
	<li>List 4</li>
	<li>List 5</li>
	<li>List 6</li>
</ol>

If you want to run your ordered list from the middle of the number, then for that you have to use this syntax.

<ol type = “1” start = “20” >
	<li>List 1</li>
	<li>List 2</li>
	<li>List 3</li>
	<li>List 4</li>
	<li>List 5</li>
	<li>List 6</li>
</ol>
Live Demo Example Of HTML List

HTML Description List

A description list is very different from the <ul> list, and <li> list. To make this, has to start with <dl>, along with 2 more tags are used like <dt> tag and <dd> tag.

<dl>
	<dt>List One</dt>
	<dd>This Is My List One</dd>
	<dt>List Two</dt>
	<dd>This Is My List Two</dd>
</dl>

Create Horizontal Menu List

If you want to create a navigation menu bar for your website, then for that you have to apply CSS property.

<ul>
	<li>List 1</li>
	<li>List 2</li>
	<li>List 3</li>
	<li>List 4</li>
	<li>List 5</li>
	<li>List 6</li>
</ul>

/ ***** CSS Code ***** /

ul {
	list-style-type: none;
}
li {
	float: left; —— This will horizontal menu from vertical.
	color: red;
	padding: 20px;
}
li:hover {
	cursor:pointer;
}

Frequently Asked Questions

We have answers to some questions that people search on the Internet everyday. Let us know what are those questions and what are their answers.

What is list HTML?

To mark the line of text list is used

What is the order list?

The order list is that in which you can mark your line with a number, alphabet letter.

How do I make a list in HTML?

By using <ul>, <ol>, and <dl> tags you can make listing.

How do you create a table in HTML?

The <tr>, <th>, <td> tags are used to create the table.

What is div in HTML?

The div is like a box inside which you have to set your elements.

Note: All the examples shown in this article, we have tested before, you can use these examples without any difficulty.

Related: Basic 8 Syntax Of CSS Hover Effect