Lists!
Everything in Order.
Introduction
Some content is naturally suited to being presented in a list. Most people like lists too as they are easy to quickly scan and take in the content. In this section we'll learn how to create lists in HTML.
There's a fair bit of reading in this section but you can generally get away with what you'll learn in just the first few bits. You should skim the rest of it though to get an idea of what's possible.
Displaying a List
There are two types of lists in HTML. Ordered lists ( ol ), where each list item ( li ) is preceded by a number. Unordered lists ( ul ), where each item is preceded by a bullet. The syntax for both is quite similar
An ordered list:
<ol>
<li>List item</li>
</ol>
An unordered list:
<ul>
<li>List item</li>
</ul>
As you can see, the only real difference is the main opening and closing tags. Let's see them in practice:
simple_lists.html
- <body>
- <p>Did you know that Chuck Norris:</p>
- <ol>
- <li>can cut through a hot knife with butter?</li>
- <li>once counted to infinity, <b>twice</b>?</li>
- <li>slams revolving doors?</li>
- </ol>
- <p>Things I would like to do someday:</p>
- <ul>
- <li>visit the moon</li>
- <li>run a marathon, backwards</li>
- <li>concoct the ultimate dessert</li>
- </ul>
- </body>
Simple Lists
Did you know that Chuck Norris:
- can cut through a hot knife with butter?
- once counted to infinity, twice?
- slams revolving doors?
Things I would like to do someday:
- visit the moon
- run a marathon, backwards
- concoct the ultimate dessert
Indenting of code starts getting important now. In the HTML code above you can see we have indented the li items one step as opposed to the ol and ul tags. This makes it easier to see the structure.
Changing the List Type
If we were limited to just decimal numbers and round bullets that would be kinda boring. Fortunately we can change things up a little. We do this using the attribute type.
<ol type="a" >
Here are the possible values for Ordered lists ( ol ):
a |
Alphanumeric - a. b. c. |
A |
Uppercase Alphanumeric - A. B. C. |
i |
Roman numerals - i. ii. iii. |
I |
Uppercase Roman Numerals - I. II. III. |
Here are the possible values for Unordered lists ( ul ):
square |
Square Bullets |
disk |
Disc Bullets |
circle |
Circle Bullets |
And here is an example:
fancy_lists.html
- <body>
- <p>Did you know that:</p>
- <ol type="A" >
- <li>79% of statistics are made up on the spot.</li>
- <li>There is a 1% probability that the above statement is true.</li>
- <li>There is a 99% probability that one of the above two statements is false.</li>
- </ol>
- </body>
Fancy Lists
Did you know that:
- 79% of statistics are made up on the spot.
- There is a 1% probability that the above statement is true.
- There is a 99% probability that one of the above two statements is false.
Playing with the Order
It's also possible to change the starting number for our ordered lists. This can be useful if your lists are broken up into separate sections. To achieve this we use the start attribute.
<ol start="4" >
list_starting_point.html
- <body>
- <p>Let's start at the beginning:</p>
- <ol>
- <li>ichi</li>
- <li>ni</li>
- <li>san</li>
- </ol>
- <p>And now for something completely different:</p>
- <ol start="4" >
- <li>los</li>
- <li>vagh</li>
- <li>jav</li>
- </ol>
- </body>
List Starting Point
Let's start at the beginning:
- ichi
- ni
- san
And now for something completely different:
- los
- vagh
- jav
Reversing the Order
Maybe we wish to count down rather than up. We can achieve this with the reversed attribute. This is an attribute which doesn't have a value to go with it.
<ol reversed >
reversed_list.html
- <body>
- <p>Ignition Sequence begin:</p>
- <ol reversed>
- <li>Release fuel pumps</li>
- <li>Induce indium phase change</li>
- <li>Blast off!!</li>
- </ol>
- </body>
Reversed List
Ignition Sequence begin:
- Release fuel pumps
- Induce indium phase change
- Blast off!!
Interrupting the Order
It's possible to alter the numbering mid list if required. You do this by adding the value attribute to the required list item.
<li value="9" > </li>
interrupted_list.html
- <body>
- <p>How to count to 100 quickly:</p>
- <ol>
- <li>One</li>
- <li>Two</li>
- <li>Miss a few</li>
- <li value="99" >Ninety Nine</li>
- <li>One Hundred</li>
- </ol>
- </body>
Interrupted List
How to count to 100 quickly:
- One
- Two
- Miss a few
- Ninety Nine
- One Hundred
As you can see, once you alter the list with a value it will continue from the new value. You may have as many list items with value attributes as you like in your list.
Nesting Lists
It is possible to have nested lists. This is when you include another list within a list item. They don't have to be the same type so you could, for instance, have an unordered list within an ordered list.
There are many places where this is useful. Creating a table of contents is a common situation.
nested_lists.html
- <body>
- <p>HTML Tutorial:</p>
- <ol>
- <li value="7" >Links</li>
- <li>Images</li>
- <li>Lists
- <ol type="i" >
- <li>Introduction</li>
- <li>Displaying a List</li>
- <li>And others...</li>
- </ol>
- </li>
- <li>Tables</li>
- </ol>
- </body>
Nested Lists
HTML Tutorial:
- Links
- Images
- Lists
- Introduction
- Displaying a List
- And others...
- Tables
Definition Lists
A definition list is used to create a list of pairs of values. It was originally intended to list words and their definitions but may be used for any list of pairs of values.
<dl>
<dt>Term>/dt>
<dd>Definition</dd>
</dl>
definition_list.html
- <body>
- <p>Some definitions:</p>
- <dl>
- <dt>Internet</dt>
- <dd>The reason you are failing your classes.</dd>
- <dt>Tomorrow</dt>
- <dd>A mystical place where 99% of human productivity and motivation is stored.</dd>
- <dt>Octopus</dt>
- <dd>A cat with eight legs.</dd>
- </dl>
- </body>
Definition List
Some definitions:
- Internet
- The reason you are failing your classes.
- Tomorrow
- A mystical place where 99% of human productivity and motivation is stored.
- Octopus
- A cat with eight legs.
Summary
- <ol> <li> </li> </ol>
- Create an Ordered List.
- <ul> <li> </li> </ul>
- Create an Unordered List.
- type="a"
- Change the display type of either an ordered or unordered list.
- start="5"
- Change the starting number for an Ordered list.
- reversed
- Reverse the counting for an Ordered list.
- value="8"
- Interrupt the numbering, mid list, of an Ordered list.
- <dl> <dt> </dt> <dd> </dd> </dl>
- Create an Ordered List.
- Appropriate Content
- For the right content lists are a great way to present it.
- Indenting
- The structure of the code for lists is much easier to read when the code is indented appropriately.
Activities
Now let's add some graphical flair to our content.
- Add a list to your content. Change the opening and closing tags from ol to ul and observe the difference.
- Add a type attribute to the list. What happens if you add an ordered list type to an unordered list or vice versa?
- Create a nested list. Leave the code unindented. How easy it is to see the structure. Now indent the code and observe how it is much easier to understand.
As we work through this tutorial, each section will add new tags allowing you to do more interesting things. My suggestion would be that you pick a topic or subject of interest to you and create a page about that. As you work through each section, add to and improve the page with the new tags you have learnt.