Foundation HTML5 with CSS3

Chapter 4

Listing 4-21. An unordered listing of ingredients

<ul>

<li>1/2 cup butter</li>

<li>1/2 cup milk</li>

<li>2 eggs</li>

<li>2 teaspoons vanilla extract</li>

<li>1 1/2 cups all-purpose flour</li>

<li>1 3/4 teaspoons baking powder</li>

<li>1 cup white sugar</li>

</ul>

By default, unordered lists are displayed as slightly indented blocks with a bullet marking each list item, as

seen in Figure 4-8. Later in this chapter you’ll see how you can change the default bullet using CSS,

replacing it with a different character or even an image.

Figure 4-12. A web browser renders the bullets automatically

Required Attributes

The ul element doesn’t require any attributes.

Optional Attributes

The ul element doesn’t feature any optional attributes.

ol

The ol element defines an ordered list, one in which the items are meant to be read or followed in a

specific sequence, such as the steps in a recipe. Listing 4-22 shows an example. Note that the items aren’t

numbered in the markup—the browser will do the numbering for you.

Listing 4-22. A deliberate sequence of steps marked up as an ordered list

<ol>

<li>Preheat oven to 350 degrees F (175 degrees C). Grease and

flour a 9x9 inch pan.</li>

<li>Cream together the sugar and butter. Beat in the eggs one

at a time, then add the vanilla. Combine flour and baking powder,

add to the creamed mixture and mix well. Finally, stir in the

milk until batter is smooth. Pour or spoon batter into the

prepared pan.</li>