Unordered Lists in HTML

Learn to create bulleted lists in HTML using the <ul> and <li> tags to organize your content.

Creating Unordered Lists

When you need to list items without a specific order, like a shopping list, you use an unordered list. Let's learn how to create these bulleted lists in HTML.

Syntax

The structure consists of a main <ul> tag that wraps all the list items. Each item is then defined by its own <li> tag.

Purpose

Unordered lists are perfect for organizing items where the sequence does not matter, such as a list of features, ingredients, or navigation links. Browsers typically render these items with bullet points.

Practice Zone


Interactive Test 1: Drag & Drop

Arrastra en el orden correspondiente.


Arrastra las opciones:

</ul>
<li>Second item</li>
<ul>
<li>First item</li>
<li>Third item</li>

Completa el código:

______
______
______
______
______

Interactive Test 2: Fill in the Blanks

Rellena los huecos en cada casilla.

<ul>
  First Item</li>
  <li>Second Item
  <li>Third Item</li>

Practice Example: Code Editor

Create an unordered list with three items describing your favorite foods.

* Write the code below. Correct characters will be shown in green and incorrect ones in red.

<ul> <li>Pizza</li> <li>Sushi</li> <li>Tacos</li> </ul>

Knowledge Check

Which tag is used to define an unordered list in HTML?