CodeBlanks Logo Icon CodeBlanks
Login Register

Ingredient list

HTML course · Beginner · Lesson 49/68

List ingredients as an unordered list and highlight quantities.

Ingredient list with ul and li

Ingredients form a list where order doesn't matter. So you use the <ul> (unordered list) tag. The browser puts a bullet in front of each item.

Each ingredient goes inside an <li> (list item). Example:

<ul>
  <li>3 eggs</li>
  <li>1 cup sugar</li>
</ul>

Highlighting amounts with <strong> makes the list easier to scan.

Highlight amounts with strong

Making amounts important with <strong> in the ingredient list helps them stand out. Example:

<li><strong>3</strong> eggs</li>

This visually separates the amount from the ingredient name. Consistency matters: use the same pattern for every item. Readers can scan amounts at a glance.

Exercise Add the ingredient list

Take the previous lesson's solution. Add an h2 with content Ingredients and a ul to <body>. Put at least 4 li items inside the ul; highlight each amount with strong.

Show example solution 
Add h2 and ul to body. Put li items inside the ul.
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>
    <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>
    <!-- add steps and baking table -->
  </body>
</html>

Test yourself

  1. Which tag is used for an ingredient list where order doesn't matter?

    • <ol>
    • <table>
    • <ul>
    • <dl>
    Show answer

    <ul> — Correct. <ul> marks an unordered list; ingredient order doesn't matter.

  2. Complete the ingredient amount

    <li><strong>____</strong> eggs</li>
    Show answer 
    <li><strong>3</strong> eggs</li>

  3. Match each list tag to its meaning

    <ul>
    Unordered list
    <ol>
    Ordered list
    <li>
    List item
    <dl>
    Description list

All lessons in Beginner

1 Document basics

  1. What is HTML?
  2. The document skeleton
  3. Head and meta tags
  4. Title and language
  5. Comments and readability
  6. Summary - My first HTML page

2 Text content

  1. Headings: h1–h6
  2. Paragraphs
  3. Line break and horizontal rule
  4. Emphasis and important text
  5. Quotations and sources
  6. Summary - Article page

3 Project: About me page

  1. Project: About me page
  2. Skeleton and title
  3. Introductory text
  4. Emphasis and separation
  5. Project final - About me

4 Links and navigation

  1. Anchor links
  2. Absolute and relative URLs
  3. In-page links
  4. Link targets
  5. Email and phone links
  6. Summary - Navigation menu

5 Lists

  1. Unordered lists
  2. Ordered lists
  3. Description lists
  4. Nested lists
  5. Links in list items
  6. Summary - Table of contents

6 Project: Business card page

  1. Project: Business card page
  2. Name and title
  3. Contact list
  4. Skills and links
  5. Project final - Business card

7 Images and media

  1. Adding images
  2. Image dimensions
  3. Figure and figcaption
  4. Audio and video
  5. Alternative sources
  6. Summary - Media gallery

8 Intro to tables

  1. Table skeleton
  2. Header cells
  3. Table sections
  4. Caption and title
  5. Cell spanning
  6. Summary - Class schedule table

9 Project: Recipe page

  1. Project: Recipe page
  2. Recipe title and summary
  3. Ingredient list
  4. Steps and baking table
  5. Project final - Recipe page

10 Intro to forms

  1. Form skeleton
  2. Labelled input
  3. Input types
  4. Textarea and button
  5. Selection fields
  6. Summary - Feedback form

11 Intro to semantic tags

  1. Why semantic tags matter
  2. Header and footer
  3. Nav and main
  4. Article and section
  5. Aside and address
  6. Summary - Semantic blog skeleton

12 Beginner final

  1. Challenge - Document skeleton
  2. Challenge - Text and links
  3. Challenge - Lists and tables
  4. Challenge - Form and semantic structure
  5. Challenge - Beginner capstone