Can I use a tag inside another ?

Yes, you can nest tags to create hierarchical lists. Each nested should be placed inside a of the parent list.

Table of contents

Introduction

Definition and Usage:

Attributes of the <ul> Tag

3.1.

1. type (deprecated) Attribute

3.1.1.

Example:

3.2.

2. Global Attributes

3.2.1.

Example:

3.3.

3. compact (deprecated)

Types of List Styles

4.1.

1. Disc (Default)

4.1.1.

Example:

4.2.

2. Circle

4.2.1.

Example:

4.3.

3. Square

4.3.1.

Example:

4.4.

4. None

4.4.1.

Example:

Nested Unordered Lists

5.1.

Example

Browser Support

Frequently Asked Questions

7.1.

What is the purpose of the <ul> tag in HTML?

7.2.

How can I change the bullet style in an unordered list?

7.3.

Can I use a <ul> tag inside another <ul>?

Conclusion

Last Updated: Jan 3, 2025

Easy

<ul> Tag in HTML

Author Sinki Kumari

Do you think IIT Guwahati certified course can help you in your career?

Yes

Introduction

The HTML <ul> tag is used to create unordered lists, which are collections of items displayed with bullet points by default. This tag is widely utilized in web development for organizing content such as navigation menus, lists of features, or other non-sequential data. Unlike ordered lists, items within an unordered list do not have a specific order or ranking.

In this article we will discuss the purpose of the <ul> tag, its attributes, list styles, and how to create nested unordered lists with proper examples and code snippets.

Definition and Usage:

The <ul> tag in HTML stands for "unordered list". It's used to create a list of items with bullet points. The <ul> element can contain one or more <li> elements, each representing a list item. Let’s take a basic example of how to use the <ul> tag:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Unordered List Example</title>
</head>
<body>
    <h1>Unordered List Example</h1>
    <ul>
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
    </ul>
</body>
</html>

This code will render as:

You can nest <ul> tags inside each other to create sub-lists. The browser will typically indent the sub-list and use a different bullet style to visually distinguish it, like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nested Unordered List Example</title>
</head>
<body>
    <h1>Nested Unordered List Example</h1>
    <ul>
        <li>First item</li>
        <li>Second item
            <ul>
                <li>Sub-item 1</li>
                <li>Sub-item 2</li>
            </ul>
        </li>
        <li>Third item</li>
    </ul>
</body>
</html>

Which will look like:

So in summary, the <ul> tag is a container for list items that don't need to be in a particular order. It's a fundamental part of creating clear, organized content in HTML.

Attributes of the <ul> Tag

The <ul> tag in HTML comes with several attributes that allow you to customize the appearance and functionality of the unordered list. Below are the key attributes:

1. type (deprecated) Attribute

Specifies the bullet style for the list items. Possible values are:

- disc (default)

- circle

- square

- none

Example:

   <ul type="square">
     <li>Item 1</li>
     <li>Item 2</li>
   </ul>

Note: This attribute is deprecated in HTML5. Use CSS instead.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Unordered List Example</title>
</head>
<body>
    <h2>Bullet Styles Using the `type` Attribute</h2>
    <ul type="circle">
        <li>Circle Bullet</li>
        <li>Another Circle Bullet</li>
    </ul>
    <ul type="square">
        <li>Square Bullet</li>
        <li>Another Square Bullet</li>
    </ul>
</body>
</html>

Output

2. Global Attributes

id: Assigns a unique identifier to the list.
class: Adds one or more CSS classes to the list for styling.
style: Adds inline CSS to customize the appearance.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Global Attributes in `<ul>`</title>
    <style>
        .custom-list {
            color: blue;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <ul id="unique-list" class="custom-list" style="background-color: lightgray;">
        <li>Styled Item 1</li>
        <li>Styled Item 2</li>
    </ul>
</body>
</html>

Output

3. compact (deprecated)

Specifies that the list should be rendered in a compact style if the browser supports it. This is a boolean attribute.

Example:

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

Note: This attribute is deprecated and not supported in HTML5.

Types of List Styles

The bullet styles in an unordered list can be modified using CSS. Here are the common styles:

1. Disc (Default)

The default bullet style in unordered lists.

Example:

<ul style="list-style-type: disc;">
    <li>Default Disc Bullet</li>
    <li>Another Item</li>
</ul>

2. Circle

Replaces default bullets with hollow circles.

Example:

<ul style="list-style-type: circle;">
    <li>Circle Bullet</li>
    <li>Another Item</li>
</ul>

3. Square

Uses square bullets for the items.

Example:

<ul style="list-style-type: square;">
    <li>Square Bullet</li>
    <li>Another Item</li>
</ul>

4. None

Removes bullets entirely, presenting the list items as plain text.

Example:

<ul style="list-style-type: none;">
    <li>No Bullet 1</li>
    <li>No Bullet 2</li>
</ul>

Output: The list items appear without any bullet symbols.

Nested Unordered Lists

You can create nested lists by adding another <ul> inside a list item. This is useful for representing hierarchical data or subcategories.

Example

<!DOCTYPE html>
<html>
<head>
    <title>Nested Unordered List</title>
</head>
<body>
    <h2>Nested List Example</h2>
    <ul>
        <li>Fruits
            <ul>
                <li>Apple</li>
                <li>Banana</li>
            </ul>
        </li>
        <li>Vegetables
            <ul>
                <li>Carrot</li>
                <li>Broccoli</li>
            </ul>
        </li>
    </ul>
</body>
</html>

Output

Browser Support

The <ul> tag has excellent browser support. It works in all modern web browsers, like:

Chrome
Firefox
Safari
Opera
Internet Explorer (IE)
Microsoft Edge

Even old versions of these browsers, as well as many other less common browsers, support the <ul> tag. You can confidently use <ul> in your HTML code and expect it to work for virtually all users, regardless of their browser choice.

There may be some minor differences in default styling of <ul> lists between browsers (e.g., the bullet style or indentation), but the basic functionality will be the same. You can always use CSS to customize the appearance of your lists to ensure consistency across browsers if needed.

In summary, you don't need to worry about browser compatibility when using the <ul> tag - it's a safe and reliable choice that will work for all your website visitors.

Frequently Asked Questions

What is the purpose of the <ul> tag in HTML?

The <ul> tag creates an unordered list, which is a collection of items displayed with bullet points. It is commonly used to group items without a particular order.

How can I change the bullet style in an unordered list?

You can change the bullet style using the type attribute in HTML or the list-style-type property in CSS. Examples include disc, circle, square, and none.

Can I use a <ul> tag inside another <ul>?

Yes, you can nest <ul> tags to create hierarchical lists. Each nested <ul> should be placed inside a <li> of the parent list.

Conclusion

The <ul> tag is an essential HTML element for creating unordered lists, making it easier to present information in a structured format. In this article, we covered the <ul> tag’s attributes, different list styles, and how to create nested unordered lists. By mastering these concepts, you can improve your HTML skills and create more user-friendly web pages.

You can also check out our other blogs on Code360.

Live masterclass

Microsoft SDE Roadmap: Use AI Tools to Succeed

by Pranav Malik

19 May, 2025

01:30 PM

519+ registered

Break into MAANG Data Analyst roles from Non-Tech Profession

by Abhishek Soni

20 May, 2025

01:30 PM

436+ registered

SDE LinkedIn & Naukri Hacks to Get More Recruiter Calls

by Shantanu Shubham

21 May, 2025

01:30 PM

325+ registered

Amazon Data Analyst: Advanced Excel & AI Interview Tips

by Megna Roy

22 May, 2025

01:30 PM

314+ registered

Microsoft SDE Roadmap: Use AI Tools to Succeed

by Pranav Malik

19 May, 2025

01:30 PM

519+ registered

Break into MAANG Data Analyst roles from Non-Tech Profession

by Abhishek Soni

20 May, 2025

01:30 PM

436+ registered

View more events