HTML Tutorial
HTML Unordered Lists: A Comprehensive Guide
Introduction
An HTML Unordered List (<ul>) is a fundamental element for displaying a collection of items where the order does not matter. This list format uses bullets to denote each item, making it ideal for presenting information in a non-sequential manner. The <ul> tag, combined with the <li> tag, allows you to organize content clearly and effectively.
Table of Contents
- Introduction
- Basic Syntax
- Unordered Lists Style Types
- Examples of HTML Unordered Lists
- Nested Unordered Lists
- Horizontal Unordered Lists
- Conclusion
- HTML Unordered Lists – FAQ
Basic Syntax
To create a basic unordered list, use the following syntax:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
Unordered Lists Style Types
The style of bullets in unordered lists can be customized using the list-style-type CSS property. Here are the different values you can use:
disc: The default bullet style, represented as a filled circle.circle: Displays the list marker as an empty circle.square: Uses a filled square as the list marker.none: Removes the list markers altogether.
Examples of HTML Unordered Lists
Example 1: Basic Unordered List
<!DOCTYPE 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: Displays a simple list with default disc bullets.
Example 2: Disc Type Unordered List
<!DOCTYPE html>
<html>
<head>
<title>Disc Type Unordered List</title>
</head>
<body>
<h2>Disc Type Unordered List</h2>
<ul style="list-style-type: disc;">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>React</li>
</ul>
</body>
</html>
Output: Uses default disc markers.
Example 3: Square Type Unordered List
<!DOCTYPE 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: Displays list items with square markers.
Example 4: Circle Type Unordered List
<!DOCTYPE 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: Uses circle markers.
Example 5: None Type Unordered List
<!DOCTYPE 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: Displays the list without any markers.
Nested Unordered Lists
You can nest unordered lists within each other to create a hierarchical structure.
Example: Nested Unordered List
<!DOCTYPE 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>
</body>
</html>
Output: Displays a nested list with additional bullet points.
Horizontal Unordered Lists
Unordered lists can be styled horizontally, similar to navigation bars, using CSS.
Example: Horizontal Unordered List
<!DOCTYPE html>
<html>
<head>
<title>HTML Horizontal Unordered List</title>
<style>
body {
text-align: center;
}
ul {
overflow: hidden;
background-color: #1d6b0d;
list-style-type: none;
padding: 0;
}
li {
float: left;
}
li a {
text-decoration: none;
color: white;
padding: 0.5rem;
display: block;
}
</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: Creates a horizontal list resembling a navigation bar.
Conclusion
The <ul> tag in HTML is a versatile tool for creating unordered lists with various styling options. Whether you need default bullet points, circles, squares, or no markers, the <ul> tag offers flexibility to suit different design needs. Nested and horizontal lists further enhance the structure and layout of your web content.
HTML Unordered Lists – FAQs
What is an HTML unordered list?
An HTML unordered list is a collection of items displayed with bullet points, where the sequence of items does not matter.
How to create an unordered list in HTML?
Use the <ul> tag with nested <li> (list item) tags.
What does the <ul> tag represent?
The <ul> tag represents an unordered list, which displays items with bullet points.
What is the default bullet style for an unordered list?
The default bullet style is a disc (filled circle).
How to change the bullet style of an unordered list?
Use the list-style-type CSS property to specify the bullet style (e.g., circle, square, none). Example: ul { list-style-type: square; }
How to nest unordered lists in HTML?
Place a <ul> tag inside an <li> tag of another <ul> to create a nested unordered list.
Can you mix unordered and ordered lists?
Yes, you can nest an ordered list (<ol>) within an unordered list (<ul>) and vice versa.
Thank You for Visiting Codeezy.org!
We’re thrilled to have you as part of our coding community. Your engagement and support inspire us to continue providing high-quality resources and tools to enhance your web development journey. Whether you’re a beginner or an experienced coder, we hope you found valuable insights and tools here at Codeezy.
Stay connected for more tips, tutorials, and updates to help you code with ease. Thank you for choosing Codeezy.org—your growth as a developer is our motivation!
Happy coding!