Learn how to build and design websites with our tutorials.

HTML Lists Tutorial

View Tutorial Contents


There are three types of lists in HTML: un-ordered lists, ordered lists and description lists.


HTML un-ordered Lists

The <ul> tag defines an un-ordered list and the <li> tag defines each list item within the list.

Each list item will be marked with a bullet (small black circle) by default. You should always define your lists the way that you want them styled in your CSS.

The code example below shows you how to create an un-ordered list in HTML.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

</head>
<body>

<ul>
	<li>First Item</li>
	<li>Second Item</li>
	<li>Third Item</li>
</ul>

</body>
</html> 

The code example above outputs the list below.

You should define the style of the list item marker of an un-ordered list using CSS. It is also possible to use the type attribute of the <ul> tag to define the list item marker style of an un-ordered list but it is not a good practice and also is NOT supported in HTML5 so always do it using CSS

The possible values are:


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>

ul.disc{
list-style-type: disc;
}
ul.circle{
list-style-type: circle;
}
ul.square{
list-style-type: square;
}
ul.none{
list-style-type: none;
}

</style>
</head>
<body>

<ul class="disc">
	<li>First disc Item</li>
	<li>Second disc Item</li>
	<li>Third disc Item</li>
</ul>

<ul class="circle">
	<li>First circle Item</li>
	<li>Second circle Item</li>
	<li>Third circle Item</li>
</ul>

<ul class="square">
	<li>First square Item</li>
	<li>Second square Item</li>
	<li>Third square Item</li>
</ul>

<ul class="none">
	<li>First Item with no list item marker</li>
	<li>Second Item with no list item marker</li>
	<li>Third Item with no list item marker</li>
</ul>

</body>
</html> 


HTML ordered Lists

The <ol> tag defines an ordered list and the <li> tag defines each list item within the list. The list items will be marked with numbers.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

</head>
<body>

<ol>
	<li>First Item</li>
	<li>Second Item</li>
	<li>Third Item</li>
</ol>

</body>
</html> 

  1. list item
  2. list item
  3. list item

HTML definition Lists

The <dl> tag defines a definition list. The <dt> tag defines each definition term name and the <dd> tag defines the data description.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

</head>
<body>

<dl>
	<dt>Breakfast</dt>
	<dd>- Cereal</dd>
	<dt>Dinner</dt>
	<dd>- Steak</dd>
</dl>

</body>
</html> 

Breakfast
- Cereal
Dinner
- Steak