The previous sample recipe1 page updated to use lists.
Contents
A Sample Recipe Page
You can see how the page looks here.
The Source Code
<!DOCTYPE HTML>
<html>
<head>
<title>Roasted Swordfish</title>
<meta charset="utf-8" />
</head>
<body>
<h1>Roasted Swordfish with Manzanilla Olives, Cherry
Tomatoes, and Capers</h1>
<h2>Ingredients</h2>
<ul>
<li>4 six-ounce portions of swordfish, each about
one inch thick</li>
<li>1 cup Manzanilla olives</li>
<li>4 cups of peeled cherry tomatoes in juice</li>
<li>4 teaspoons capers, rinsed</li>
<li>2 cloves garlic, sliced</li>
<li>2 lemons juiced</li>
<li>1 cup loosely packed parsley leaves</li>
<li>Olive oil</li>
<li>Salt and pepper</li>
</ul>
<h2>Preparation</h2>
<h3>The Sauce</h3>
<ol>
<li>Heat ¼ cup olive oil in a high sided pot over
medium heat.</li>
<li>Peel and slice the garlic and add it to the
warm oil.</li>
<li>Sauté until the garlic is tender, not browned,
then add the tomatoes and cook until the tomato
liquid has reduce by half, about 20 minutes.</li>
<li>Add the Manzanilla olives, capers, the juice of
one lemon, parsley, and salt and pepper if needed.
</li>
<li>Set aside and keep warm until the swordfish is
cooked.</li>
</ol>
<h3>The Swordfish</h3>
<ol start="6">
<li>Season the swordfish with salt and pepper.</li>
<li>Heat a large sauté pan over medium high heat
and add about 1/4 cup olive oil.</li>
<li>When very hot add the swordfish and cook until
both sides are golden brown, about 3-4 minutes
per side.</li>
<li>Set aside on paper towels to absorb any excess
oil.</li>
</ol>
<h3>To complete</h3>
<ol start="10">
<li>As the swordfish comes out of the sauté pan,
divide the sauce between four warm dinner plates.
</li>
<li>Place one piece of fish on each plate.</li>
<li>Squeeze some lemon on each piece of fish and
serve while hot.</li>
</ol>
</body>
</html>Notes
- An h1 tag was used for the title on the page.
- The content of the document was divided into two sections: Ingredients and Preparation using h2 tags.
- The preparation section was divided into three sections using h3 tags.
- The ingredients were listed using an unordered list.
- The directions were listed using an ordered list.
- For numbering continuity, the start attribute was used.
Not all the tags we have seen in earlier tutorials were used because they were not needed – just because there are tags doesn’t mean you have to use them.