A sample recipe page1 using some of the tags from the previous tutorial.
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> <p>4 six-ounce portions of swordfish, each about one inch thick</p> <p>1 cup Manzanilla olives</p> <p>4 cups of peeled cherry tomatoes in juice</p> <p>4 teaspoons capers, rinsed</p> <p>2 cloves garlic, sliced</p> <p>2 lemons juiced</p> <p>1 cup loosely packed parsley leaves</p> <p>Olive oil</p> <p>Salt and pepper</p> <h2>Preparation</h2> <h3>The Sauce</h3> <p><strong>1.</strong> Heat ¼ cup olive oil in a high sided pot over medium heat.</p> <p><strong>2.</strong> Peel and slice the garlic and add it to the warm oil.</p> <p><strong>3.</strong> 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.</p> <p><strong>4.</strong> Add the Manzanilla olives, capers, the juice of one lemon, parsley, and salt and pepper if needed.</p> <p><strong>5.</strong> Set aside and keep warm until the swordfish is cooked.</p> <h3>The Swordfish</h3> <p><strong>1.</strong> Season the swordfish with salt and pepper.</p> <p><strong>2.</strong> Heat a large sauté pan over medium high heat and add about 1/4 cup olive oil. </p> <p><strong>3.</strong> When very hot add the swordfish and cook until both sides are golden brown, about 3-4 minutes per side.</p> <p><strong>4.</strong> Set aside on paper towels to absorb any excess oil.</p> <h3>To complete</h3> <p><strong>1.</strong> As the swordfish comes out of the sauté pan, divide the sauce between four warm dinner plates.</p> <p><strong>2.</strong> Place one piece of fish on each plate.</p> <p><strong>3.</strong> Squeeze some lemon on each piece of fish and serve while hot.</p> </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.
- A strong tag was used to emphasize each line number.
Not all the tags introduced in the previous tutorial were used because they were not needed – just because there are tags doesn’t mean you have to use them.