What is UL Tag in HTML? Definition and Usage
UL tag in HTML is used to create unordered lists of items. Learn how to use UL tag in HTML with syntax, attributes, and examples.
What is an ul Tag in HTML?
The <ul> tag in HTML stands for "unordered list." It is used to create a list of items, typically represented with bullet points. This tag is essential for grouping a collection of items that do not require a specific order or sequence. Each item in the list is placed within an <li> (list item) tag. The <ul> tag contributes to the semantic structure of a web page. Using semantic HTML tags like <ul> makes the content more understandable not only to users but also to search engines, which can lead to better SEO performance.
Syntax of ul Tag in HTML
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<!-- Additional list items as needed -->
</ul>Usage of HTML ul Tag with Examples
Let's see some examples showing the uses of ul tag.
Example 1: Basic Grocery List
Problem Statement: Create a simple grocery list.
<!DOCTYPE html>
<html>
<head>
<title>Basic Grocery List</title>
</head>
<body>
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Eggs</li>
<!-- Add more groceries as needed -->
</ul>
</body>
</html>
Copy codeOutput
Example 2: Nested List
Problem Statement: Create a nested list to categorize fruits and vegetables.
<!DOCTYPE html>
<html>
<head>
<title>Nested List</title>
</head>
<body>
<ul>
<li>Fruits
<ul>
<li>Apples</li>
<li>Bananas</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrots</li>
<li>Broccoli</li>
</ul>
</li>
</ul>
</body>
</html>
Copy codeOutput
Example 3: To-Do List
Problem Statement: Create a to-do list for daily tasks.
<!DOCTYPE html>
<html>
<head>
<title>To-Do List</title>
</head>
<body>
<ul>
<li>Wake up at 7 AM</li>
<li>Attend morning meeting</li>
<li>Work on project report</li>
<!-- Additional tasks can be added here -->
</ul>
</body>
</html>
Copy codeOutput
Example 4: Link List
Problem Statement: Create a list of links to different websites.
<!DOCTYPE html>
<html>
<head>
<title>Link List</title>
</head>
<body>
<ul>
<li><a href="http://example.com">Example Website</a></li>
<li><a href="http://example.org">Another Example</a></li>
<li><a href="http://example.net">Yet Another Example</a></li>
<!-- More links can be added here -->
</ul>
</body>
</html>
Copy codeOutput
Example 5: Styling List Items
Problem Statement: Create a list of items with custom bullet styling.
<!DOCTYPE html>
<html>
<head>
<title>Styled List</title>
<style>
ul.custom-bullets {
list-style-type: square; /* Changing bullet style */
}
</style>
</head>
<body>
<ul class="custom-bullets">
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
<!-- Add more items as needed -->
</ul>
</body>
</html>
Copy codeOutput
