Introduction
Now let’s turn our attention to lists. Lists are everywhere in life —from your shopping list to the list of directions you subconsciously follow to get to your house every day, to the lists of instructions you are following in these tutorials! Lists are everywhere on the web, too, and we’ve got three different types to worry about.
Unordered lists (<ul> element)
Unordered lists are used to mark up lists of items for which the order of the items doesn’t matter. Let’s take a shopping list in plain text as an example:
milk eggs bread hummus
In HTML, unordered lists can be displayed like this:
- milk
- eggs
- bread
- hummus
To get that result and display the bulleted list, every unordered list starts off with a <ul> element (this wraps around all the list items). The last step is to wrap each list item in a <li> (list item) element:
<ul> <li>milk</li> <li>eggs</li> <li>bread</li> <li>hummus</li> </ul>
Ordered lists (<ol> element)
Ordered lists are lists in which the order of the items does matter. Let’s take a set of directions in plain text as an example:
Drive to the end of the road Turn right Go straight across the first two roundabouts Turn left at the third roundabout The school is on your right, 300 meters up the road
In HTML, ordered lists can be displayed like this:
- Drive to the end of the road
- Turn right
- Go straight across the first two roundabouts
- Turn left at the third roundabout
- The school is on your right, 300 meters up the road
The markup structure is the same as for unordered lists, except that you have to wrap the list items in an <ol> element, rather than <ul>:
<ol> <li>Drive to the end of the road</li> <li>Turn right</li> <li>Go straight across the first two roundabouts</li> <li>Turn left at the third roundabout</li> <li>The school is on your right, 300 meters up the road</li> </ol>
Proposed exercise: Hummus recipe
At this point you have all the information you need to mark up a recipe page example. Using the text below, create a new file and use the proper tags to improve the format of the hummus recipe:
Note: You must use<h1>for the main title,<h2>for the other titles,<p>for the paragraphs,<ul>for the ingredients, and<ol>for the instructions.
Quick hummus recipe This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years. Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads. Ingredients 1 can (400g) of chick peas (garbanzo beans) 175g of tahini 6 sundried tomatoes Half a red pepper A pinch of cayenne pepper 1 clove of garlic A dash of olive oil Instructions Remove the skin from the garlic, and chop coarsely Remove all the seeds and stalk from the pepper, and chop coarsely Add all the ingredients into a food processor Process all the ingredients into a paste If you want a coarse "chunky" hummus, process it for a short time If you want a smooth hummus, process it for a longer time For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you. Storage Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you've made it. If it starts to become fizzy, you should definitely discard it. Hummus is suitable for freezing; you should thaw it and use it within a couple of months.
Nesting lists
It is perfectly ok to nest one list inside another one. You might want to have for example a sublist sitting below a top-level bullet:
- first item
- second item
- second item first subitem
- second item second subitem
- second item third subitem
- third item
<ul>
<li>first item</li>
<li>second item
<!-- Look, the closing </li> tag is not placed here! -->
<ul>
<li>second item first subitem</li>
<li>second item second subitem</li>
<li>second item third subitem</li>
</ul>
<!-- Here is the closing </li> tag -->
</li>
<li>third item</li>
</ul>
And you also might want to have an ordered list inside an unordered list:
- first item
- second item
- second item first subitem
- second item second subitem
- second item third subitem
- third item
<ul>
<li>first item</li>
<li>second item
<!-- Look, the closing </li> tag is not placed here! -->
<ol>
<li>second item first subitem</li>
<li>second item second subitem</li>
<li>second item third subitem</li>
</ol>
<!-- Here is the closing </li> tag -->
</li>
<li>third item</li>
</ul>
Let’s take a look now at the second list from our recipe example, and we will understand how useful nested lists can be:
<ol> <li>Remove the skin from the garlic, and chop coarsely.</li> <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li> <li>Add all the ingredients into a food processor.</li> <li>Process all the ingredients into a paste.</li> <li>If you want a coarse "chunky" hummus, process it for a short time.</li> <li>If you want a smooth hummus, process it for a longer time.</li> </ol>
Since the last two bullets are very closely related to the one before them (they read like sub-instructions or choices that fit below that bullet), it might make sense to nest them inside their own unordered list and put that list inside the current fourth bullet. This would look like so:
<ol>
<li>Remove the skin from the garlic, and chop coarsely.</li>
<li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
<li>Add all the ingredients into a food processor.</li>
<li>Process all the ingredients into a paste.
<ul>
<li>If you want a coarse "chunky" hummus, process it for a short time.</li>
<li>If you want a smooth hummus, process it for a longer time.</li>
</ul>
</li>
</ol>
Proposed exercise: Hummus recipe
Using the previous proposed exercise of the hummus recipe, update the second list to use nested items to get the following result:
- Remove the skin from the garlic, and chop coarsely.
- Remove all the seeds and stalk from the pepper, and chop coarsely.
- Add all the ingredients into a food processor.
- Process all the ingredients into a paste.
- If you want a coarse “chunky” hummus, process it for a short time.
- If you want a smooth hummus, process it for a longer time.
Proposed exercise: Shopping list
Write your own shopping list, with at least 25 products. You must use types and subtypes, by wrapping the items in nested lists as the following example:
- Bread
- Milk
- Coffee
- Tea
- Black tea
- Green tea
- Fruit
- Oranges
- Apples
<ul>
<li>Bread</li>
<li>Milk</li>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Fruit
<ul>
<li>Oranges</li>
<li>Apples</li>
</ul>
</li>
</ul>
Proposed exercise: Things to do
Create a new file containing a list of things to do, with at least 25 items. You must use nested lists mixing things and instructions, for example, by inserting ordered lists inside an unordered list, more or less like the example below:
- Feed cat
- Wash the bowl
- Open cat food
- Deliver it to the cat
- Wash car
- Vacuum interior
- Wash exterior
- Wax exterior
- Grocery shopping
- Plan meals
- Clean out fridge
- Make list
- Go to the store
<ul>
<li>Feed cat
<ol>
<li>Wash the bowl</li>
<li>Open cat food</li>
<li>Deliver it to the cat</li>
</ol>
</li>
<li>Wash car
<ol>
<li>Vacuum interior</li>
<li>Wash exterior</li>
<li>Wax exterior</li>
</ol>
</li>
<li>Grocery shopping
<ol>
<li>Plan meals</li>
<li>Clean out fridge</li>
<li>Make list</li>
<li>Go to the store</li>
</ol>
</li>
</ul>
Description lists (<dl> element)
We have walked through how to mark up basic lists. Now we are going to mention the third type of list, which you will occasionally come across: description lists. The purpose of these lists is to mark up a set of items and their associated descriptions, such as terms and definitions, or questions and answers. Let’s look at an example of a set of terms and definitions:
soliloquy In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.) monologue In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present. aside In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of additional background information
Description lists use a different wrapper than the other list types, since they are delimited by the <dl> tag. In addition each term is wrapped in a <dt> (description term) element, and each description is wrapped in a <dd> (description definition) element. Let’s finish marking up our example:
<dl> <dt>soliloquy</dt> <dd>In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)</dd> <dt>monologue</dt> <dd>In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.</dd> <dt>aside</dt> <dd>In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought, or piece of additional background information.</dd> </dl>
The browser will display description lists with the descriptions indented somewhat from the terms. Also note that it is permitted to have a single term with multiple descriptions, for example:
<dl> <dt>aside</dt> <dd>In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought, or piece of additional background information.</dd> <dd>In writing, a section of content that is related to the current topic, but doesn't fit directly into the main flow of content so is presented nearby (often in a box off to the side.)</dd> </dl>
Proposed exercise: Coffee, Tea and Chocolate
It’s time to try your hand at description lists. Create a new file and add elements to the raw text below so that it appears as a description list:
Coffee Coffee is a brewed beverage with a distinct aroma and flavor prepared from the roasted seeds of the Coffea plant. Tea Tea is an aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the tea plant. Hot chocolate Hot chocolate (also known as hot cocoa) is a heated beverage typically consisting of shaved chocolate, melted chocolate or cocoa powder, heated milk or water, and sugar.
Proposed exercise: Bacon, Eggs and Coffee
Create a new file with the text below and add elements to the raw text so that it appears as a description list. You could try using your own terms and descriptions if you like:
Bacon Cured meat prepared from a pig. Eggs Common food and one of the most versatile ingredients used in cooking. Coffee The drink that gets the world running in the morning. A light brown color.
Proposed exercise: Computer hardware
Write a definition list to explain the meaning of the following terms: Central processing unit, monitor, mouse, keyboard, graphics card, sound card, speakers and motherboard.
Quiz
Test your skills with this quiz about text formatting and some other concepts related to this unit.