In this lesson, you'll learn how to create unordered (bulleted) lists in HTML using the <ul> tag. Unordered lists are ideal for displaying items that don't require a specific order, such as features, ingredients, or any collection of related items.

What Is an HTML Unordered List?

An HTML unordered list is a list of items where the sequence doesn't matter. Each item in the list is typically marked with a bullet point. The <ul> tag is used to create unordered lists, and each list item is wrapped in an <li> (list item) tag. Unordered lists help organize content in a clear and readable manner, enhancing the structure of your web pages.

Syntax of the <ul> Tag

The basic syntax for creating an unordered list is as follows:

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

• <ul>: The opening tag for the unordered list.
• <li>: The list item tag used to define each item within the list.
• </ul>: The closing tag for the unordered list.

Examples of HTML Unordered Lists

Let's explore two practical examples of using the <ul> tag to create unordered lists.

1. Basic Unordered List

This example demonstrates a simple unordered list without any additional attributes. The list items are marked with default bullet points.

Explanation:

• The <ul> tag creates an unordered list of features offered by TechGrind.io.
• Each <li> tag represents a specific feature.
• The browser displays bullet points before each list item, making the content organized and easy to read.

2. Unordered List with type Attribute

The type attribute allows you to change the style of the bullet points in an unordered list. While the type attribute is deprecated in HTML5, it's still supported by many browsers for backward compatibility. Alternatively, CSS is recommended for styling lists in modern web development.

Explanation:

• The <ul> tag has a type="circle" attribute that changes the default bullet points from filled circles to hollow circles.
• Each <li> tag represents an item with the customized bullet style.
• This attribute allows for basic customization of list appearance without using CSS.

Note: For more advanced and flexible styling of list bullets, it's recommended to use CSS. Here's how you can achieve similar results with CSS:

Explanation:

• CSS Styling: The <style> section defines a CSS class called .square-bullets that changes the bullet points of the list to hollow circles using list-style-type: circle;.
• Applying the Class: The <ul> tag has the class square-bullets, which applies the custom bullet style to all its <li> items.
• List Items: Each <li> tag represents an individual item in the unordered list, now displayed with hollow circle bullets instead of the default filled discs.
• Result: This customization enhances the visual presentation of the list, making it align better with the website's design aesthetics.

Understanding how to effectively use unordered lists enhances the structure and presentation of your web content, making it more user-friendly and visually appealing. In the next lesson, we'll explore HTML Nested Lists, where you'll learn how to create more complex list structures by embedding lists within lists.