WebCodeFun

Beginner's HTML Course

How to create lists in HTML, and use the <strong> and <em> nesting elements

In this tutorial, we are going to add two list elements to our web page. We will start with an ordered list and then add an unordered list.

We also explore what we mean by nesting elements. We nest a list within a list, and use the strong and emphasis elements to alter words within a paragraph.

YouTube Video

Written Guide

Contents

Ordered list

We will first create an ordered list, and to do this, we will list out the instructions to make the sauce. When making the sauce, we have to follow the instructions sequentially. You can’t complete the instructions in any order. An ordered list is, therefore, a good fit for this content.

We will start by creating a new <section> element. As discussed in the previous tutorials, the <section> element enables us to organise our document into logical pieces.

We will add a comment to note that this will be our instructions section. We will then add a subheading. It has the same importance level as the sauce ingredients heading we created in the last video, so we will again use an <h2> element.

<!DOCTYPE html>
<html lang="en-GB">
<head>
<!--HEAD SECTION--> <title>Web Code Fun Pizza Sauce Recipe</title> <meta name="description" content="HTML5 beginner's course - tutorial series creating a pizza sauce recipe web page."> <meta charset="utf-8">
</head> <body>
<!--BODY SECTION--> <header>
<!--OUR FIRST HEADING, ALSO OUR MAIN HEADING--> <h1>WebCodeFun's Pizza Tomato Sauce Recipe</h1> <!--OUR FIRST PARAGRAPHS--> <p>This pizza sauce recipe is the perfect base sauce for any pizza. It is full of flavour, easy to make, and will blow all other pizzas away.</p> <p>You can add any toppings, although lashings of cheddar cheese and mozzarella are recommended.</p>
</header> <!--OUR PIZZA IMAGE--> <img src="images/pizza-mozarella-tomato-basil.jpg" width="500px" height="375px" alt="Pizza with a tomato, mozarella and basil topping." > <section>
<!--INGREDIENTS TABLE--> <h2>Sauce Ingredients</h2> <table>
<thead>
<tr>
<th>Ingredient</th> <th>Quantity</th>
</tr>
</thead> <tbody>
<tr>
<td>Extra virgin olive oil</td> <td>1 teaspoon</td>
</tr> <tr>
<td>Red onion</td> <td>1, chopped finely</td>
</tr> <tr>
<td>Granulated sugar</td> <td>1 teaspoon</td>
</tr> <tr>
<td>Tinned tomatoes</td> <td>1 can</td>
</tr> <tr>
<td>Tomato puree</td> <td>2 tablespoons</td>
</tr> <tr>
<td>Sea salt</td> <td>Large pinch</td>
</tr> <tr>
<td>Garlic</td> <td>1 teaspoon, crushed or finely chopped</td>
</tr> <tr>
<td>Oregano</td> <td>1/2 teaspoon</td>
</tr> <tr>
<td>Black pepper</td> <td>1 pinch</td>
</tr> <tr>
<td>Cayenne pepper</td> <td>1 teaspoon</td>
</tr> <tr>
<td>Basil</td> <td>1/2 teaspoon</td>
</tr>
</tbody>
</table>
</section> <section>
<!--INSTRUCTIONS SECTION--> <h2>Instructions</h2>
</section>
</body>
</html>

An ordered list uses the <ol> element to wrap the list. This markup tells the browser we are creating an ordered list. To remember it, note that it is o for ordered and l for the list.

To add a list item inside, we use the <li> element. We will place each instruction as an additional list item. As the list items are within the <ol> element, the browser will number each list item sequentially. The first list item will be number 1, the second number 2, and so on.

