The previous sample recipe1 page updated to use lists.
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>
- 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.