HTML - Unordered Lists

Ethan D. - May 24, 2024

Creating an Unordered List

To create an unordered list in HTML, use the <ul> tag, which stands for "unordered list". The <ul> tag is a container for list items, represented by the <li> tag. Each <li> tag represents a single item in the list.

Example: Basic Unordered List in HTML

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

When rendered in a web browser, this code will display a bullet point list with three items:

Item 1
Item 2
Item 3

The default bullet style for unordered lists is a solid disc, but you can change the bullet style using CSS, which we will cover in the next section.

The <li> tags must be direct children of the <ul> tag. You cannot have other elements or text directly inside the <ul> tag without wrapping them in <li> tags.

You can add as many list items as you need within the <ul> tag. Each <li> tag will create a new bullet point and a new line for the corresponding list item.

Styling Unordered Lists

By default, unordered lists in HTML are shown with solid disc bullet points. However, you can change how these bullet points look using CSS to match your website's design or to make the list look better.

To change the bullet style of an unordered list, use the list-style-type property in CSS. This property accepts several values that decide the shape or style of the bullet points. Some commonly used values are:

Value	Description
`disc`	The default solid disc bullet point
`circle`	An empty circle bullet point
`square`	A solid square bullet point
`none`	Removes the bullet points

Example: Change the bullet style of an unordered list using CSS

<html>
<head>
  <style>
    ul.circle {
      list-style-type: circle;
    }
    ul.square {
      list-style-type: square;
    }
    ul.none {
      list-style-type: none;
    }
  </style>
</head>
<body>
  <ul class="circle">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>

  <ul class="square">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>

  <ul class="none">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</body>
</html>

In addition to changing the bullet style, you can also customize the color and size of the bullet points using CSS. To change the color, use the color property on the <li> elements or the <ul> element itself. To change the size, you can use the font-size property on the <li> elements.

Example: Changing the color and size of bullet points

<html>
<head>
  <style>
    ul {
      color: blue;
    }
    li {
      font-size: 20px;
    }
  </style>
</head>
<body>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</body>
</html>

In this example, the bullet points will be shown in blue color, and the list items will have a font size of 20 pixels.

Remember that you can target specific unordered lists or list items using CSS classes or IDs to apply different styles to different lists on the same page.

By using CSS to style your unordered lists, you can make them look good, match your website's design, and improve the user experience.

Nesting Unordered Lists

In HTML, you can create nested unordered lists by placing one <ul> element inside an <li> element of another unordered list. This allows you to create a hierarchy of lists and sublist items.

When nesting unordered lists, it's important to think about indentation and the hierarchy of the list items. Each nested list should be indented to show that it is a sublist of the parent list item. This helps make the structure of the list clear and easy to understand.

Nested Unordered List Example

<ul>
  <li>Fruit
    <ul>
      <li>Apples</li>
      <li>Bananas</li>
      <li>Oranges</li>
    </ul>
  </li>
  <li>Vegetables
    <ul>
      <li>Carrots</li>
      <li>Broccoli</li>
      <li>Spinach</li>
    </ul>
  </li>
  <li>Dairy
    <ul>
      <li>Milk</li>
      <li>Cheese</li>
      <li>Yogurt</li>
    </ul>
  </li>
</ul>

We have a main unordered list with three list items: Fruit, Vegetables, and Dairy. Each of these list items contains a nested unordered list with more specific items related to the parent category.

When rendered in a web browser, this nested list will look like:

Fruit
- Apples
- Bananas
- Oranges
Vegetables
- Carrots
- Broccoli
- Spinach
Dairy
- Milk
- Cheese
- Yogurt

Notice how the sublist items are indented to show that they belong to the parent list item. This makes the hierarchy of the list clear and helps users understand the relationship between the main categories and their subitems.

You can nest unordered lists as deep as you need, but it's generally best to keep the nesting to a reasonable level to avoid making the list too complex or hard to follow. If you find yourself nesting lists more than 2 or 3 levels deep, consider if there might be a better way to organize the information.

When styling nested unordered lists with CSS, you can target the sublists separately from the main list. For example, you could use a different bullet style or color for sublists to help them stand out or to create a visual hierarchy.

Nested unordered lists are a useful tool for organizing and presenting information in a clear and structured way. By using indentation and hierarchy, you can make complex lists easier to understand and follow.

Accessibility Considerations

When you create unordered lists in HTML, it's important to keep accessibility in mind. This means making sure your lists are easy to understand and navigate for all users, including those who use assistive technologies like screen readers.

One key aspect of creating accessible unordered lists is to use meaningful list items. Each <li> element should contain clear and concise text that conveys the purpose or content of that list item. Avoid using empty list items or list items that contain only images or icons without any text alternatives.

Example: Basic Unordered List

<ul>
  <li>Home</li>
  <li>About Us</li>
  <li>Products</li>
  <li>Contact</li>
</ul>

Each list item contains a single, descriptive word that clearly indicates the purpose of that item in the list, which is helpful for users who rely on screen readers to navigate the page.

Another important consideration is to keep the structure of your unordered lists simple and clear. Use a single <ul> element to contain all the list items, and make sure each <li> element is a direct child of the <ul>. Avoid nesting other elements or content within the <li> elements unless it's necessary for the meaning or structure of the list.

Example: Nested Unordered List

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

This example shows a simple list structure with three main items, where the third item contains a nested sublist. The structure is clear and easy to follow, even for users who may not be able to see the visual layout of the list.

It's best to avoid too much nesting of unordered lists. While it's fine to use nested lists to show hierarchical relationships or to organize complex information, too much nesting can make the list hard to follow and understand, especially for users who rely on assistive technologies.

As a general rule, try to limit nesting to no more than 2 or 3 levels deep. If you find yourself needing more than that, consider if there might be a better way to organize or present the information, such as breaking it up into multiple lists or using headings and paragraphs instead.

Examples and Uses

Unordered lists are used in many places on websites and digital content. Here are some ways unordered lists help:

Navigation Menus

Unordered lists are used to make navigation menus on websites. They let you organize and show a list of links or menu items in a clear and easy-to-click way.

Example: Simple Navigation Menu

<ul>
  <li><a href="/">Home</a></li>
  <li><a href="/about">About</a></li>
  <li><a href="/services">Services</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>

Each menu item is wrapped in an <li> element, and the links are made using the <a> element with the right href attribute pointing to the matching page or section of the website.

Feature Lists

When showing the features or benefits of a product, service, or concept, unordered lists are great for presenting the information in a short and easy-to-read format.

Example: Key Features List

<h3>Key Features:</h3>
<ul>
  <li>Responsive design</li>
  <li>Easy customization</li>
  <li>SEO-friendly</li>
  <li>24/7 support</li>
</ul>

This unordered list shows the key features of a product or service, making it easy for readers to quickly understand the main points.

Bullet Point Lists in Articles

When writing articles, blog posts, or any form of content, using bullet points can help break up long paragraphs and make the information easier to scan and understand for readers.

Example: Social Media Strategy Tips

<p>To make a good social media strategy, think about the following:</p>
<ul>
  <li>Define your target audience</li>
  <li>Set clear goals and objectives</li>
  <li>Choose the right social media platforms</li>
  <li>Make engaging and relevant content</li>
  <li>Monitor and analyze your performance</li>
</ul>

By using an unordered list, the main points are clearly separated and easy to read, making the content more engaging and actionable for the reader.

Remember to keep your list items short, relevant, and easy to understand. Use meaningful text within the <li> elements and think about using CSS to style the bullet points and change the look of your unordered lists to match your website's design and branding.