HTML Lists

Learn how to create lists on a web page. Lists are the preferred way to display items one after the other, instead of just using <br> tags. Lists are easy to create, with a tag to start and end the list itself, and a tag to start an end each item in the list.

There are three types of lists, ordered, unordered and definition lists.

Unordered Lists

An unordered list is a bulleted list, similar to the menu on the right (although the menu has been altered using stylesheets to use images instead of the standard bullets.)

Define Unordered List - <ul> ... </ul>
Use the <ul> tags to define the start and end of an unordered list. A number of list items (li elements) will go within the ul tags.
Unordered List Item - <li> some item </li>
Add the text for each item in between some <li> and </li> tags. Each list item must have its own li tags.
Bullet Type <ul type="disc | circle | square">
By default a browser will show a round bullet. This can be changed by using the type attribute of the ul tag, which will change the bullet type for the entire list.
Item Type <li type="?">
You can set the type of bullet for an item in the middle of the list by setting the type attribute of an li tag.

Ordered Lists

This list is used to create and indexed list, such as a numbered or alphabetical list.

Define Ordered List - <ol> ... </ol>
Use the <ol> tags to set the start and end of the list. A number of list items will then go between the ordered list tags.
Ordered List Item - <li> an item </li>
Each item must use the <li> tags the same as with an unordered list. But this time the browser will number each item automatically, instead of showing bullets.
List Type <ol type="A | a | I | i | 1">
Set the type of list index by using the type="?" attribute. The default style is numeric, and you can also choose from upper or lowercase, alphabetic or roman numerals.
List Starting Position <ol start="?">
Set the starting number (or letter) if you dont want the list to start at 1 or A.
Item Value <li value="?">
You can set the value of an item in the middle of the list manually, if you do not want it to follow the previous letter or number. Simply set the value attribute of the item you wish to change. Note: subsequent items will follow the new value.

Definition Lists

This type of list is used to define and describe terms, much like a dictionary. Typically an entry in the list consists of a term, and a definition of that term. A browser will usually bold the term, and indent the definition.

Define a Definition List - <dl> </dl>
Set the start and end of a definition list. All entries go within the dl tags. Each entry will usually consist of one dt and one dd element.
Definition Title - <dt> </dt>
The title of a term being defined. Note: you may have a term with no definition, or multiple terms with the same definition.
Definition Description - <dd> </dd>
The definition of a term. Note: you can have multiple definitions for a single term.

Example:

Here are some basic examples of the three lists explained above

<html>
 <body>
  <h3> Unordered List </h3>
  <ul>
   <li>An item</li>
   <li>Another item</li>
  </ul>
  <h3> Ordered List </h3>
  <ol>
   <li>Item one</li>
   <li>Item two</li>
  </ol>
  <h3> Definition List </h3>
  <dl>
   <dt>Term 1</dt>
   <dd>Definition of term 1</dd>
   <dt>Term 2</dt>
   <dd>Definition of term 2</dd>
  </dl>
  <h3> Modified Ordered List </h3>
  <ol type="A" start="6">
   <li>List item 1</li>
   <li>List item 2</li>
   <li value="12">List item 3</li>
   <li>List item 4</li>
  </ol>
 </body>
</html>

See live demo of this example or open in a new window. (Note: close window or tab to return to the guide)