Module 10: Final Projects · Lesson 2 of 4
How to Make a Recipe Page in HTML (Semantic Example)
All lessons in Module 10
- Personal Profile Page
- Full Recipe Page
- Contact Page with Form
- One-Page Portfolio
Goal: Build a full recipe page with a photo, a table and two kinds of list.
Learn
A recipe page is a great HTML workout, because it mixes nearly every kind of content. For each part, pick the element that fits its meaning:
- The recipe stands on its own, so it is an
<article>. - A photo with a caption is a
<figure>with<figcaption>. - Prep time, cook time and servings are data in rows and columns, so they go in a small
<table>with a caption. - You can gather ingredients in any order:
<ul>. - Steps have to happen in order:
<ol>. - A chef's tip is related but optional:
<aside>.
Search engines and recipe apps read this structure (the semantic HTML guide explains how), and screen reader users can jump straight to the steps with flour all over their hands.
The short version
- Pick each element for its meaning:
<article>for the recipe,<ul>for ingredients,<ol>for steps,<aside>for tips. - A
<figcaption>has to sit inside its<figure>, as the first or last child. - Put table headings in
<th>cells, so screen readers can announce which column each value belongs to. - Semantic structure lets search engines and recipe apps make sense of the page.
Example
<article>
<h1>Toast</h1>
<h2>Ingredients</h2>
<ul>
<li>1 slice of bread</li>
</ul>
<h2>Method</h2>
<ol>
<li>Put the bread in the toaster.</li>
<li>Wait for the pop.</li>
</ol>
</article>Your task
Build a full pancake recipe page with all of the following:
- A
<title>that mentions pancakes, a viewport tag and a description. - Some CSS: a
<style>element or a link tostyle.css. - An
<article>containing an<h1>that mentions pancakes. - A
<figure>withpancakes.svg, alt text and a<figcaption>. - A
<table>with a<caption>and at least two<th>headers (prep time, cook time, servings). - An Ingredients
<h2>with a bulleted list of at least 5 items. - A Method (or Steps)
<h2>with a numbered list of at least 4 steps. - An
<aside>with a chef's tip.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Common mistakes
Wrong
<p>1. Whisk the flour and sugar.</p>
<p>2. Beat in the eggs and milk.</p>
<p>3. Cook in a hot pan.</p>Right
<ol>
<li>Whisk the flour and sugar.</li>
<li>Beat in the eggs and milk.</li>
<li>Cook in a hot pan.</li>
</ol>Numbers you type are plain text, while an ol tells everyone the order counts and renumbers itself when you add a step.
Wrong
<table>
<tr>
<td><b>Prep time</b></td>
<td><b>Cook time</b></td>
</tr>
<tr>
<td>10 min</td>
<td>15 min</td>
</tr>
</table>Right
<table>
<tr>
<th>Prep time</th>
<th>Cook time</th>
</tr>
<tr>
<td>10 min</td>
<td>15 min</td>
</tr>
</table>Bold cells merely look like headers, and th cells are real headers that screen readers link to each value.
Go deeper
Search engines understand recipes better than almost any other kind of content. On top of clean HTML, food sites add schema.org Recipe structured data, and Google can then show rich results with a photo, total time and star ratings. Google's recipe structured data guidelines (opens in a new tab) require at least the recipe name and an image, and recommend ingredients, steps and times written as ISO 8601 durations, such as PT25M for 25 minutes. Test it with Google's Rich Results Test.
HTML can mark durations too: <time datetime="PT10M">10 min</time> keeps the friendly text for people and a precise value for machines, using the same ISO 8601 duration format (opens in a new tab).
Picture how people use a recipe page: on a phone, propped against a bowl, with sticky hands. Large text, short steps and the ingredients near the top beat any decoration. A print stylesheet (media="print") that hides the menu and footer is a nice extra. If your family recipes already sit in a word processor, a document-to-HTML converter (opens in a new tab) can produce a first draft of the markup for you to tidy into these semantic elements.
Keep each ingredient's amount and unit together in one list item, for example 200 g flour, and stick to the same units all the way through. Nobody scanning the list mid-recipe wants to convert ounces to grams.
Frequently asked questions
How do I write a recipe in HTML?
Wrap the whole recipe in <article> with the dish name in an <h1>. Add the photo in a <figure> with a <figcaption>, the times and servings in a small <table> with a caption, the ingredients in a <ul> under an Ingredients heading, and the steps in an <ol> under a Method heading. Any tips go in an <aside>.
What is recipe schema markup?
Structured data that describes a recipe in a format search engines read directly, based on the schema.org Recipe type (opens in a new tab). You usually write it as JSON-LD in a <script type="application/ld+json"> block, listing the name, image, ingredients, steps and times. Google can turn it into rich results with a photo, cooking time and ratings. Whatever it says has to match the visible page.
When should I use figure and figcaption in HTML?
Use <figure> for self-contained content that the text refers to, like a photo, diagram, code sample or chart. <figcaption> gives it a visible caption. A caption does not replace alt text. The alt describes the image for people who can't see it, and the caption adds something for everyone, like Serve warm with berries. The lesson on figure and figcaption has more examples.