Which tags are used to create an unordered list on a Web pages?

<ul>: The Unordered List element

The <ul> HTML element represents an unordered list of items, typically rendered as a bulleted list.

Table of Contents Show

<ul>: The Unordered List element
Lists Bring Order To Web Pages: Here’s The HTML Code To Create Them
HTML Unordered Lists
How to create an unordered list in HTML ?
How to Make Lists in HTML

Content categories	Flow content, and if the <ul> element's children include at least one <li> element, palpable content.
Permitted content	Zero or more <li>, <script> and <template> elements.
Tag omission	None, both the starting and ending tag are mandatory.
Permitted parents	Any element that accepts flow content.
Implicit ARIA role	list
Permitted ARIA roles	directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar, tree
DOM Interface	HTMLUListElement

Lists Bring Order To Web Pages: Here’s The HTML Code To Create Them

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more

Lists are used all the time on the web. Articles, website navigation menus, and product features on e-commerce websites all make frequent use of lists – even when you can’t tell that a list is being used just by looking at the web page.

There are three types of lists you can use, and this quick guide will show you how to use each.

Contents

1 Unordered Lists
2 Ordered Lists
- 2.1 Changing Numbering
  - 2.1.1 Creating a Countdown List
  - 2.1.2 Starting a List on a Specific Number
  - 2.1.3 Changing the Numbering Style
3 Description Lists
4 Nested Lists
5 Using Lists for Menus
6 Styling Lists
7 Closing Thoughts
8 Related Elements

HTML Unordered Lists

❮ Previous Next ❯

The HTML <ul> tag defines an unordered (bulleted) list.

How to create an unordered list in HTML ?

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.

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>

<h2>GeeksforGeeks</h2>

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

<h2>GeeksforGeeks</h2>

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

<h2>GeeksforGeeks</h2>

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

<h2>GeeksforGeeks</h2>

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

<h2>GeeksforGeeks</h2>

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

<h2>GeeksforGeeks</h2>

<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

Article Tags :

HTML

Web Technologies

Web technologies Questions

HTML-Attributes

HTML-Questions

HTML-Tags

Practice Tags :

HTML

Read Full Article

10 Lists

Contents

Introduction to lists
Unordered lists (UL), ordered lists (OL), and list items (LI)
Definition lists: the DL, DT, and DD elements
1. Visual rendering of lists
The DIR and MENU elements

HTML Lists

In this tutorial you will learn how to create different types of lists in HTML.

How to Make Lists in HTML

In HTML, we can list items either in an ordered or unordered fashion.

An ordered list uses numbers or some sort of notation that indicates a series of items.

For example, an ordered list can start with number 1, and continue through 2, 3, 4, and so on. Your ordered list can also start with the letter A and go through B, C, D, and so on.

Here is an example of an ordered list with students' names and marks.

Ordered list of students

On the other hand, we have unordered lists, like a TODO list for example. Here I am so passionate about coding that I skipped my breakfast 🤓.

Unordered TODO list

There is one more type of list called a description list that we will learn as well below.

Now let's get into a bit more detail and see how to create each type of list in HTML.