HTML Unordered Lists

An HTML unordered list, also known as a bulleted list, is a way to organize and present information in a structured and easy-to-read format. It is a fundamental element in web design and is commonly used to display a list of items without any particular order or hierarchy.

To create an unordered list in HTML, you use the

tag. Each item in the list is represented by the
• tag. The
  tag acts as a container for the list items, and the
  • tag represents each individual item in the list.

Here is an example of an HTML unordered list:

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

This code will render as:

• Item 1
• Item 2
• Item 3

As you can see, each item in the list is displayed with a bullet point by default. However, you can customize the appearance of the bullet points using CSS.

HTML unordered lists can also be nested, meaning you can have a list within a list. This is useful when you want to create subcategories or group related items together. Here is an example of a nested HTML unordered list:

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

This code will render as:

• Item 1
• Item 2
  • Subitem 1
  • Subitem 2
• Item 3

As you can see, the nested list is indented to visually indicate its relationship to the parent list item.

HTML unordered lists can also be styled using CSS to match the design of your website. You can change the bullet points to different shapes, colors, or even remove them altogether. You can also add spacing, margins, and padding to create a visually appealing list.

Here is an example of CSS code that changes the bullet points to squares and adds some spacing:

<style>
  ul {
    list-style-type: square;
    margin-left: 20px;
    padding-left: 10px;
  }
</style>

With this CSS applied, the unordered list will be displayed as:

ul {
list-style-type: square;
margin-left: 20px;
padding-left: 10px;
}

• Item 1
• Item 2
• Item 3

By using HTML unordered lists, you can present information in a clear and organized manner, making it easier for users to scan and understand the content. Whether you are creating a simple list of items or a complex nested structure, unordered lists are a versatile tool in web design.