HTML - <ul> Tag

HTML <ul> tag is used to create an unordered list. Unordered-list items are displayed as bullets, that can be in various forms, like a dot, a circle, or a square.

An unordered list(ul) is used for grouping a collection of items that do not have a numerical ordering. The unordered list contains the multiple <li> tags that used to create list items.

Syntax

<ul>
  .....
</ul>

Attribute

HTML ul tag supports Global and Event attributes of HTML. Accept some specific attributes as well which are listed below.

Attribute	Value	Description
compact	compact	Specifies that an unordered list should be presented in a compact style(Deprecated).
type	disc circle square	Specifies the different bullet styles of the list items(Deprecated).

Examples of HTML ul Tag

Bellow examples will illustrate the usage of ul tag. Where, when and how to use ul tag. How to create nested uonordered list as well.

Creating an Unordered List

In the following example, we are creating an unordered list in HTML to display the related items of the list in the default bullet format.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML ul Tag</title>
</head>
<body>
    <!-- Creating an Unordered list-->
    <h3>
       List of technologies for Basic Web Development
    </h3>
    <ul>
       <li>HTML</li>
       <li>CSS</li>
       <li>JavaScript</li>
    </ul>
</body>
</html>

Creating different Bullets of Unordered List

Following is another example of the unordered list. Here, we are using the type attribute to display the list of items in the different bullet formats.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML ul Tag</title>
</head>
<body>
    <!-- Creating an Unordered list-->
    <h3>Default or Disc Unordered List</h3>
    <ul type="disc">
       <li>HTML</li>
       <li>CSS</li>
       <li>JavaScript</li>
    </ul>
    
    <h3>Cicle Unordered List</h3>
    <ul type="circle">
       <li>HTML</li>
       <li>CSS</li>
       <li>JavaScript</li>
    </ul>
    
    <h3>Square Unordered List</h3>
    <ul type="square">
       <li>HTML</li>
       <li>CSS</li>
       <li>JavaScript</li>
    </ul>
</body>
</html>

Nested Unordered List

In the following example, we are creating the nested unordered list to display the related items of the lists.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML ul Tag</title>
</head>

<body>
    <!-- Creating an Unordered Nested list-->
    <h3>List of Tools and Technologies for Web Development</h3>
    <ul type="disc">
        <li>HTML</li>
        <li>CSS
            <ul>
                <li>Bootstrap / Tailwind CSS</li>
                <li>SASS / LESS</li>
            </ul>
        </li>
        <li>JavaScript
            <ul>
                <li>ReactJS</li>
                <li>NodeJS</li>
            </ul>
        </li>
    </ul>
</body>

</html>

Supported Browsers

Tag
ul	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm

Print Page