UL Tag in HTML

UL Tag

The <ul> tag, which stands for "unordered list," is a crucial HTML component used to generate lists of items where the order of the items has no significance.

Unordered lists (<ul>) are used when the order of the items is not important, and you wish to present the elements with bullet points or other markers to denote separation, in contrast to ordered lists (<ol>), which depict lists with a defined order.

Purpose:

The <ul> tag's primary objective is to structure and arrange content non-sequentially.
It is frequently used to create content that doesn't require a rigid sequence, such as lists of items and navigation menus. List items (<li>) are used within an <ul> element to define each item within the list.
By default, list items are presented as bullet points; however, this can be changed using CSS.

Basic Syntax and Structure

Syntax:

<ul>
    <!-- List items go here -->
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Unordered lists combine the <ul> tag with< li> elements. One item in the list is represented by each <li> element.

Here is a simple example of how to use the HTML <ul> tag to create an unordered list:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

This example creates an unordered list with bullet points by enclosing three list items (<li>) in <ul> tags as follows:

Attributes of the UL Tag

Several attributes are supported by the HTML <ul> tag and can be used to modify the appearance and behaviour of unordered lists. Here are some typical attributes and their outcomes:

1. Type Attribute:

The type attribute describes the bullet point or marker used for list items.

The common values "disc" (the default filled circle), "circle" (the empty circle), and "square" (the filled square) are all examples.

Example: This example uses the type attribute with different values.

<!Doctype Html>  
<Html>     
<Head>      
<Title>     
Ul tag with a Type attribute  
</Title>  
</Head>  
<Body>   
Hello User!.... <br>  
The following list uses the Square mark in front of the list items.   
<ul type="square">  
<li> Cars </li>  
<li> bikes </li>  
<li> Aeroplanes </li>  
<li> Trains </li>  
<li> Ships </li>  
</ul>  
The following list uses the Circle mark in front of list items.   
<ul type="Circle">  
<li> BMW </li>  
<li> Audi </li>  
<li> Mercedes </li>  
<li> Jaguar </li>  
<li> Lamborghini </li>  
</ul>  
The following list uses the Disc mark in front of list items.   
<ul type="disc">  
<li> Apache </li>  
<li> KTM </li>  
<li> R15 </li>  
<li> Ducati </li>  
<li> Harley-Davidson </li>  
</ul>  
</Body>   
</Html>  

Output:

2. Class Attribute

The class attribute enables you to provide the <ul> element with a CSS class that may be used to style or target the list with CSS.

Example:

<html>
<head>
    <style>
        .custom-list{
            color:yellow;
            background-color:grey;
        }
    </style>
</head>
<body>
<ul class="custom-list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
</body>
</html>

Output:

Creating Nested Unordered Lists in HTML

You may create hierarchical structures with nested unordered lists, where a sub-list is contained within an item of an outer list. A <ul> (unordered list) or <ol> (ordered list) element is inserted inside a <li> (list item) element to accomplish this. To build nested unordered lists, follow these steps:

To start working with the outer unordered list, open an outer <ul> element.
Open a second <ul> element inside a <li> element of the outer list to produce the inner unordered list.
To specify the things inside the inner <ul>, add <li> elements.

Example of Nested Unordered Lists:

To demonstrate nested unordered lists, let's create a simple example. Consider making a list of animals with sub-lists for each animal category:

Example:

<ul>
    <li>Mammals
        <ul>
            <li>Lion</li>
            <li>Elephant</li>
            <li>Monkey</li>
        </ul>
    </li>
    <li>Birds
        <ul>
            <li>Eagle</li>
            <li>Ostrich</li>
            <li>Parrot</li>
        </ul>
    </li>
    <li>Reptiles
        <ul>
            <li>Crocodile</li>
            <li>Snake</li>
            <li>Turtle</li>
        </ul>
    </li>
</ul>

Output:

Styling Unordered Lists

You may style unordered lists using CSS (Cascading Style Sheets) to make them look the way you want them to on your website. You can change many features, such as text attributes, list markers (bullets), and the distance between items. Here's how to use CSS to style unordered lists:

1. Changing List Markers (bullets):

The list-style-type parameter allows you to modify how list markers appear. Disc (the default filled circle), circle (the empty circle), square (the filled square), and custom images are examples of common values.

/* Set the list's marker to square.*/
ul {
    list-style-type: square;
}

2. Customizing List Markers Position:

To change the position of list markers, use the list-style-position property. When set inside, markers are placed inside the list item's content-box; when set to outside (the default), they are outside.

/* Put list markers inside the items on the list. */
ul {
    list-style-position: inside;
}

3. Modifying Text Properties

Targeting the <li> elements within the <ul> will allow you to change the text properties within list items, such as color, font, and size.

/* Modifying font and text color.*/
ul li {
    color: #333;
    font-family: Arial, sans-serif;
}

4. Spacing

Using the margin or padding properties, change the spacing between list items. To add space between list items, for instance:

ul li {
    margin-bottom: 10px;
}

5. Custom Images as List Markers

By including the URL of your custom image in the list-style-image attribute, you may use it as a list marker.

/* As the list marker, using a custom image. */
ul {
    list-style-image: url('custom-marker.png');
}

The complete example of CSS code for styling an unordered list is shown below:

<!DOCTYPE html>
<html>
<head>
    <title>Styled Unordered List</title>
    <style>
        /* Style*/
        ul {
            list-style-type: square; /* Change marker to squares */
            list-style-position: inside; /* Place markers inside list items */
            margin-left: 20px; /* Add margin to the left */
        }
        /* Style list items */
        ul li {
            margin-bottom: 10px; /* Add margin between list items */
            color: #333; /* Change text color */
            font-family: Arial, sans-serif; /* Change font family */
        }
    </style>
</head>
<body>
    <h2>Styled Unordered List</h2>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</body>

Output:

Practical Use Cases for Unordered Lists in Web Design:

Unordered lists (abbreviated as "ul" in web design) are flexible elements that may be used to improve how content is organized and presented on websites. Unordered lists are frequently used in the following situations from the real world:

Site Maps: Site maps or site index pages sometimes employ unordered lists to show the overall structure of a website. Users can more easily navigate and find particular material or sections.
Website navigation menus: Unordered lists are frequently used in website navigation menus. Links within list items enable navigation to various parts of the site, and each list item (li>) serves as a menu item.
Bullet Lists: Unordered lists are the best list to use when displaying content in a bulleted fashion. This is frequently used for websites' features, advantages, essential points, or FAQs.
Links: Unordered lists can be used to build lists of similar connections, such as social networking links, resource links, or links to relevant articles.
Content Organization: Unorganized lists help organize and arrange content on web pages. They can be used to group objects or information that are related.