HTML - Unordered Lists

Hello there, future web developers! Today, we're going to dive into the wonderful world of HTML unordered lists. As your friendly neighborhood computer teacher, I'm excited to guide you through this journey. Trust me, by the end of this tutorial, you'll be creating lists like a pro!

What is an Unordered List?

Before we jump into the code, let's understand what an unordered list is. In HTML, an unordered list is a collection of related items that have no particular order. Think of it like a shopping list - you don't necessarily need to buy bread before milk, or apples before bananas. The order doesn't matter, but they're all part of the same list.

In HTML, we create unordered lists using the <ul> tag, and each item in the list is wrapped in <li> tags. Let's look at a simple example:

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Oranges</li>
</ul>

This code will render as:

Apples
Bananas
Oranges

See how easy that was? The browser automatically adds bullet points to each item. But what if you want to change those bullet points? Well, that's where our next section comes in handy!

Unordered HTML List - Choose List Item Marker

Now, let's spice things up a bit. HTML allows us to change the style of our bullet points, or as we call them in the biz, "list item markers". We have three main options:

disc (default)
circle
square

To change the marker, we use the type attribute in the <ul> tag. Let's see how this works:

<ul type="disc">
  <li>This list uses the default disc marker</li>
</ul>

<ul type="circle">
  <li>This list uses a circle marker</li>
</ul>

<ul type="square">
  <li>This list uses a square marker</li>
</ul>

This code will render as:

• This list uses the default disc marker

○ This list uses a circle marker

■ This list uses a square marker

Cool, right? It's like giving your list a mini-makeover!

Examples of Unordered List

Now that we've got the basics down, let's look at some more complex examples. Remember, practice makes perfect, so feel free to copy these examples and try them out yourself!

Nested Unordered Lists

Sometimes, you might want to create a list within a list. We call this a nested list. Here's how you can do it:

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
      <li>Herbal tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

This will render as:

Coffee
Tea
- Black tea
- Green tea
- Herbal tea
Milk

Notice how the nested list is indented? That's HTML's way of showing that these items are sub-categories of "Tea".

Unordered List with Links

Lists aren't just for simple text. You can include other HTML elements inside your list items. For example, let's create a list of favorite websites:

<ul>
  <li><a href="https://www.google.com">Google</a></li>
  <li><a href="https://www.wikipedia.org">Wikipedia</a></li>
  <li><a href="https://www.github.com">GitHub</a></li>
</ul>

This will create a clickable list of websites:

Unordered List with Images

Let's get even fancier and add some images to our list:

<ul>
  <li><img src="apple.jpg" alt="Apple"> Apple</li>
  <li><img src="banana.jpg" alt="Banana"> Banana</li>
  <li><img src="orange.jpg" alt="Orange"> Orange</li>
</ul>

This code will display a list with small images next to each fruit name. It's a great way to make your lists more visually appealing!

Summary of Unordered List Methods

Here's a handy table summarizing the methods we've learned for creating and customizing unordered lists:

Method	Syntax	Description
Basic Unordered List	`<ul><li>Item</li></ul>`	Creates a basic unordered list
Change List Marker	`<ul type="circle">`	Changes the list item marker style
Nested List	`<ul><li><ul><li>Nested Item</li></ul></li></ul>`	Creates a list within a list
List with Links	`<ul><li><a href="url">Link</a></li></ul>`	Creates a list of clickable links
List with Images	`<ul><li><img src="image.jpg"> Item</li></ul>`	Adds images to list items

And there you have it, folks! You're now well-equipped to create and customize unordered lists in HTML. Remember, the key to mastering these skills is practice. So go ahead, experiment with these examples, and don't be afraid to get creative!

As we wrap up, I'm reminded of a little coding joke: Why did the developer quit his job? Because he didn't get arrays! ? Don't worry, we'll get to arrays another day. For now, keep listing and keep coding!

Credits: Image by storyset