HTML - <ul> Tag

Quiz

Introduction to <ul&gtl Tag

The HTML <ul> tag is used to create an unordered list. Items in an unordered-list are displayed as bullets, which can take various forms, such as dots, a circles, or a squares.

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

Syntax

Following is the syntax of <ul> tag −

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

Attributes

The HTML <ul> tag supports Global and Event attributes. It also accepts some specific attributes, 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 for list items(Deprecated).

Example: Creating an Unordered List

In the following example, we create an unordered list in HTML to display related items in the default bullet format. This HTML code creates a webpage with a heading and an unordered list, displaying "HTML", "CSS", and "JavaScript".

<!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>

Example: Different Bullet Styles

Here is another example of an unordered list. In this example, we use the type attribute to display the list of items in 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>

Example: Nested Unordered List

In the following example, we create a nested unordered list to display related items. This HTML code generates a webpage with a heading and a nested unordered list, showcasing various web development tools and technologies.

<!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