Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to create an unordered list in HTML ?

  • Last Updated : 27 Oct, 2021

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

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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:

Unordered List: 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.

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

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



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:

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

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

Example: 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:



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

Example: 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:

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

Example: 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:

 

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

 

Example:

 

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:

 

 

Supported Browsers:

 

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

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :