Unordered list in HTML

An unordered list in HTML is a list of items where the order of the items does not matter. It is created using the <ul> element, and each item within the list is represented by the <li> (list item) element. Unordered lists typically use bullet points to mark each item.


Basic Syntax

The basic syntax for an unordered list is:

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

 Simple Unordered List

<!DOCTYPE html>
<html>
<head>
  <title>Unordered List Example</title>
</head>
<body>

<h2>Shopping List</h2>
<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Oranges</li>
  <li>Grapes</li>
</ul>

</body>
</html>

 

Nested Unordered Lists

<!DOCTYPE html>
<html>
<head>
  <title>Nested Unordered List Example</title>
</head>
<body>

<h2>To-Do List</h2>
<ul>
  <li>Work
    <ul>
      <li>Finish report</li>
      <li>Email client</li>
    </ul>
  </li>
  <li>Home
    <ul>
      <li>Clean kitchen</li>
      <li>Do laundry</li>
    </ul>
  </li>
  <li>Personal
    <ul>
      <li>Read book</li>
      <li>Go for a run</li>
    </ul>
  </li>
</ul>

</body>
</html>


Styled Unordered List with CSS

<!DOCTYPE html>
<html>
<head>
  <title>Styled Unordered List Example</title>
  <style>
    ul {
      list-style-type: square; /* Changes bullet points to squares */
      padding-left: 20px; /* Adds padding to the left of the list */
    }
    li {
      font-family: Arial, sans-serif; /* Changes the font */
      color: #333; /* Changes the text color */
    }
  </style>
</head>
<body>

<h2>Favorite Movies</h2>
<ul>
  <li>Inception</li>
  <li>The Matrix</li>
  <li>The Shawshank Redemption</li>
  <li>Interstellar</li>
</ul>

</body>
</html>

In this example, CSS is used to change the bullet points to squares, add padding to the left of the list, and style the font and color of the list items.


 Custom Bullet Points with CSS

<!DOCTYPE html>
<html>
<head>
  <title>Custom Bullet Points Example</title>
  <style>
    ul.custom-bullets {
      list-style-type: none; /* Removes default bullet points */
    }
    ul.custom-bullets li {
      position: relative; /* Allows positioning of custom bullet points */
      padding-left: 20px; /* Adds space for custom bullet points */
    }
    ul.custom-bullets li::before {
      content: "✓"; /* Custom bullet point */
      position: absolute; /* Positions the custom bullet point */
      left: 0; /* Aligns the custom bullet point */
      color: green; /* Changes the color of the custom bullet point */
    }
  </style>
</head>
<body>

<h2>Completed Tasks</h2>
<ul class="custom-bullets">
  <li>Buy groceries</li>
  <li>Pay bills</li>
  <li>Call mom</li>
  <li>Finish project</li>
</ul>

</body>
</html>

In this example, custom bullet points (a green check mark) are used instead of the default bullet points, showcasing the flexibility of CSS in styling unordered lists.