4.0 Lists
One of the core elements of HTML is the humble list, of which there are three basic types:
Unordered lists are those that use bullet points (like the above list), while ordered lists use numbers or letters. A definition list is simply a list with additional descriptions of list items. The basic tags involved in lists are:
| Tag | Purpose |
|---|---|
| <ul> | Defines an unordered list (eg. using bullet points) |
| <ol> | Defines an ordered list (eg. 1,2,3..a,b,c, etc.) |
| <li> | Defines a lists item |
| <dl> | Defines a definition list |
| <di> | Defines an item in a definition list |
| <dd> | Defines a description of an item in a definition list |
For example, to make a simple unordered list we can use the following tags:
<ul> <li>A list item;</li> <li>Another list item.</li> </ul>
This would look like this in a browser:
- A list item;
- Another list item.
And to make a simple ordered list:
<ol> <li>A list item;</li> <li>Another list item.</li> </ol>
This would look like this in a browser:
- A list item;
- Another list item.
And to make a simple definition list:
<dl> <dt>A list item;</dt> <dd>A list item description;</dd> <dt>Another list item.</dt> <dd>Another list item description;</dd> </dl>
This would look like this in a browser:
- A list item
- - description
- Another list item
- - another descrition
Many other HTML elements can be placed inside lists, such as paragraph text, images, headings, and even other lists. As a result, lists can be nested, like below:
<ol> <li>A list item;</li> <li>Another list item.</li> <ul> <li>A sub-list item;</li> <li>Another sub-list item.</li> </ul> <li>Another list item;</li> <li>Yet another list item.</li> </ol>
This would look like this in a browser:
- A list item;
- Another list item;
- A sub-list item;
- Another sub-list item;
- Another list item;
- Yet another list item;
Lists can add a little structure and simple layout styling to chunks of text and should be used whenever a list of items is required.