<!DOCTYPE html>
<html lang="en-GB">
<head>
<!--HEAD SECTION--> <title>Web Code Fun Pizza Sauce Recipe</title> <meta name="description" content="HTML5 beginner's course - tutorial series creating a pizza sauce recipe web page."> <meta charset="utf-8">
</head> <body>
<!--BODY SECTION--> <header>
<!--OUR FIRST HEADING, ALSO OUR MAIN HEADING--> <h1>WebCodeFun's Pizza Tomato Sauce Recipe</h1> <!--OUR FIRST PARAGRAPHS--> <p>This pizza sauce recipe is the perfect base sauce for any pizza. It is full of flavour, easy to make, and will blow all other pizzas away.</p> <p>You can add any toppings, although lashings of cheddar cheese and mozzarella are recommended.</p>
</header> <!--OUR PIZZA IMAGE--> <img src="images/pizza-mozarella-tomato-basil.jpg" width="500px" height="375px" alt="Pizza with a tomato, mozarella and basil topping." > <section>
<!--INGREDIENTS TABLE--> <h2>Sauce Ingredients</h2> <table>
<thead>
<tr>
<th>Ingredient</th> <th>Quantity</th>
</tr>
</thead> <tbody>
<tr>
<td>Extra virgin olive oil</td> <td>1 teaspoon</td>
</tr> <tr>
<td>Red onion</td> <td>1, chopped finely</td>
</tr> <tr>
<td>Granulated sugar</td> <td>1 teaspoon</td>
</tr> <tr>
<td>Tinned tomatoes</td> <td>1 can</td>
</tr> <tr>
<td>Tomato puree</td> <td>2 tablespoons</td>
</tr> <tr>
<td>Sea salt</td> <td>Large pinch</td>
</tr> <tr>
<td>Garlic</td> <td>1 teaspoon, crushed or finely chopped</td>
</tr> <tr>
<td>Oregano</td> <td>1/2 teaspoon</td>
</tr> <tr>
<td>Black pepper</td> <td>1 pinch</td>
</tr> <tr>
<td>Cayenne pepper</td> <td>1 teaspoon</td>
</tr> <tr>
<td>Basil</td> <td>1/2 teaspoon</td>
</tr>
</tbody>
</table>
</section> <section>
<!--INSTRUCTIONS SECTION--> <h2>Instructions</h2> <ol>
<li>Heat the olive oil in a pan.</li> <li>Add the chopped onion and fry on a low heat until softened, about 5-10 minutes.</li> <li>Add the other ingredients, stir, and allow to simmer for 10-20 minutes. Stir occasionally.</li> <li>Allow to cool until it is warm, then use a hand blender to smooth out the sauce.</li> <li>Add enough to cover your pizza dough in a thin layer.</li> <li>Allow the rest to cool, then freeze in ice cubes for use another time.</li> <li>To cover another pizza, defrost 4-6 ice cubes in the microwave for 40 seconds.</li>
</ol>
</section>
</body>
</html>

OK, that is all of the instructions to make the sauce. If you open the page in your browser and hit refresh, you can see that we have a heading and a list underneath, with numbered steps to follow to make the sauce.

Unordered list

We will now create an unordered list. First, we will create another new <section> element to contain our list. Then we will add a comment to describe the content of this section, and then we will add a new <h2> heading so that our web page visitors know what this section will include.

To demonstrate creating an unordered list, we will give some ideas of what foods can accompany our pizza. An unordered list element uses the <ul> tag. U for unordered and l for the list. Again, as we did with the ordered list, we simply add list items using the <li> element.

<!DOCTYPE html>
<html lang="en-GB">
<head>
<!--HEAD SECTION--> <title>Web Code Fun Pizza Sauce Recipe</title> <meta name="description" content="HTML5 beginner's course - tutorial series creating a pizza sauce recipe web page."> <meta charset="utf-8">
</head> <body>
<!--BODY SECTION--> <header>
<!--OUR FIRST HEADING, ALSO OUR MAIN HEADING--> <h1>WebCodeFun's Pizza Tomato Sauce Recipe</h1> <!--OUR FIRST PARAGRAPHS--> <p>This pizza sauce recipe is the perfect base sauce for any pizza. It is full of flavour, easy to make, and will blow all other pizzas away.</p> <p>You can add any toppings, although lashings of cheddar cheese and mozzarella are recommended.</p>
</header> <!--OUR PIZZA IMAGE--> <img src="images/pizza-mozarella-tomato-basil.jpg" width="500px" height="375px" alt="Pizza with a tomato, mozarella and basil topping." > <section>
<!--INGREDIENTS TABLE--> <h2>Sauce Ingredients</h2> <table>
<thead>
<tr>
<th>Ingredient</th> <th>Quantity</th>
</tr>
</thead> <tbody>
<tr>
<td>Extra virgin olive oil</td> <td>1 teaspoon</td>
</tr> <tr>
<td>Red onion</td> <td>1, chopped finely</td>
</tr> <tr>
<td>Granulated sugar</td> <td>1 teaspoon</td>
</tr> <tr>
<td>Tinned tomatoes</td> <td>1 can</td>
</tr> <tr>
<td>Tomato puree</td> <td>2 tablespoons</td>
</tr> <tr>
<td>Sea salt</td> <td>Large pinch</td>
</tr> <tr>
<td>Garlic</td> <td>1 teaspoon, crushed or finely chopped</td>
</tr> <tr>
<td>Oregano</td> <td>1/2 teaspoon</td>
</tr> <tr>
<td>Black pepper</td> <td>1 pinch</td>
</tr> <tr>
<td>Cayenne pepper</td> <td>1 teaspoon</td>
</tr> <tr>
<td>Basil</td> <td>1/2 teaspoon</td>
</tr>
</tbody>
</table>
</section> <section>
<!--INSTRUCTIONS SECTION--> <h2>Instructions</h2> <ol>
<li>Heat the olive oil in a pan.</li> <li>Add the chopped onion and fry on a low heat until softened, about 5-10 minutes.</li> <li>Add the other ingredients, stir, and allow to simmer for 10-20 minutes. Stir occasionally.</li> <li>Allow to cool until it is warm, then use a hand blender to smooth out the sauce.</li> <li>Add enough to cover your pizza dough in a thin layer.</li> <li>Allow the rest to cool, then freeze in ice cubes for use another time.</li> <li>To cover another pizza, defrost 4-6 ice cubes in the microwave for 40 seconds.</li>
</ol>
</section> <section>
<!--PIZZA SIDES SECTION--> <h2>Pizza goes well with...</h2> <ul>
<li>Salad</li> <li>Garlic bread</li> <li>Chips</li> <li>Bruschetta</li>
</ul>
</section>
</body>
</html>

