The <ul> and <li> Elements in HTML

The <ul> element is used to create an unordered list in HTML — also known as a bullet point list.
Inside the <ul>, you use <li> elements to create each list item.
The <ul> tag defines the list wrapper, and the <li> tags define each bullet item.

Unordered lists are useful for:

• Listing features or points
• Creating menus
• Displaying steps or ideas
• Organizing information clearly

Think of <ul> as a container for bullets, and <li> as each bullet point inside that container.

📘 Example Code

Below is an HTML example showing a heading and a bullet list:

💡 This is what the code looks like inside an editor

🖥️ What This Will Look Like in a Browser

✅ Example output you would see on a webpage:

🧪 Time to Practise!

Now it’s your turn to create your own unordered list.

Try this example first:

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Grapes</li>
</ul>

What To Do

✅ Type the code above in the editor below
✅ Click Test Code to see the result
✅ Try changing the list items to your own ideas
✅ Add a heading above your list to describe it

Tip 💡

Use <ul> when the order does not matter — like lists of items, ideas, or notes.
If the order does matter (like steps), use <ol> instead — we’ll learn that next!
You’re doing great — every tag you learn builds real coding confidence! 🚀