0
0
HTMLmarkup~5 mins

Unordered lists in HTML

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Unordered lists help you show a group of items where order does not matter. They make content easy to read and understand.

To list grocery items you need to buy.
To show features of a product on a webpage.
To display steps that can be done in any order.
To organize ideas or points in a simple way.
To create menus or navigation links on a website.
Syntax
HTML
<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

The <ul> tag starts the unordered list.

Each item inside the list is wrapped in a <li> tag.

Examples
This creates a simple bullet list of fruits.
HTML
<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>
Use unordered lists for steps when order is not important.
HTML
<ul>
  <li>Step one</li>
  <li>Step two</li>
  <li>Step three</li>
</ul>
Unordered lists are often used for website menus.
HTML
<ul>
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>
Sample Program

This webpage shows a simple unordered list of fruits with bullet points. The list uses semantic HTML and includes an ARIA label for accessibility. The style makes the list easy to read and visually pleasant.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Unordered List Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 1rem;
      background-color: #f9f9f9;
      color: #333;
    }
    ul {
      background-color: #fff;
      padding: 1rem 2rem;
      border-radius: 0.5rem;
      max-width: 300px;
      box-shadow: 0 0 5px rgba(0,0,0,0.1);
    }
    li {
      margin-bottom: 0.5rem;
      line-height: 1.4;
    }
  </style>
</head>
<body>
  <h1>My Favorite Fruits</h1>
  <ul aria-label="List of favorite fruits">
    <li>Apple</li>
    <li>Banana</li>
    <li>Cherry</li>
    <li>Date</li>
  </ul>
</body>
</html>
OutputSuccess
Important Notes

Unordered lists use bullet points by default to show items.

They are good when the order of items does not matter.

Use the aria-label attribute to help screen readers understand the list.

Summary

Unordered lists group items with bullet points.

Use <ul> for the list and <li> for each item.

They improve readability and structure on web pages.