As standard, the unordered list will use bullet points or circles for each list item. We can change the circles to discs, squares, or whatever we like, and we’ll cover that in the CSS course when we come to style our page.

OK, that will do for this unordered list. Over to your browser, if you hit refresh, you can see our new <h2> heading and an unordered list underneath.

Strong element

Let’s now take a look at emphasising text and what we mean by nesting elements. For our instructions, we have a couple of words at the beginning of each list item to explain what the step entails. These are a bit lost at the moment as it all blurs into the text. We can improve this by using HTML to give them greater importance.

To achieve this, we need to create a nested element. A nested element is an element within an element. The element we want is <strong>. By taking the required content within the list element and wrapping it in the <strong> element, we tell the browser that these words are of strong importance.

The browser interprets that the content has greater importance and gives the text an increase in font-weight. We will do this for each list item.

<!DOCTYPE html>
<html lang="en-GB">
<head>
<!--HEAD SECTION--> <title>Web Code Fun Pizza Sauce Recipe</title> <meta name="description" content="HTML5 beginner's course - tutorial series creating a pizza sauce recipe web page."> <meta charset="utf-8">
</head> <body>
<!--BODY SECTION--> <header>
<!--OUR FIRST HEADING, ALSO OUR MAIN HEADING--> <h1>WebCodeFun's Pizza Tomato Sauce Recipe</h1> <!--OUR FIRST PARAGRAPHS--> <p>This pizza sauce recipe is the perfect base sauce for any pizza. It is full of flavour, easy to make, and will blow all other pizzas away.</p> <p>You can add any toppings, although lashings of cheddar cheese and mozzarella are recommended.</p>
</header> <!--OUR PIZZA IMAGE--> <img src="images/pizza-mozarella-tomato-basil.jpg" width="500px" height="375px" alt="Pizza with a tomato, mozarella and basil topping." > <section>
<!--INGREDIENTS TABLE--> <h2>Sauce Ingredients</h2> <table>
<thead>
<tr>
<th>Ingredient</th> <th>Quantity</th>
</tr>
</thead> <tbody>
<tr>
<td>Extra virgin olive oil</td> <td>1 teaspoon</td>
</tr> <tr>
<td>Red onion</td> <td>1, chopped finely</td>
</tr> <tr>
<td>Granulated sugar</td> <td>1 teaspoon</td>
</tr> <tr>
<td>Tinned tomatoes</td> <td>1 can</td>
</tr> <tr>
<td>Tomato puree</td> <td>2 tablespoons</td>
</tr> <tr>
<td>Sea salt</td> <td>Large pinch</td>
</tr> <tr>
<td>Garlic</td> <td>1 teaspoon, crushed or finely chopped</td>
</tr> <tr>
<td>Oregano</td> <td>1/2 teaspoon</td>
</tr> <tr>
<td>Black pepper</td> <td>1 pinch</td>
</tr> <tr>
<td>Cayenne pepper</td> <td>1 teaspoon</td>
</tr> <tr>
<td>Basil</td> <td>1/2 teaspoon</td>
</tr>
</tbody>
</table>
</section> <section>
<!--INSTRUCTIONS SECTION--> <h2>Instructions</h2> <ol>
<li><strong>Heat the olive oil</strong> in a pan.</li> <li><strong>Add the chopped onion</strong> and fry on a low heat until softened, about 5-10 minutes.</li> <li><strong>Add the other ingredients</strong>, stir, and allow to simmer for 10-20 minutes. Stir occasionally.</li> <li><strong>Allow to cool</strong> until it is warm, then use a hand blender to smooth out the sauce.</li> <li><strong>Add enough to cover your pizza</strong> dough in a thin layer.</li> <li><strong>Allow the rest to cool</strong>, then freeze in ice cubes for use another time.</li> <li>To cover another pizza, <strong>defrost 4-6 ice cubes</strong> in the microwave for 40 seconds.</li>
</ol>
</section> <section>
<!--PIZZA SIDES SECTION--> <h2>Pizza goes well with...</h2> <ul>
<li>Salad</li> <li>Garlic bread</li> <li>Chips</li> <li>Bruschetta</li>
</ul>
</section>
</body>
</html>

