HyperText Markup Language/Lists

In HTML, there are three kinds of lists, each appropriate for a different kind of information. An unordered list made with  and  tags is meant for elements that have no order or the order is unimportant (typically shown with bullets). An ordered list created using the  and  tags is typically shown with numbers and is used for elements whose order matters such as a sequence of steps to perform. Finally, there are definitions lists, created with  and  tags.

Ordered Lists
Ordered lists provide a list of items, each of which are preceded by an incremental number starting from 1.

Sample HTML:

Example rendering:

Unordered Lists
Unordered lists display a list of items, each of which is prefixed by a bullet.

Sample HTML:

Example rendering:

Definition Lists
Definition lists display a list of bolded terms, followed by the definition on a new line and prefixed by a tab (by default).

Sample HTML:

Example rendering:

If two terms share the same definition they can be grouped together like so:

Example rendering:

If a term has two alternative definitions use a separate  element for each definition, e.g.

Example rendering:

Longer definitions can be broken up into paragraphs by nesting  elements within the   element.

Example rendering:

Nested Lists
Lists can be nested. An example:

Example rendering:

When nesting, nested list elements should be within a parent list item element.

An example of incorrect nesting:

A further example of incorrect nesting, with two consecutive UL elements:

Note on format
The above descriptions of each of the three list types refer to the default rendering of the corresponding HTML code by the web browser. However, by using CSS, you are able to change the formatting of the lists. For example, with CSS you are able to make the lists horizontal as opposed to the vertical.

Example
An example of using lists to mark up a recipe for pancakes.