HTML lists are simple to use and very useful when you want to enumerate items. In this article, you will learn how to create different types of lists: unordered, ordered, nested lists, menu, drop-down lists, etc.
Unordered HTML ListTo use unordered lists in an HTML script you should use the <ul> tag; the <li> tag represents each of item list.
<ul>
<li>phpbuilder.com</li>
<li>devx.com</li>
<li>htmlgoodies.com</li>
</ul>You can also choose list item marker, by setting the CSS list-style-type property, such as disc (default), circle, square or none. In the example below, you will see different unordered marked lists:
<!DOCTYPE html>
<html>
<body>
<h4>Different unordered HTML lists</h4>
<ul>
<li>phpbuilder.com</li>
<li>devx.com</li>
<li>htmlgoodies.com</li>
</ul>
<ul style="list-style-type:circle">
<li>phpbuilder.com</li>
<li>devx.com</li>
<li>htmlgoodies.com</li>
</ul>
<ul style="list-style-type:square">
<li>phpbuilder.com</li>
<li>devx.com</li>
<li>htmlgoodies.com</li>
</ul>
<ul style="list-style-type:none">
<li>phpbuilder.com</li>
<li>devx.com</li>
<li>htmlgoodies.com</li>
</ul>
</body>
</html> The output of the above code is:
Ordered HTML ListTo use unordered list in a HTML script you should use the <ol> tag; the <li> tag represents each of item list.
There are a few types of markers that can be used on the list items:
<!DOCTYPE html>
<html>
<body>
<h4>Different ordered HTML lists</h4>
<ol>
<li>phpbuilder.com</li>
<li>devx.com</li>
<li>htmlgoodies.com</li>
</ol>
<ol start="3">
<li>phpbuilder.com</li>
<li>devx.com</li>
<li>htmlgoodies.com</li>
</ol>
<ol start="4" reversed>
<li>phpbuilder.com</li>
<li>devx.com</li>
<li>htmlgoodies.com</li>
</ol>
<ol type="a">
<li>phpbuilder.com</li>
<li>devx.com</li>
<li>htmlgoodies.com</li>
</ol>
<ol type="A">
<li>phpbuilder.com</li>
<li>devx.com</li>
<li>htmlgoodies.com</li>
</ol>
<ol type="i">
<li>phpbuilder.com</li>
<li>devx.com</li>
<li>htmlgoodies.com</li>
</ol>
<ol type="I">
<li>phpbuilder.com</li>
<li>devx.com</li>
<li>htmlgoodies.com</li>
</ol>
</body>
</html> The output of the above code is:
Using a Custom Bullet ImageThe list-style-image property allows you to use a custom image for your bullet.
list-style-image: url('arrow.gif'); 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
li {
list-style-image: url('arrow.gif');
}
</style>
</head>
<body>
<h4>Different ordered HTML lists</h4>
<ol>
<li>phpbuilder.com</li>
<li>devx.com</li>
<li>htmlgoodies.com</li>
</ol>
</body>
</html> HTML also supports description lists; a description list is a list of terms that contains a description of each term. To define a description list you should use the <dl> tag, the <dt> tag defines the term (name), and the <dd> tag is used for description of each term, as you will see in the below example:
<!DOCTYPE html>
<html>
<body>
<h4>Description HTML list</h4>
<dl>
<dt>HTML Goodies</dt>
<dd>- HTML 5</dd>
<dd>- HTML & GRAPHICS TUTORIAL</dd>
<dd>- Beyond HTML </dd>
<dt>PHPbuilder</dt>
<dd>- ARCHITECTURE</dd>
<dd>- DATABASES</dd>
<dd>- FUNCTIONS</dd>
<dd>- TOOLS</dd>
</dl>
</body>
</html> In the sample of code below, you will see an example of nested lists:
<!DOCTYPE html>
<html>
<body>
<h4>Nested HTML lists</h4>
<ul>
<li>HTML Goodies</li>
<ul>
<li>HTML 5</li>
<li>HTML & GRAPHICS TUTORIAL</li>
<li>Beyond HTML </li>
</ul>
<li>PHPbuilder
<ul>
<li>ARCHITECTURE</li>
<li>DATABASES</li>
<li>FUNCTIONS</li>
<li>TOOLS</li>
</ul>
</li>
<li>Devx</li>
<ul>
<li>.NET</li>
<li>JAVA</li>
<li>C++</li>
<li>Mobile</li>
</ul>
</ul>
</body>
</html> Creating a menu is a popular way to style a horizontal HTML list, as you may see in the next example:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ff3000;
border-style: dashed;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: right;
padding: 20px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#HTMLGoodies">HTMLGoodies</a></li>
<li><a href="#Devx">Devx</a></li>
<li><a href="#PHPbuilder">PHPbuilder</a></li>
</ul>
</body>
</html> The <select> tag is used to create a drop-down list. We also need the <option> tags inside the <select> element to define the available options in the list.
<!DOCTYPE html>
<html>
<body>
<select name="websites">
<option value="HTMLGoodies">HTMLGoodies</option>
<option value="PHPbuilder">PHPbuilder</option>
<option value="Devx">Devx</option>
</select>
</body>
</html> The <option> tag defines an option in a select list and may be a part of the <select> or <datalist> element.
HTML <datalist> TagThe <datalist> tag is new in HTML5 and specifies a list of pre-defined options for an <input> element. Users will see a drop-down list of pre-defined options as they input data and provide an auto-completion feature on the <input> elements.
An <input> element with pre-defined values in a <datalist>:
<!DOCTYPE html>
<html>
<body>
<h4>Datalist</h4>
<input list="websites">
<datalist id="websites">
<option value="PHPbuilder.com">
<option value="HTMLGoodies">
<option value="Devx">
</datalist>
</body>
</html> This article has provided a few examples of different types of HTML lists.
The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.
Property of TechnologyAdvice. © 2025 TechnologyAdvice. All Rights Reserved
Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.
