HTML
Project final - Recipe page
Combine all sections and finalize the recipe page.
Final pieces: figure and hr
The core of the recipe page is ready: title, summary, ingredients, steps, and the baking table. In this final lesson we add a visual piece and a divider.
The <figure> tag groups an image and its caption. <img> embeds the image, <figcaption> writes its caption. <hr> draws a horizontal line between sections.
Cake photo with figure
<figure> presents an image and its caption together. You place <img> and <figcaption> inside. Example:
<figure>
<img src="cake.jpg" alt="Cake">
<figcaption>Baked cake</figcaption>
</figure>
For <img> the src and alt attributes are required. <figcaption> describes the image in a short sentence and appears below it.
Exercise Complete the recipe page
Take the previous lesson's solution. After <h1> add a figure with an img (src and alt) and a figcaption. After the table, add an hr and a p containing small with a short closing note.
Show example solution
Add a figure (img + figcaption) after h1. After the table, add hr and a p with small inside.
Example solution:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Chocolate Cake</title>
</head>
<body>
<h1>Chocolate Cake</h1>
<figure>
<img src="cake.jpg" alt="Chocolate cake slice" width="400" height="300">
<figcaption>Baked cake slice</figcaption>
</figure>
<p>A rich, <strong>cocoa-flavored</strong> cake recipe. About <em>8 slices</em> in 50 minutes.</p>
<h2>Ingredients</h2>
<ul>
<li><strong>3</strong> eggs</li>
<li><strong>1 cup</strong> sugar</li>
<li><strong>1 cup</strong> milk</li>
<li><strong>2 tbsp</strong> cocoa</li>
<li><strong>1 pack</strong> baking powder</li>
<li><strong>2 cups</strong> flour</li>
</ul>
<h2>Steps</h2>
<ol>
<li>Whisk eggs and sugar.</li>
<li>Add milk and melted butter.</li>
<li>Sift in cocoa, flour, and baking powder.</li>
<li>Bake in preheated oven.</li>
</ol>
<h2>Baking Table</h2>
<table>
<caption>Cake baking times</caption>
<thead>
<tr>
<th scope="col">Stage</th>
<th scope="col">Temperature</th>
<th scope="col">Time</th>
</tr>
</thead>
<tbody>
<tr>
<td>Preheat</td>
<td>180°C</td>
<td>10 min</td>
</tr>
<tr>
<td>Baking</td>
<td>180°C</td>
<td>30 min</td>
</tr>
</tbody>
</table>
<hr>
<p><small>Enjoy! The cake is done when a toothpick comes out clean.</small></p>
</body>
</html>
Test yourself
-
Which tag adds a horizontal divider line to the page?
Show answer
<hr> — Correct. <hr> (horizontal rule) adds a horizontal line and is a void tag.
-
Complete the horizontal divider tag
<____>
Show answer
<hr>
-
Match each visual tag to its role
- <hr>
- Horizontal divider
- <figure>
- Figure container
- <figcaption>
- Figure caption
- <img>
- Image
Next lesson: Form skeleton
