Practical Exercise: Hummus Recipe

assignment Exercise Requirements
  • Use <h1> for main title
  • Use <h2> for other titles
  • Use <p> for paragraphs
  • Use <ul> for ingredients
  • Use <ol> for instructions

restaurant Recipe Structure

HTML Structure
<h1>Quick hummus recipe</h1>
<p>Recipe description...</p>
<h2>Ingredients</h2>
<ul>
  <li>Chick peas</li>
  <li>Tahini</li>
  ...
</ul>
<h2>Instructions</h2>
<ol>
  <li>Prepare ingredients...</li>
  ...
</ol>

compare_arrows Before & After: Nested Lists

looks_one Before: Simple Ordered List
<ol>
  <li>Step 1</li>
  <li>Step 2</li>
  <li>Step 3</li>
  <li>Step 4</li>
  <li>Step 5</li>
  <li>Step 6</li>
</ol>
  1. Step 1
  2. Step 2
  3. Step 3
  4. Step 4
  5. Step 5
  6. Step 6
looks_two After: Nested List
<ol>
  <li>Step 1</li>
  <li>Step 2</li>
  <li>Step 3</li>
  <li>Step 4
    <ul>
      <li>Option A</li>
      <li>Option B</li>
    </ul>
  </li>
</ol>
  1. Step 1
  2. Step 2
  3. Step 3
  4. Step 4
    • Option A
    • Option B