lists

The small family of tags which produce bulleted and numbered lists are very useful. You use them to produce effects like this:

Simple Sweet & Sour Prawns

Ingredients (serves 2):

• 200g prawns
• 1 medium onion
• 2 cloves garlic
• half a green pepper
• 3 tbsps tomato puree
• 1 veg or chicken Oxo cube
• 1 teaspoon Five Spice powder
• ½ cup boiling water
• soy sauce
• 1 tablespoon brown sugar
• 2 teaspoons white wine vinegar

Method:

1. Crumble the Oxo cube and sprinkle the Five Spice powder into a small saucepan, cover with the boiling water, stir, and place on a very low heat.
2. Add the tomato puree and stir through.
3. Add a generous amount of soy sauce - about 10 shakes of the bottle - the sugar, and the vinegar. Stir through, then taste - small quantities of extra sugar and vinegar can be added to balance sweetness and sourness. Let the sauce warm through while preparing the other ingredients.
4. Chop the onions, garlic and pepper.
5. Heat some oil in a wok on a high heat - sesame oil is best but veg or olive oil will do. Toss in the prawns and the chopped onions, garlic and pepper and stir vigorously for a minute or two.
6. Pour in the sauce and stir through. Take off the heat straight away.
7. Serve with rice or noodles, and prawn crackers.

Both types of list are shown here. The first is a bulleted list or, officially, an unordered list. The second, the numbered list, is properly known as an ordered list. Both are created with two tags working in tandem. By the way, it's hard to say whether list tags are block-level or inline. They have features of both and it's almost best to think about them as a third, separate group of text formatting tags.

Each list, as a whole, is bounded by the main list tag: <ul> and <ol> respectively. Then each list item is then bounded (in both cases) by <li> tags. The code for the first list (most items omitted for clarity) therefore looks like this:

<h3>Simple Sweet & Sour Prawns</h3>
<p>Ingredients (serves 2):</p>
<ul>
    <li>200g prawns</li>
    <li>1 medium onion</li>

    ...and so on...

    <li>1 tablespoon brown sugar</li>
    <li>2 teaspoons white wine vinegar</li>
</ul>

The code for the second list is identical in structure only here the <ul> tags are replaced by <ol> ones. Note the way the text is formatted on screen, with a paragraph indent, as well as the tags just providing the bullets or numbers.

Closing </li> tags are often omitted, but shouldn't be as this can cause style sheet formatting to fail. You are always safer putting closing tags in.

Style sheet formatting of the <li> tag is usually shared with that of the <p> tag, although it doesn't have to be. This is an opportune moment to highlight the way in which you can apply formatting to more than one tag. The style sheet entry for both these tags in this site's style sheet looks like this:

p, li { font-family: "Lucida Sans Unicode", Verdana, Arial, sans-serif;
        color: #003300;
        font-size: 80%;
        margin-left: 20px;
        margin-right: 15px; }

You can define styles for <ul> and <ol> as well, but remember the idea of inheritance. <li> tags are nested within these other two tags so there is no need to define styles on both. In practice I find it is best to define the appearance of list text in the style definition of the <li> tag, and use style definitions on the other two tags only to define the appearance of the bullets. You can do this with a property, list-style-type. For details see the style sheet reference page. In fact you can also use small images or icons as list bullets: there is an example at the top of the page which introduces images (the yellow stars). Again, see the style sheet reference page (and don't try this until you've found out more about images anyway).

Finally, you can use an attribute called start if you want to make your ordered lists start at something other than 1. It's quite straightforward: just do something like this: <ol start="5">. This is structural information so you can't do this with styles but must use the attribute.

Back to the top

Back to the menu for lesson 2