How to create an unordered list in HTML ? - GeeksforGeeks

09 Dec, 2021
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
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
bhaskargeeksforgeeks
sooda367
HTML-Attributes
HTML-Questions
HTML-Tags
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Types of CSS (Cascading Style Sheet)
How to Insert Form Data into Database using PHP ?
REST API (Introduction)
Design a web page using HTML and CSS
Form validation using HTML and JavaScript
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript
Convert a string to an integer in JavaScript