Unordered List Html

Unordered List Style Types

The style of bullet points in an unordered list can be changed using the CSS list-style-type property. This allows you to customize the appearance of your list to better fit the design of your webpage. Here are the most common types of list styles you can apply:

Disc

This is the default style, showing a filled circle as the bullet.

ul { list-style-type: disc; }

Circle

This style displays a hollow circle as the bullet.

ul { list-style-type: circle; }

Square

This option uses a filled square as the bullet.

ul { list-style-type: square; }

None

Removes bullets entirely, which is useful when you want a clean list without any markers.

ul { list-style-type: none; }

Note -: You can easily apply these styles by including the CSS in your <style> section or in an external stylesheet, ensuring that your list aligns with the overall design of your site.

Examples of HTML Unordered Lists

Now let’s look at some practical examples:

Basic Unordered List

This is a simple example using the default disc style:

<ul>

  <li>Apple</li>

  <li>Banana</li>

  <li>Cherry</li>

</ul>

Output

When this code is rendered, it shows each fruit item with a disc bullet point.

Unordered List with Circle Bullets

Here’s how to change the bullet style to circles:

<ul style="list-style-type: circle;">

  <li>Red</li>

  <li>Green</li>

  <li>Blue</li>

</ul>

Output

This code will display the color names with circle bullet points.

Unordered List with No Bullets

If you prefer no bullets:

<ul style="list-style-type: none;">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

Output

This example will list the beverages without any bullet points, offering a cleaner look.

Nested Unordered Lists

Nested unordered lists are useful when you need to organize information in sub-categories under broader list items. Here's how to create a nested list within an unordered list:

Example of a Nested Unordered List

Suppose you are listing types of fruits & you want to specify different varieties under each type. Here’s how you can structure it:

<ul>

  <li>Citrus Fruits

    <ul>

      <li>Orange</li>

      <li>Lemon</li>

      <li>Grapefruit</li>

    </ul>

  </li>

  <li>Stone Fruits

    <ul>

      <li>Peach</li>

      <li>Plum</li>

      <li>Cherry</li>

    </ul>

  </li>

</ul>

Output

In this example, the main list has items "Citrus Fruits" & "Stone Fruits," each with their own sublist detailing specific fruits. This structure helps users understand the categorization of items at a glance.

Note -: Creating nested lists is straightforward: simply place a new <ul> element within an <li> element of the outer list. This method can be extended to as many levels as necessary, though keeping the list easy to navigate & visually clear is important.

Horizontal Unordered Lists

Typically, unordered lists in HTML are displayed vertically, but you can easily arrange them horizontally to suit different layout needs, especially in navigations or menus. Here’s how you can make an unordered list horizontal:

CSS for Horizontal Unordered Lists

To display list items side by side, you'll use CSS to change the list-style-type and modify the display property of each item:

ul.horizontal-list {
    list-style-type: none; /* Removes the default bullets */
    margin: 0;
    padding: 0;
}
ul.horizontal-list li {
    display: inline; /* Displays items inline */
    margin-right: 20px; /* Adds space between the items */
}

HTML with Horizontal Unordered List

Here’s the HTML code applying the above CSS:

<ul class="horizontal-list">

  <li>Home</li>

  <li>About</li>

  <li>Services</li>

  <li>Contact</li>

</ul>

Output

In this setup, each list item appears next to the other horizontally, commonly used in webpage headers as part of the navigation menu. This horizontal arrangement helps with space efficiency & user navigation ease.

Examples of Horizontal Unordered Lists

Let’s look at some practical examples to better understand the concept : 

Example: Basic Navigation Menu

This example shows a basic horizontal list typically used for navigation on websites. It includes simple styling to enhance readability and interaction:

ul.navigation-menu {
    list-style-type: none; /* No bullets */
    padding: 0;
    background-color: #333; /* Dark background for the bar */
    overflow: hidden; /* Keeps the layout neat */
}
ul.navigation-menu li {
    float: left; /* Aligns items horizontally */
}
ul.navigation-menu li a {
    display: block; /* Makes the entire area clickable */
    color: white; /* Text color */
    text-align: center; /* Centers text */
    padding: 14px 16px; /* Spacing */
    text-decoration: none; /* No underline */
}

ul.navigation-menu li a:hover {
    background-color: #ddd; /* Hover effect */
    color: black; /* Text color change on hover */
}

HTML Code for Navigation Menu

<ul class="navigation-menu">

  <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>

Output

This CSS & HTML setup creates a horizontal navigation menu with interactive hover effects, making it ideal for header sections of websites.

Example: Social Media Links

Another common use of horizontal lists is to display social media links or icons in a compact and accessible manner:

ul.social-media-links {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul.social-media-links li {
    display: inline; /* Inline display for horizontal alignment */
}
ul.social-media-links li a {
    padding: 10px; /* Spacing around icons */
    color: #555; /* Icon color */
}

HTML Code for Social Media Links

<ul class="social-media-links">

  <li><a href="#facebook">Facebook</a></li>

  <li><a href="#twitter">Twitter</a></li>

  <li><a href="#instagram">Instagram</a></li>

</ul>

Output

Frequently Asked Questions

Can unordered lists be styled differently for different items?

Yes, you can style individual items differently using CSS classes or inline styles directly on the <li> tags to vary their appearance.

How do you make a list accessible for screen readers?

Ensure accessibility by using proper HTML semantic elements like <ul> and <li>, & provide descriptive text that helps users understand the content of the lists.

Is it possible to mix ordered and unordered lists?

Absolutely! You can nest unordered lists within ordered lists (& vice versa) to suit the content structuring needs of your webpage.

Conclusion

In this article, we have learned about the basics of creating & styling unordered lists in HTML. From simple lists with bullet points to more complex nested & horizontal lists, these elements are indispensable for organizing content on webpages. By applying different CSS styles, you can adapt these lists to fit the design & functionality of your site, enhancing both visual appeal & user experience.

You can refer to our guided paths on the Coding Ninjas. You can check our course to learn more about DSA, DBMS, Competitive Programming, Python, Java, JavaScript, etc. Also, check out some of the Guided Paths on topics such as Data Structure andAlgorithms, Competitive Programming, Operating Systems, Computer Networks, DBMS, System Design, etc., as well as some Contests, Test Series, and Interview Experiences curated by top Industry.