Skip to main content

Unordered Lists

HTML provides a way to organize your data in a structured manner using lists. One of the most commonly used types of lists in HTML is the Unordered List. Unordered lists are a collection of items that do not have a specific order or sequence. They are used when the order of the items does not matter. In this tutorial, we'll learn how to create, style, and manipulate unordered lists in HTML.

What is an Unordered List?​

In HTML, an Unordered List is a list of items where each item is marked with a bullet point, typically a round dot. The order of the items in the list doesn't matter and doesn't affect how the list is displayed or interpreted.

Creating an Unordered List​

Creating an unordered list in HTML is simple. Here's the basic syntax:

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

In this syntax:

  • The <ul> tag is used to start and end an unordered list.
  • The <li> tag is used to specify each item in the list. Each <li> stands for 'list item'.

When rendered in a web browser, the above code will display a list of three items, each marked with a bullet point.

Nesting Unordered Lists​

You can nest unordered lists within each other to create sublists. Here's how you can do it:

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

In this code, 'Subitem 1' and 'Subitem 2' are nested within 'Item 2'. They will appear indented under 'Item 2' in the browser.

Styling Unordered Lists​

You can change the appearance of your unordered lists using CSS. Here's an example:

<style>
  ul {
    list-style-type: none;
    padding: 0;
  }
</style>

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

In this code, we've set list-style-type to none to remove the bullet points, and padding to 0 to remove any padding around the list. The list items will be displayed without bullet points or indentation.

Summary​

Unordered lists are a great way to display items in no particular order on your webpages. They are simple to create and can be styled to fit your desired look and feel. Try creating your own unordered lists and experiment with different styles to become comfortable with this versatile HTML element.