Tuesday, March 19, 2024

Exploit the Versatility of HTML Lists

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

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

Different ordered HTML lists

  1. phpbuilder.com
  2. devx.com
  3. htmlgoodies.com
  1. phpbuilder.com
  2. devx.com
  3. htmlgoodies.com
  1. phpbuilder.com
  2. devx.com
  3. htmlgoodies.com
  1. phpbuilder.com
  2. devx.com
  3. htmlgoodies.com
  1. phpbuilder.com
  2. devx.com
  3. htmlgoodies.com
  1. phpbuilder.com
  2. devx.com
  3. htmlgoodies.com
  1. phpbuilder.com
  2. devx.com
  3. 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 <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> 

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 <select> Tag

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> 

Attributes

  • autofocus — specifies that the drop-down list should automatically get focus when the page loads
  • disabled — specifies that a drop-down list should be disabled
  • form — defines one or more forms the select field belongs to
  • multiple — specifies that multiple options can be selected at once
  • name — defines a name for the drop-down list
  • required — specifies that the user is required to select a value before submitting the form
  • size — defines the number of visible options in a drop-down list

The <option> tag defines an option in a select list and may be a part of the <select> or <datalist> 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 <datalist> Tag

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

Conclusion

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

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured