An unordered list in HTML is used to group a set of list items that don't need to be in a specific order. The items in an unordered list are usually displayed with bullet points by default. Here are the some key features of HTML unordered lists:
- No Order: Lists items without a specific sequence.
- Customizable Bullets: Bullets can be changed with CSS.
- Nesting: Allows lists within lists.
- Simple Syntax: Created with <ul> and <li>.
Syntax
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
In the above syntax
<ul>: This tag defines the unordered list. It tells the browser that the following items are part of a list where the order does not matter.<li>: This tag defines each list item. Each <li> represents an individual item in the list.
Now let's understand this with the help of example:
HTML
<html>
<head>
<title>
HTML Unordered Lists
</title>
</head>
<body>
<h2>HTML Unordered Lists</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>React</li>
</ul>
</body>
</html>
Output
Unordered Lists Style Types
In HTML, unordered lists (<ul>) are used to display items without any specific order, and by default, they show bullet points. However, the appearance of these bullets can be changed using CSS with different styles.
Here are some common list-style-type values that you can apply to unordered lists to change the bullet style.
1. Square Bullet Style
To change the bullets in an unordered list to squares, the list-style-type property in CSS can be set to square. Let's understand this with the help of example
HTML
<html>
<head>
<title>
Square type unordered list
</title>
</head>
<body>
<h2>Square type unordered list</h2>
<ul style="list-style-type: square">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>React</li>
</ul>
</body>
</html>
Output:
Output2. Circle Bullet Style
To change the bullets in an unordered list to circles, the list-style-type property in CSS can be set to circle. Let's understand this with the help of example
HTML
<html>
<head>
<title>
Circle type unordered list
</title>
</head>
<body>
<h2> Circle type unordered list</h2>
<ul style="list-style-type:circle;">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>React</li>
</ul>
</body>
</html>
Output:
Output3. Removing Bullets
To remove the default bullets in an unordered list, the list-style-type property in CSS can be set to none. Let's understand this with the help of example
HTML
<html>
<head>
<title>
None type unordered list
</title>
</head>
<body>
<h2>None type unordered list</h2>
<ul style="list-style-type:none;">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>React</li>
</ul>
</body>
</html>
Output:
OutputNested Unordered List
A nested unordered list is simply an unordered list (<ul>) inside another list item (<li>) of an existing unordered list. This is useful for representing hierarchical or grouped information, like categories and subcategories. Let's understand this with the help of example.
HTML
<html>
<head>
<title>Nested unordered list</title>
</head>
<body>
<h2>Nested unordered list</h2>
<ul>
<li>Geeks</li>
<li>
Web Development
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
<li>Javascript</li>
</ul>
<ul type="square">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
</body>
</html>
Output
OutputHorizontal Unordered List
The unordered list may need to be displayed horizontally, such as in a navigation menu. This can be accomplished with the help of CSS. Let's understand this with the help of example . Let's understand this with the help of example:
HTML
<html>
<head>
<title>HTML Horizontal Unordered List</title>
<style>
body {
text-align: center;
}
ul {
overflow: hidden;
background-color: #1d6b0d;
list-style-type: none;
}
li {
float: left;
}
li a {
text-decoration: none;
color: white;
padding: 0.5rem;
}
</style>
</head>
<body>
<h3>HTML Horizontal Unordered List</h3>
<ul>
<li><a href="#course">Course</a></li>
<li><a href="#Blog">Blogs</a></li>
<li>
<a href="#Content">Content</a>
</li>
</ul>
</body>
</html>
Output
OutputUsing Unordered Lists for Navigation
Unordered lists are often used for creating navigation menus on websites. They are great for displaying a list of links where the order of the items doesn’t matter. Let's understand this with the help of example.
HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation Menu</title>
<style>
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline;
margin-right: 20px;
}
</style>
</head>
<body>
<h1>Website Navigation</h1>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</body>
</html>
Output
Conclusion
An unordered list in HTML groups items without a specific order using <ul> and <li> tags. It displays bullet points by default, which can be customized with CSS (e.g., circles, squares, or no bullets). Unordered lists are useful for organizing content, including nested and horizontal lists, and are commonly used for navigation menus.
Similar Reads
HTML Tutorial
HTML stands for HyperText Markup Language. It is the standard language used to create and structure content on the web. It tells the web browser how to display text, links, images, and other forms of multimedia on a webpage. HTML sets up the basic structure of a website, and then CSS and JavaScript
10 min read
HTML Introduction
HTML stands for HyperText Markup Language. It is the standard language used to create and structure content on the web. It defines the structure of a webpage by using a series of elements, tags, and attributes to organize text, images, links, and other multimedia elements.HTML is a markup language,
7 min read
HTML Editors
An HTML Editor is a software application designed to help users create and modify HTML code. It often includes features like syntax highlighting, tag completion, and error detection, which facilitate the coding process. There are two main types of HTML editors: Text-Based Editors - Allow direct codi
5 min read
HTML Basics
HTML (HyperText Markup Language) is the standard markup language used to create and structure web pages. It defines the layout of a webpage using elements and tags, allowing for the display of text, images, links, and multimedia content. As the foundation of nearly all websites, HTML is used in over
6 min read
HTML Comments
HTML comments are used to add notes or explanations in the HTML code that are not displayed by the browser.They are useful for documenting the code, making it easier to understand and maintain.To add a comment, use the syntax <!-- your comment here -->. HTML<!-- This is a comment and will n
4 min read
HTML Elements
An HTML Element consists of a start tag, content, and an end tag, which together define the element's structure and functionality. Elements are the basic building blocks of a webpage and can represent different types of content, such as text, links, images, or headings.For example, the <p> ele
5 min read
HTML Attributes
HTML Attributes are special words used within the opening tag of an HTML element. They provide additional information about HTML elements. HTML attributes are used to configure and adjust the element's behavior, appearance, or functionality in a variety of ways. Each attribute has a name and a value
8 min read
HTML Headings
HTML headings are used to define the titles and subtitles of sections on a webpage. They help organize the content and create a structure that is easy to navigate.Proper use of headings enhances readability by organizing content into clear sections.Search engines utilize headings to understand page
4 min read
HTML Paragraphs
A paragraph in HTML is simply a block of text enclosed within the <p> tag. The <p> tag helps divide content into manageable, readable sections. It’s the go-to element for wrapping text in a web page that is meant to be displayed as a distinct paragraph.Syntax:<p> Content</p>H
5 min read
HTML Text Formatting
HTML text formatting refers to the use of specific HTML tags to modify the appearance and structure of text on a webpage. It allows you to style text in different ways, such as making it bold, italic, underlined, highlighted, or struck-through. Table of ContentCategories of HTML Text FormattingLogic
4 min read