Then if you refresh your browser, you will see that each <strong> element has been given greater importance and stands out on the page.

Emphasis element

We can also add emphasis to our content, using the <em> element. Let’s add this to a word in our instructions section.

<!DOCTYPE html>
<html lang="en-GB">
<head>
<!--HEAD SECTION--> <title>Web Code Fun Pizza Sauce Recipe</title> <meta name="description" content="HTML5 beginner's course - tutorial series creating a pizza sauce recipe web page."> <meta charset="utf-8">
</head> <body>
<!--BODY SECTION--> <header>
<!--OUR FIRST HEADING, ALSO OUR MAIN HEADING--> <h1>WebCodeFun's Pizza Tomato Sauce Recipe</h1> <!--OUR FIRST PARAGRAPHS--> <p>This pizza sauce recipe is the perfect base sauce for any pizza. It is full of flavour, easy to make, and will blow all other pizzas away.</p> <p>You can add any toppings, although lashings of cheddar cheese and mozzarella are recommended.</p>
</header> <!--OUR PIZZA IMAGE--> <img src="images/pizza-mozarella-tomato-basil.jpg" width="500px" height="375px" alt="Pizza with a tomato, mozarella and basil topping." > <section>
<!--INGREDIENTS TABLE--> <h2>Sauce Ingredients</h2> <table>
<thead>
<tr>
<th>Ingredient</th> <th>Quantity</th>
</tr>
</thead> <tbody>
<tr>
<td>Extra virgin olive oil</td> <td>1 teaspoon</td>
</tr> <tr>
<td>Red onion</td> <td>1, chopped finely</td>
</tr> <tr>
<td>Granulated sugar</td> <td>1 teaspoon</td>
</tr> <tr>
<td>Tinned tomatoes</td> <td>1 can</td>
</tr> <tr>
<td>Tomato puree</td> <td>2 tablespoons</td>
</tr> <tr>
<td>Sea salt</td> <td>Large pinch</td>
</tr> <tr>
<td>Garlic</td> <td>1 teaspoon, crushed or finely chopped</td>
</tr> <tr>
<td>Oregano</td> <td>1/2 teaspoon</td>
</tr> <tr>
<td>Black pepper</td> <td>1 pinch</td>
</tr> <tr>
<td>Cayenne pepper</td> <td>1 teaspoon</td>
</tr> <tr>
<td>Basil</td> <td>1/2 teaspoon</td>
</tr>
</tbody>
</table>
</section> <section>
<!--INSTRUCTIONS SECTION--> <h2>Instructions</h2> <ol>
<li><strong>Heat the olive oil</strong> in a pan.</li> <li><strong>Add the chopped onion</strong> and fry on a low heat until softened, about 5-10 minutes.</li> <li><strong>Add the other ingredients</strong>, stir, and allow to simmer for 10-20 minutes. Stir occasionally.</li> <li><strong>Allow to cool</strong> until it is <em>warm</em>, then use a hand blender to smooth out the sauce.</li> <li><strong>Add enough to cover your pizza</strong> dough in a thin layer.</li> <li><strong>Allow the rest to cool</strong>, then freeze in ice cubes for use another time.</li> <li>To cover another pizza, <strong>defrost 4-6 ice cubes</strong> in the microwave for 40 seconds.</li>
</ol>
</section> <section>
<!--PIZZA SIDES SECTION--> <h2>Pizza goes well with...</h2> <ul>
<li>Salad</li> <li>Garlic bread</li> <li>Chips</li> <li>Bruschetta</li>
</ul>
</section>
</body>
</html>

If you now look at the page in the browser, you can see that the browser has italicised the word.

