The List Element

on

📝 HTML List Elements Explained Simply (Unordered & Ordered Lists)




You see lists everywhere on the internet. Think about BuzzFeed-style articles like:

  • “10 Life Hacks You Won’t Believe Exist”

  • “Top 5 Gadgets You Need in 2025”

Or even the FBI’s Most Wanted list — all of these are made using HTML lists!

🔹 What is a List in HTML?

There are two main types of lists:

  1. Unordered List (<ul>) – for items that don’t need to be in any order.

  2. Ordered List (<ol>) – for items that need to be in a specific sequence.

Both use list items (<li>) inside them.

✅ How to Make an Unordered List

An unordered list shows items with bullet points. Here's how the code looks:

<ul>
  <li>Milk</li>
  <li>Eggs</li>
  <li>Flour</li>
</ul>

This is perfect for things like shopping lists or ingredients — where order doesn’t matter.

✅ How to Make an Ordered List

An ordered list shows numbers. Here’s an example:

<ol>
  <li>Mix the ingredients</li>
  <li>Put it in the oven</li>
  <li>Serve and enjoy!</li>
</ol>

Use this when the steps must follow a particular order — like cooking instructions.

🎯 Real Example: Cinnamon Roll Recipe

You’ll now create a basic recipe page using what you learned. The goal is:

  • Use <h1>, <h2>, <h3> for headings.

  • Use <ul> for ingredients (unordered).

  • Use <ol> for instructions (ordered).

You already have the text ready in the index.html file of the lesson resources. You just need to wrap them with the correct HTML tags!

This is how the final structure might look:

<h1>Cinnamon Roll Recipe</h1>

<h2>Ingredients</h2>

<h3>For the Dough</h3>
<ul>
  <li>Flour</li>
  <li>Milk</li>
  <li>Yeast</li>
</ul>

<h3>For the Filling</h3>
<ul>
  <li>Sugar</li>
  <li>Cinnamon</li>
  <li>Butter</li>
</ul>

<h2>Instructions</h2>
<ol>
  <li>Mix the ingredients</li>
  <li>Let the dough rise</li>
  <li>Roll and fill the dough</li>
  <li>Bake the rolls</li>
  <li>Serve warm</li>
</ol>

🧠 Tip About Code Formatting

Sometimes when you paste long content in VS Code, it may automatically break it into multiple lines. Whether you keep tags like <li> on a single line or multiple lines is your personal choice. Just make sure the content is placed between the correct opening and closing tags.

Comments

Post a Comment