HTML Unordered Lists 🎯

Learn to create and style flexible, bullet-pointed lists with HTML!

Introduction 📝

In this tutorial, we'll explore the power of HTML unordered lists (UL) to organize content, enhance readability, and make your web pages more user-friendly. You'll discover how to create lists, add custom bullet points, and style them according to your design needs.

What are Unordered Lists? 💡

Unordered lists (UL) are a fundamental HTML element used to group items without a specific order. They are represented by the <ul> tag. Each list item is wrapped within the <li> tag.

html

<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

Default Unordered List Styling 💡

By default, browsers display unordered lists with bullet points.

html

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>

🌟 Output:

- Apple
- Banana
- Cherry

List Item Styling 💡

You can customize the bullet points using the list-style-type property.

html

<ul style="list-style-type: square;">
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>

🌟 Output:

□ Apple
□ Banana
□ Cherry

List Styling with CSS 💡

For more advanced styling options, you can use CSS.

css

ul {
  padding: 0;
  list-style-type: none;
}

ul li {
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  padding: 10px;
}

html

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>

🌟 Output:

Apple
Banana
Cherry

(with custom styling)

Nested Unordered Lists 💡

Create hierarchical lists by nesting <ul> and <li> tags.

html

<ul>
  <li>Fruit</li>
  <ul>
    <li>Citrus Fruit</li>
    <li>Citrus Fruit 2</li>
  </ul>
  <li>Berry</li>
</ul>

🌟 Output:

- Fruit
  - Citrus Fruit
  - Citrus Fruit 2
- Berry

HTML Unordered Lists 🎯

HTML Unordered Lists 🎯

Introduction 📝

What are Unordered Lists? 💡

Default Unordered List Styling 💡

List Item Styling 💡

List Styling with CSS 💡

Nested Unordered Lists 💡

Quiz 📝