Open In App

How to create an unordered list in HTML ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will know how to create an unordered list in HTML. An Unordered list <ul> tag in HTML is used to define the unordered list item in an HTML document. It contains the list items <li> element. The <ul> tag requires opening and closing tags. 

Syntax: 

<ul> List of items </ul>

Attribute: This tag contains two attributes which are listed below: 

  • compact: It will render the list smaller.
  • type: It specifies which kind of marker is used in the list.

Note: The <ul> attributes are not supported by HTML 5.

Example: This example illustrates the use of an unordered list by using the <ul> tag. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Unordered list</title>
</head>
  
<body>
    <h2>Welcome To GeeksforGeeks Learning</h2>
    <h5>List of available courses</h5>
    <ul>
        <li>Data Structures & Algorithm</li>
        <li>Web Technology</li>
        <li>Aptitude & Logical Reasoning</li>
        <li>Programming Languages</li>
    </ul>
</body>
  
</html>


Output:

HTML Unordered list

There are several list-type attributes that can be used with unordered list items.

HTML <li> type Attribute: The <li> type attribute in HTML is used to specify the type of a list items. This attribute also defines the style of the bullet point of the list items. 

<li type="disc|circle|square">

Attribute Values: 

  • disc: It is the default value. It creates a filled circle.
  • circle: It creates an unfilled circle.
  • square: It creates a filled square.

Note: The <li> type attribute is not supported by HTML 5.

Example: This example describes the HTML Unordered List.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>How to define an unordered list</title>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h2>HTML5: How to define an unordered list?</h2>
    <p>GeeksforGeeks courses List:</p>
  
    <ul>
        <li>Geeks</li>
        <li>Sudo</li>
        <li>Gfg</li>
        <li>Gate</li>
        <li>Placement</li>
    </ul>
</body>
  
</html>


Output:

HTML Unordered list

The HTML unordered list has various list item markers:

Disc: It is used to set the list item marker to a bullet i.e default.

Example 1: This example illustrates the use of an unordered list with a disc bullet by setting the list-style-type property to disc.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>HTML ul tag</title>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h2>Unordered List with Disc Bullets</h2>
    <p>GeeksforGeeks courses List:</p>
  
    <ul style="list-style-type:disc;">
        <li>Geeks</li>
        <li>Sudo</li>
        <li>Gfg</li>
        <li>Gate</li>
        <li>Placement</li>
    </ul>
</body>
  
</html>


Output:

Unordered list with disc list item marker

Circle: It is used to set the list item marker to a circle.

Example 2: In this example, we have used an unordered list with a circle bullet by setting the list-style-type property to circle.

HTML




<!DOCTYPE html>
<html>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h2>Unordered List with Circle Bullets</h2>
    <p>GeeksforGeeks courses List:</p>
  
    <ul style="list-style-type: circle">
        <li>Geeks</li>
        <li>Sudo</li>
        <li>Gfg</li>
        <li>Gate</li>
        <li>Placement</li>
    </ul>
</body>
  
</html>


Output:

Unordered list with circle list item marker

Square: It is used to set the list item marker to a square.

Example 3: In this example, we have used an unordered list with a square bullet by setting the list-style-type property to square.

HTML




<!DOCTYPE html>
<html>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h2>Unordered List with Square Bullets</h2>
    <p>GeeksforGeeks courses List:</p>
  
    <ul style="list-style-type: square">
        <li>Geeks</li>
        <li>Sudo</li>
        <li>Gfg</li>
        <li>Gate</li>
        <li>Placement</li>
    </ul>
</body>
  
</html>


Output:

Unordered list with square list item marker

none: It is used to set the list item marker with no mark.

Example 4: This example illustrates the use of an unordered list with a no bullet by setting the list-style-type property to none.

HTML




<!DOCTYPE html>
<html>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h2>Unordered List with No Bullets</h2>
    <p>GeeksforGeeks courses List:</p>
  
    <ul style="list-style-type: none">
        <li>Geeks</li>
        <li>Sudo</li>
        <li>Gfg</li>
        <li>Gate</li>
        <li>Placement</li>
    </ul>
</body>
  
</html>


 Output:

Unordered list without list item marker

Nested Unordered List: It is used to nest the list items i.e., list inside another list.

Example: This example describes the use of the unordered list in a nested format.

HTML




<!DOCTYPE html>
<html>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h2>Nested Unordered List</h2>
    <p>GeeksforGeeks courses List:</p>
  
    <ul>
        <li>DSA</li>
        <ul>
            <li>Array</li>
            <li>Linked List</li>
            <li>stack</li>
            <li>Queue</li>
        </ul>
        <li>Web Technologies</li>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
        <li>Aptitude</li>
        <li>Gate</li>
        <li>Placement</li>
    </ul>
</body>
  
</html>


Output:

Nested Unordered lIst

Supported Browsers:

  • Google Chrome 94.0 & above
  • Firefox 92.0 & above
  • Microsoft Edge 93.0
  • IE 11.0
  • Safari 14.1
  • Opera 78.0


Last Updated : 09 Dec, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads