Unordered Lists

Unordered lists in HTML are used to display a list of items that do not have a specific order. They are typically displayed with bullets, but the style of the bullets can be customized using CSS.

The <ul> element is used to define an unordered list. Each item in the list is defined by a <li> element.

Here is an example of an unordered list:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Task

Add an unordered list ul with 3 items il: HTML, CSS, JavaScript after the Skills heading within the section element. Run the code to see the results and experiment with the code to get used to it.

The <ul> element has a few attributes that can be used to customize the list. The type attribute can be used to specify the type of bullets that are used. The possible values for the type attribute are disc, circle, and square.

The <ul> element can also be nested. This means that you can create a list of lists.

Here is an example of a nested unordered list:

<ul>
  <li>Item 1
    <ul>
      <li>Item 1.1</li>
      <li>Item 1.2</li>
    </ul>
  </li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

This will display a list with three items. The first item has a nested list with two items.

Example

Here is an example of an HTML document that uses an unordered list:

<!DOCTYPE html>
<html>
<head>
<title>Unordered List Example</title>
</head>
<body>
<h1>Unordered List Example</h1>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
</body>
</html>

This document defines an unordered list with three items. The list is displayed with bullets.

To run this code, you can save it as a .html file and open it in a web browser.

ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT