SHARE

Exploit the Versatility of HTML Lists

Written By

Jun 19, 2017

4 minute read

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 List

To use unordered lists in an HTML script you should use the

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:

Different unordered HTML lists

phpbuilder.com
devx.com
htmlgoodies.com
phpbuilder.com
devx.com
htmlgoodies.com
phpbuilder.com
devx.com
htmlgoodies.com
phpbuilder.com
devx.com
htmlgoodies.com

Ordered HTML List

To use unordered list in a HTML script you should use the

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:

Different ordered HTML lists

phpbuilder.com
devx.com
htmlgoodies.com
phpbuilder.com
devx.com
htmlgoodies.com
phpbuilder.com
devx.com
htmlgoodies.com
phpbuilder.com
devx.com
htmlgoodies.com
phpbuilder.com
devx.com
htmlgoodies.com
phpbuilder.com
devx.com
htmlgoodies.com
phpbuilder.com
devx.com
htmlgoodies.com

Using a Custom Bullet Image

The 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 Description Lists

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

tag defines the term (name), and the

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>

Description HTML list

HTML Goodies

– HTML 5

– HTML & GRAPHICS TUTORIAL

– Beyond HTML

PHPbuilder

– ARCHITECTURE

– DATABASES

– FUNCTIONS

– TOOLS

Nested HTML Lists

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>

Nested HTML lists

HTML Goodies
- HTML 5
- HTML & GRAPHICS TUTORIAL
- Beyond HTML
PHPbuilder
- ARCHITECTURE
- DATABASES
- FUNCTIONS
- TOOLS
Devx
- .NET
- JAVA
- C++
- Mobile

Horizontal Lists

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>

HTML tag is used to create a drop-down list. We also need the or element.

Attributes

disabled — specifies that an option should be disabled
selected — specifies that an option should be pre-selected when the page loads
label — specifies a shorter label for an option
value — specifies the value to be sent to a server

HTML Tag

The tag is new in HTML5 and specifies a list of pre-defined options for an element. Users will see a drop-down list of pre-defined options as they input data and provide an auto-completion feature on the elements.

An element with pre-defined values in a :

<!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>

Conclusion

This article has provided a few examples of different types of HTML lists.