It’s important to note that giving content strong importance or emphasis is not the same as making it bold or italicised. Whilst that is the outcome on browsers by default, it is not the same thing. For example, a browser could change how it interprets strong importance one day and make it the colour red instead. If we intend to make the text bold or italicised and not give it strong importance or emphasis, we can use CSS to do that. We’ll explore this in our CSS course.

Nesting a list

Finally, it is worth knowing that we can place lists inside of each other. These are known as nesting lists. It follows the same structure as any other list. You just need to place it within a <li> list element. For example, we will take point 7 of our instructions list and nest this list item inside the previous list item, point 6.

As it is one list item and we do not need to order it, we will use an unordered list. We will add the unordered list <ul> element, then place list item 7 inside.

<!DOCTYPE html>
<html lang="en-GB">
<head>
<!--HEAD SECTION--> <title>Web Code Fun Pizza Sauce Recipe</title> <meta name="description" content="HTML5 beginner's course - tutorial series creating a pizza sauce recipe web page."> <meta charset="utf-8">
</head> <body>
<!--BODY SECTION--> <header>
<!--OUR FIRST HEADING, ALSO OUR MAIN HEADING--> <h1>WebCodeFun's Pizza Tomato Sauce Recipe</h1> <!--OUR FIRST PARAGRAPHS--> <p>This pizza sauce recipe is the perfect base sauce for any pizza. It is full of flavour, easy to make, and will blow all other pizzas away.</p> <p>You can add any toppings, although lashings of cheddar cheese and mozzarella are recommended.</p>
</header> <!--OUR PIZZA IMAGE--> <img src="images/pizza-mozarella-tomato-basil.jpg" width="500px" height="375px" alt="Pizza with a tomato, mozarella and basil topping." > <section>
<!--INGREDIENTS TABLE--> <h2>Sauce Ingredients</h2> <table>
<thead>
<tr>
<th>Ingredient</th> <th>Quantity</th>
</tr>
</thead> <tbody>
<tr>
<td>Extra virgin olive oil</td> <td>1 teaspoon</td>
</tr> <tr>
<td>Red onion</td> <td>1, chopped finely</td>
</tr> <tr>
<td>Granulated sugar</td> <td>1 teaspoon</td>
</tr> <tr>
<td>Tinned tomatoes</td> <td>1 can</td>
</tr> <tr>
<td>Tomato puree</td> <td>2 tablespoons</td>
</tr> <tr>
<td>Sea salt</td> <td>Large pinch</td>
</tr> <tr>
<td>Garlic</td> <td>1 teaspoon, crushed or finely chopped</td>
</tr> <tr>
<td>Oregano</td> <td>1/2 teaspoon</td>
</tr> <tr>
<td>Black pepper</td> <td>1 pinch</td>
</tr> <tr>
<td>Cayenne pepper</td> <td>1 teaspoon</td>
</tr> <tr>
<td>Basil</td> <td>1/2 teaspoon</td>
</tr>
</tbody>
</table>
</section> <section>
<!--INSTRUCTIONS SECTION--> <h2>Instructions</h2> <ol>
<li><strong>Heat the olive oil</strong> in a pan.</li> <li><strong>Add the chopped onion</strong> and fry on a low heat until softened, about 5-10 minutes.</li> <li><strong>Add the other ingredients</strong>, stir, and allow to simmer for 10-20 minutes. Stir occasionally.</li> <li><strong>Allow to cool</strong> until it is <em>warm</em>, then use a hand blender to smooth out the sauce.</li> <li><strong>Add enough to cover your pizza</strong> dough in a thin layer.</li> <li><strong>Allow the rest to cool</strong>, then freeze in ice cubes for use another time.
<ul>
<li>To cover another pizza, <strong>defrost 4-6 ice cubes</strong> in the microwave for 40 seconds.</li>
</ul>
</li>
</ol>
</section> <section>
<!--PIZZA SIDES SECTION--> <h2>Pizza goes well with...</h2> <ul>
<li>Salad</li> <li>Garlic bread</li> <li>Chips</li> <li>Bruschetta</li>
</ul>
</section>
</body>
</html>

If you go back to your browser and refresh, you can see that point 7 is now a sub-list item of point 6, and it is a bullet point rather than a number.

Useful resources

Need help?

That’s all we need to cover in this tutorial. We have learned how to use lists, introduced the concept of nesting elements, and explored the use of <strong> and <em> elements.

In the following tutorial in this beginner’s introduction to HTML, we will add a contents section to our web page and, in doing so, introduce adding hyperlinks. If anything is unclear, please do get in touch by contacting me. Thanks for reading.

Back to top