Recipe title and summary
Add the title, a short summary and the servings info.
Recipe intro with h1 and p
At the top of the recipe page you write the recipe name with the <h1> tag. <h1> is the largest heading level and appears once per page.
Write the short summary in a <p> tag: how many slices, how many minutes, what flavor. Make important words important with <strong> and special words italic with <em>.
Emphasis with strong and em
<strong> and <em> are two emphasis tags with different meanings:
- strong: marks important content; appears important in the browser.
- em: marks stressed content; appears italic in the browser.
In the recipe summary you use them to highlight key details like quantity and flavor.
Exercise Add the h1 and summary paragraph
Take the empty skeleton from the previous lesson. Inside <body> add an h1 with content Chocolate Cake and a p. Inside the paragraph, highlight one word with strong and another with em.
Show example solution
Add h1 and p inside body. Put strong and em inside the p.
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>
<p>A rich, <strong>cocoa-flavored</strong> cake recipe. About <em>8 slices</em> in 50 minutes.</p>
<!-- add ingredient list -->
</body>
</html>Test yourself
-
Which tag shows the recipe name as a large heading on the page?
- <title>
- <h1>
- <p>
- <head>
Show answer
<h1> — Correct. <h1> is the largest visible heading in the body. <title> is the tab title, not shown on the page.
-
Complete the emphasis in the summary paragraph
<p>This is a ____ cake recipe.</p>Show answer
<p>This is a <strong>cocoa-rich</strong> cake recipe.</p> -
Match each inline tag to its meaning
- <strong>
- Important, bold text
- <em>
- Stressed, italic text
- <mark>
- Highlighted text
- <small>
- Small print