HTML List

HTML allows authors to create a list of items. The list can be ordered, unordered or a definitions. The important tags used to build a list are <ul>, <ol>, <dl> and <li>.

<ul>: Defines an unordered list. The list items will appear in bullets.
<ol>: Defines an ordered list. The list items will appear in numbers.
<dl>: Defines an definition list. The list items will appear as in a dictionary.
<li> and <dl>: Defines the actual list item.

Create an Unordered List

An unordered list uses a <ul> tag and <li> tags. The <ul> tag mark the beginning of the list. The <li> defines the actual list items. Below is an example of how to create the list. The resultant list will contain black circular dots.

<ul> <li>America</li> <li>Australia</li> <li>India</li> </ul>

Add type of the List

The type attribute of the <ul> tag can be used to define the type of bullet that would appear for the list. The type attribute can contain the values "square", "disc" and "circle". Below is an example of how the list would appear with altered types.

<ul style="list-style-type:circle"> <li>America</li> <li>Australia</li> <li>India</li> </ul> <ul style="list-style-type:square"> <li>America</li> <li>Australia</li> <li>India</li> </ul> <ul style="list-style-type:disc"> <li>America</li> <li>Australia</li> <li>India</li> </ul>

Create an Ordered List

An ordered list uses a <ol> tag and <li> tags. The <ol> tag mark the beginning of the list. The <li> defines the actual list items. Below is an example of how to create the list. The resultant list will contain numbers to denote different list items.

<ol> <li>America</li> <li>Australia</li> <li>India</li> </ol>

Add type of the List

The ordered list usually contains the numbers "1", "2" and so on to define the list items. However, this can be altered to uppercase letters, lowercase letters, uppercase roman numbers and lowercase roman numbers. The list-style-type CSS property of the <ol> tag can be used to set the list item marker to display.

Choose Numbers:

The ordered list, by default, will be contain numbers for list item markers. However, it set, for example, to override it in some cases, it can be set by setting the list-style-type CSS property to "decimal" as shown below.

<ol style="list-style-type:decimal"> <li>Asp.Net</li> <li>Php</li> <li>Java</li> </ol>

Choose UpperCase Letter:

The ordered list can contain uppercase letters for the list item markers. To enable uppercase letters, set the list-style-type CSS property to "upper-alpha" as shown below.

<ol style="list-style-type:upper-alpha"> <li>Asp.Net</li> <li>Php</li> <li>Java</li> </ol>

Choose LowerCase Letter:

The ordered list can contain lowercase letters for the list item markers. To enable lowercase letters, set the list-style-type CSS property to "lower-alpha" as shown below.

<ol style="list-style-type:lower-alpha"> <li>Asp.Net</li> <li>Php</li> <li>Java</li> </ol>

Choose UpperCase Roman:

The ordered list can contain uppercase roman numbers for the list item markers. To enable uppercase roman numbers, set the list-style-type CSS property to "upper-roman" as shown below.

<ol style="list-style-type:upper-roman"> <li>Asp.Net</li> <li>Php</li> <li>Java</li> </ol>

Choose LowerCase Roman:

The ordered list can contain lowercase roman numbers for the list item markers. To enable lowercase roman numbers, set the list-style-type CSS property to "lower-roman" as shown below.

<ol style="list-style-type:lower-roman"> <li>Asp.Net</li> <li>Php</li> <li>Java</li> </ol>

Select start point for Ordered List - Start Attribute

By default, ordered list's marker will start from the first number "1" or first letter "A". In some cases, the list might need to start from a different number. For example, there could be multiple lists when one is essentially a continuation of the other. Luckily, <ol> tag contains a start attribute that can be used to set the starting marker for the list. For example, numberer lists with type="5", the first item will contain "5" as the marker. For lettered lists with same setting, the first item will contain "E" as the marker. Examples below.

<ol style="list-style-type:decimal" start="3"> <li>Asp.Net</li> <li>Php</li> <li>Java</li> </ol>

Reverse the Order of the List

 The <ol> tag contains the "reversed" attribute that displays an ordered list in reverse order. So, instead of displaying items as 1, 2, 3... the items are displayed in order 3, 2, 1... . 

Note: Reverse attribute is not currently supported in some browsers.

<ol style="list-style-type:decimal" start="3" reversed> <li>Asp.Net</li> <li>Php</li> <li>Java</li> </ol>

Create Definition Lists

A definition or description list is a list of items that are by default displayed like in a dictionary or encyclopedia. Typical usecase would be to use a definition list to display a glossary or a acronym-description list. Typical tags used to define the definition list are 

  • <dl> : Defines the start of the list
  • <dt> : Defines a Term
  • <dd> : Defines the Definition of the Term
Below is an example of how to use the definition list.

<dl> <dt>.Net</dt> <dd>A programming framework</dd> <dt>Java</dt> <dd>Another programming framework</dd> </dl>

Create Nested List

A list can be nested that is a list item can contain another list. A list item can pretty much contain any other HTML block elements including a list. An usecase would be to display a list of countries and then a list of cities within the list item for the countries. The nested list can also be styled separately to the parent list. Example below.

<ul style="list-style-type:disc"> <li>America<ul><li>New York</li><li>California</li></ul></li> <li>Australia<ul><li>Sydney</li><li>Melbourne</li></ul></li> <li>India</li> </ul>

Build Vertical Menu with List

It is easy to build a vertical menu, usually a left-hand menu, with list as a list by default appears vertically. The basic requirement would be to hide the list marker and to include links within the list items and finally to apply some styling to make the menu appear nice.

<ul style="list-style-type:none;" > <li style="padding:4px;"><a href="#">Asp.Net</a></li> <li style="padding:4px;"><a href="#">Php</a></li> <li style="padding:4px;"><a href="#">Java</a></li> </ul>

Build Horizontal Menu with List

A horizontal menu can also be built using a list by altering the styling for the list. The basic requirements would be to make the list items appear side by side, to hide the list marker and to include links within the list items and finally to apply some styling to make the menu appear nice.

<ul style="list-style-type:none;" > <li style="display:inline-block; float:left; padding:8px;"><a href="#">Asp.Net</a></li> <li style="display:inline-block; float:left; padding:8px;"><a href="#">Php</a></li> <li style="display:inline-block; float:left; padding:8px;"><a href="#">Java</a></li> </ul>

Style List - Add Alternate Row Color

Sometimes a list can be quite long and therefore becomes less readable. To improve readablity and appearance, a different style, usually background color, can be applied to the alternate rows. Similar example was shown to display an alternate style for alternate rows in a table. Similarly, CSS can be applied in multiple ways. The cumbersome way would be to apply alternate CSS class to <li>. A better and cleaner way would be to use the pseudo class for CSS, "even" and "odd" or to use the formula "2n + 1" to apply the alternate style.

<style> li:nth-child(even) { background-color: #aaa; } li:nth-child(odd) { background-color: #ccc; } </style>

Make List Item Clickable

It is quite common for a list to contain a list of links, that is <a> tags. By default, the list item is displayed as a block item and all list items would take up the same width. However, the links within the list items would only take the space required to display the <a> tag. This sometimes causes in the usablitity. For example, the user getting frustrated to click the left hand menu for this site but unable to click. To fix this issue, a simple styling can be applied to the <a> tag within the <li> tag, The styling would require to set the margin to "0" and display to "block" for the <a> tag as shown below.

<ul style="list-style-type:none;" > <li style="padding:4px; width:200px"><a style="margin:0; display:block;" href="#">Asp.Net</a></li> <li style="padding:4px; width:200px"><a style="margin:0; display:block;" href="#">Php</a></li> <li style="padding:4px; width:200px"><a style="margin:0; display:block;" href="#">Java</a></li> </ul>

Align List Items under Text

By default, the list items in a list have left indentation applied. This can again be changed by altering the styling of the <li> tag's "margin-left" CSS property. Usually, setting the "margin-left" property to -30px re-aligns the list items properly. Alternatively, the default style can be overridden by resetting the CSS property that sets up the margin originally. In Google Chrome, reset the property by applying the style "-webkit-padding-start" to "0" for the <ul> or <ol> tags.

<style> ul li { margin-left:-30px;} </style>