All about lists
Lists are perhaps the easiest way to quickly convey information to a visitor, be it product features, a list of pages or simply the required ingredients for a recipe. We use lists all the time in the real world and the web is no different. There are 3 key types of list which we'll look at creating in this tutorial.
Unordered lists
Unordered lists are the most basic form of list. Unordered lists are created using the <ul> tag. <li> tags are List Items. Here a simple list:
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>Which would display as:
- A
- B
- C
As you can see we use a single <ul> to contain all the list items and each item in the list is wrapped in <li> tags. Each list item now has a bullet point next to it - you don't add these in the code!
Unordered lists don't have to have a bullet, they can have a square, disc or any image you want - this is covered in our styling lists CSS tutorial
Ordered lists
Ordered lists are the next step up from unordered lists. Unlike unordered lists which have bullets, ordered lists will display a number next to each list item. This time instead of <ul> we us <ol> however <li> remains the same:
<ol>
<li>A</li>
<li>B</li>
<li>C</li>
</ol>This will display like so:
- A
- B
- C
Ordered lists don't have to use numbers, they can also use roman numerals and letters - as before this is covered in our list-style-type CSS tutorial
Definition lists
Definition lists are the most complex of the 3 types of lists, these are not like your "standard" list and are good to use for data that comes in pairs. Like before a list is created using a single container tag, in this case <dl>. There are no 'list items' this time though, instead we have two new tags: <dt> - definition term and <dd> definition description. The best way to explain how to use them is with an example:
<dl>
<dt>HTML</dt>
<dd>means HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>means Cascading Style Sheets</dd>
<dt>XML</dt>
<dd>means eXtensible Markup Language</dd>
</dl>- HTML
- means HyperText Markup Language
- CSS
- means Cascading Style Sheets
- XML
- means eXtensible Markup Language
There is no requirement for the number of <dt> and <dd> tags to match so:
<dl>
<dt>Term 1</dt>
<dt>Term 2</dt>
<dd>Description</dd>
</dl><dl>
<dt>Term</dt>
<dd>Description 1</dd>
<dd>Description 2</dd>
<dd>Description 3</dd>
</dl>...are perfectly fine and will output something like this:
- Term 1
- Term 2
- Description
- Term
- Description 1
- Description 2
- Description 3
And that is lists in HTML! Lists can be styled using CSS which is covered in a number of tutorials in our CSS section: