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