HTML Tutorial: Lists
Lists can really help organise information. There are a few ways to create a list. You can use a list of bullet points, a numbered list or a definition list (which is less commonly used).
Unordered Lists (Bullets)
After being comfortable with writing some text, you may want to use bullet points, which are also called unordered lists. You need to type <ul> to start one, <li> (list item) to make a bullet point, and </li> to end one. Your code should look like this:
<ul>
<li>heads</li>
<li>shoulders</li>
<li>knees</li>
<li>toes</li>
</ul>
Your list would look a little something like this, except it won’t have the hearts – my stylesheet is set to make every bullet a diamond.
- heads
- shoulders
- knees
- toes
Ordered Lists (Numbered)
Numbered lists are useful when you want to write instructions, perhaps for a recipe. They are also called ordered lists and work in a very similar way to the bullet points above, except <ol> is used instead of <ul>:
<ol>
<li>Eat breakfast</li>
<li>Brush teeth</li>
<li>Wash face</li>
<li>Get changed</li>
</ol>
Your list would look a little something like this:
- Eat breakfast
- Brush teeth
- Wash face
- Get changed
Definition Lists
A definition list is defined as a list of items with a definition of each.
The tags for this list are also relatively easy to remember. dl stands for definition list, and begins the list as ul or ol would do.
dt stands for definition term, and dd for definition description.
The code below is a small definition list:
<dl>
<dt>Bracelet</dt>
<dd>jewellery worn around the wrist</dd>
<dt>Pendant</dt>
<dd>ornament worn on a chain usually around the neck</dd>
</dl>
The list would look like this:
- Bracelet
- jewellery worn around the wrist
- Pendant
- ornament worn on a chain usually around the neck