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.
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.
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<!-- Additional list items as needed -->
</ul>
Let's see some examples showing the uses of ul tag.
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 code
Output
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 code
Output
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 code
Output
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 code
Output
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 code
Output