A Recipe Example Using Lists

The previous sample recipe1 page updated to use lists.

Contents

  1. A Sample Recipe Page
  2. The Source Code
  3. Notes

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

  1. An h1 tag was used for the title on the page.
  2. The content of the document was divided into two sections: Ingredients and Preparation using h2 tags.
  3. The preparation section was divided into three sections using h3 tags.
  4. The ingredients were listed using an unordered list.
  5. The directions were listed using an ordered list.
  6. 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.


  1. Recipe courtesy of Foodista and licensed CC By 3.0