Module 2: Text · Lesson 8 of 8
HTML Recipe Card Project: Lists, Headings and Entities
All lessons in Module 2
Goal: Write a full recipe card using headings, lists, emphasis and entities.
Learn
A recipe tests everything in this module. It has a title and sections, one list where order doesn't matter and another where it really does, a warning or two, and odd symbols like degrees and fractions.
Plan the outline before typing: one h1 for the dish, an h2 for each section. Ingredients go in a ul and steps go in an ol, exactly as in Lists. Use <strong> for the one thing a cook must not miss.
Useful entities for recipes: ° shows °, ½ shows ½ and ¼ shows ¼. Leave yourself a comment too. Working developers do it all the time. Both tricks are covered in Comments and Entities.
The short version
- Plan the outline before typing: one
<h1>for the dish and an<h2>for each section. - Ingredients go in a
<ul>because their order doesn't matter. Steps go in an<ol>because it does. - Use
<strong>sparingly, for the one thing a cook must not miss. - Entities such as
°and½show symbols that are hard to type.
Example
<h2>Ingredients</h2>
<ul>
<li>½ cup sugar</li>
<li>2 eggs</li>
</ul>
<p>Bake at 180°C.</p>Your task
Write a recipe card for a dish you like:
- An
<h1>with the name of the dish, and a short intro paragraph. - An
<h2>calledIngredients, followed directly by a bulleted list of at least 3 items. - An
<h2>calledSteps, followed directly by a numbered list of at least 3 steps. - At least one
<strong>for an important warning or tip. - At least one entity, such as
°or½. - A comment with a note to yourself.
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
<h2>Ingredients</h2>
<p>- 1 cup flour<br>- 1 egg<br>- 1 cup milk</p>Right
<h2>Ingredients</h2>
<ul>
<li>1 cup flour</li>
<li>1 egg</li>
<li>1 cup milk</li>
</ul>Dashes and line breaks only look like a list. A real ul tells browsers, screen readers and search engines that these are separate items.
Wrong
<p>Bake at 180oC.</p>Right
<p>Bake at 180°C.</p>A small letter o is no degree sign. It looks wrong up close, and screen readers read it out as the letter o.
Go deeper
Recipe sites fight hard for search traffic, and the ones that win all start with the structure you've built here. Search engines can read a clear <ol> of steps and a <ul> of ingredients without guessing, and voice assistants that read recipes aloud rely on the same structure to say "step 3". Google explains what it reads from a recipe page in its guide to recipe rich results (opens in a new tab).
You can add even more meaning. The <time> element marks a duration in a machine-readable way: <time datetime="PT20M">20 minutes</time>, where PT20M is the ISO 8601 (opens in a new tab) code for 20 minutes. Professional recipe sites combine markup like this with schema.org structured data.
Picture the cook, too: hands covered in flour, glancing at a phone or a printed page. Short steps, one action per <li>, are easier to follow than long ones. Keep your single <strong> for the step where something can go wrong, such as hot oil or a tight timing.
Read your page aloud using only the headings and list items. If a friend could cook from that alone, your structure is done.
Frequently asked questions
How do I make a recipe card in HTML?
Start with an <h1> for the dish and a short intro paragraph. Add an <h2> for Ingredients followed by a <ul>, and an <h2> for Steps followed by an <ol>. Mark the critical warning with <strong> and use entities for degrees and fractions. Add CSS later to make it look like a card.
How do I write fractions in HTML?
Common fractions have named entities: ½ (½), ¼ (¼), ¾ (¾), plus thirds such as ⅓ (⅓). For any other fraction, write it with a normal slash, like 3/8, or use superscript and subscript: <sup>3</sup>⁄<sub>8</sub> shows 3⁄8.
How do recipe websites show stars and cooking times in Google?
They add structured data: a hidden block of code, usually JSON-LD in a <script> tag, that describes the recipe with the shared schema.org Recipe (opens in a new tab) vocabulary, including ingredients, cooking time and ratings. Google can then show a rich result with a photo and details. That data sits next to the visible HTML, which still needs a clean structure.