HTML Unordered List

An HTML unordered list is used to group related items where the order is not important, typically displayed with bullet points.

• Uses <ul> and <li> tags to structure list items
• Displays items with default bullets (can be styled using CSS)
• Supports nesting to represent hierarchical data

Output:

Syntax:

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

• <ul>: This tag defines the unordered list. It tells the browser that the following items are part of a list where the order does not matter.
• <li>: This tag defines each list item. Each <li> represents an individual item in the list.

Unordered Lists Style Types

In HTML, unordered lists (<ul>) are used to display items without any specific order, and by default, they show bullet points. However, the appearance of these bullets can be changed using CSS with different styles.

1. Square Bullet Style

To change the bullets in an unordered list to squares, the list-style-type property in CSS can be set to square.

Output:

2. Circle Bullet Style

To change the bullets in an unordered list to circles, the list-style-type property in CSS can be set to circle.

Output:

3. Removing Bullets

To remove the default bullets in an unordered list, the list-style-type property in CSS can be set to none.

Output:

4. Nested Unordered List

A nested unordered list is simply an unordered list (<ul>) inside another list item (<li>) of an existing unordered list. This is useful for representing hierarchical or grouped information, like categories and subcategories.

Output:

5. Horizontal Unordered List

The unordered list may need to be displayed horizontally, such as in a navigation menu. This can be accomplished with the help of CSS.

Output:

Using Unordered Lists for Navigation

Unordered lists are often used for creating navigation menus on websites. They are great for displaying a list of links where the order of the items doesn’t matter.

Output: