Making lists
Where are we?
You know the structure of an HTML page. You know heading, paragraph, indenting, emphasis, and other tags.
Let’s look at tags that make lists. There are two types of lists: unordered and ordered.
Unordered lists
Unordered lists look like this:
- An item
- Another item
- Yet another item
They’re called “unordered” because they just show bullets in front of each item, rather than numbers.
The list above can be made like this:
<ul> <li>An item</li> <li>Another item</li> <li>Yet another item</li> </ul>
Figure 1. An unordered list
Notice that the <li> tags are nested inside the <ul> tags. It’s important to get the nesting right.
Also notice the indenting. The visual layout of the code matches the nesting of the HTML tags.
This makes the page easier to maintain. If you need to add things in the middle of the list, for example, the indenting will help you figure out exactly where your new data needs to go.
Exercise: Unordered list of dog breeds
Find a list of dog breeds on the Web. Create a Web page with a list of five of your favorites. List them alphabetically.
Upload your page to your server, and add a link below.
Here’s my solution. No peeking at the source code until you’ve tried it yourself!
(Log in to enter your solution to this exercise.)
Ordered lists
The code for an ordered list is very similar. Change the <ul> to an <ol>, and you’ve got it.
<ol> <li>An item</li> <li>Another item</li> <li>Yet another item</li> </ol>
Figure 2. An ordered list
This looks like:
- An item
- Another item
- Yet another item
Exercise: Ordered list of dog breeds
Find a list of dog breeds on the Web. Create a Web page with a list of five of your favorites. List them in your order of preference: favorite first, next favorite second, etc.
Upload your page to your server, and add a link below.
Here’s my solution. No peeking at the source code until you’ve tried it yourself!
(Log in to enter your solution to this exercise.)
Nested lists
Lists can be nested, that is, one list can be entirely inside another list. Here’s some code.
<ul>
<li>19th century
<ul>
<li>1836: Eunice (mastiff) crowned Bitch of New South Wales.</li>
<li>1840:
<ol>
<li>Isaac (lab) eats 15 pounds of figs at Moreton Bay.</li>
<li>Thark (sheltie) barks for 17 hours nonstop. Riots in Port Jackson.</li>
</ol>
</li>
<li>1895: Booblo (Welsh terrier) marks Barton as future PM.</li>
</ul>
</li>
<li>20th century
<ul>
<li>1915: Groft (border collie) rescues sausages under fire.</li>
<li>1967: Lilabeth (portuguese water dog) directs shark to prime ministerial snack.</li>
<li>1975:
<ol>
<li>Goofer (collie) bites PM.</li>
<li>Goofer (collie) bites PM again.</li>
<li>Kerr (govenor general) bites PM.</li>
<li>Goofer (collie) becomes PM.</li>
</ul>
</li>
</ul>
Figure 3. Nested lists
Here’s how it renders:
- 19th century
- 1836: Eunice (mastiff) crowned Bitch of New South Wales.
- 1840:
- Isaac (lab) eats 15 pounds of figs at Moreton Bay.
- Thark (sheltie) barks for 17 hours nonstop. Riots in Port Jackson.
- 1895: Booblo (Welsh terrier) marks Barton as future PM.
- 20th century
- 1915: Groft (border collie) rescues sausages under fire.
- 1967: Lilabeth (portuguese water dog) directs shark to prime ministerial snack.
- 1975:
- Goofer (collie) bites PM.
- Goofer (collie) bites PM again.
- Kerr (govenor general) bites PM.
- Goofer (collie) becomes PM.
Figure 4. Rendered nested lists
Notice that:
- Lists can be nested to any depth.
- Ordered lists can be nested inside unordered lists. The reverse is also true, that is, unordered lists can be nested inside ordered lists.
- Inner lists are completely contained within
<li>tags of outer lists.
- The indenting is essential in figuring this out.
- The example is funnier if you know something about Australian history.
Styling lists
You can style lists with CSS. You can apply all of the font styles we looked at earlier: font-family, color, and so on.
There are also special styles that change the bullets in unordered lists. Here’s some code. You can see it in action.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Styling lists</title>
<style type="text/css">
li {
list-style-type: square;
}
</style>
</head>
<body>
<h1>Styling lists</h1>
<ul>
<li>Affenpinscher</li>
<li>Afghan hound</li>
<li>Airedale terrier</li>
<li>Akita</li>
</ul>
</body>
</html>
Figure 5. Styling list items
Going deeper
SitePoint has a nice CSS list reference page, if you want to know more about styling lists.
Summary
In this lesson, you learned:
- The basic structure of an HTML page.
- A set of basic HTML tags, including headings, paragraphs, emphasis, and lists.
- How HTML entities can be used for special symbols (like ©) as well as to show HTML code.
- The importance of correct indenting in helping Webers do their work accurately.
- How to use CSS to style fonts and change list bullets.
What now?
You know how to make Web pages with text. You know how to make them look good, with colors, fonts, and other things.
But what about the words themselves? The next lesson is about writing for the Web.
