HTML supports 3 types of lists:
- An Unordered List
- An Ordered List
- A Definition List (or Glossary List)
The text of a specific list must be surrounded by the following paired codes:
Unordered lists <ul> and </ul> Ordered lists <ol> and </ol> Definition list <dl> and </dl>
For unordered and ordered list, each list item must begin with the code <li> and end with </li>. Text that is to appear as a definition list have two elements and they are discussed below.
Examples of Ordered and Unordered Lists
The following HTML codes will produce an unnumbered list:
<ul> <li>Apples</li> <li>Oranges</li> <li>Bananas</li> </ul>
which has the following format:
- Apples
- Oranges
- Bananas
The following HTML codes will produce a numbered list:
<ol> <li>Question 1</li> <li>Question 2</li> <li>Question 3</li> </ol>
which has the following format:
- Question 1
- Question 2
- Question 3
Example of a Definition List
A Definition List has two parts: an element part and an element definition part. These are distinguished by the following HTML codes:
<dt> This must appear at the beginning of the definition list’s elements and a corresponding </dt> must be added after the last character of the list element. <dd> This must appear at the beginning of each elements definition and a corresponding </dd> must be added after the last character of the definition.
For example, the following HTML code will produce a definition list:
<dl> <dt>Item 1</dt> <dd>Text relating to item 1</dd> <dt>Item 2</dt> <dd>Text relating to item 2</dd> </dl>
This will have the following appearance:
Item 1 Text relating to item 1 Item 2 Text relating to item 2
Nested List
The list entities mentioned above can be combined to produce nested lists. For example, the following contains two numbered lists within one unordered list:
- Departments in the Physical Science Budget Centre include
- Chemistry
- Engineering
- Geology
- Departments in the Social Sciences Budget Centre include
- Economics
- Politics
- Sociology
