HTML

HTML Introduction
HTML Structure
Text & Formatting
Links & Media
HTML Lists
HTML Tables
Forms & Input
Containers & Layout
HTML Advanced
Tutorials /HTML /HTML Unordered Lists

HTML Unordered Lists

💡 Key Points on HTML Unordered Lists
  • Unordered lists are created using the <ul> tag, with items defined by <li> tags.
  • They display items with bullets (e.g., circles, squares) by default.
  • Ideal for lists where the order of items doesn’t matter, like menus or categories.
  • Lists can be nested for hierarchical content.
  • Customize bullet styles using the CSS list-style-type property.

HTML Unordered Lists: A Beginner's Guide

Unordered lists in HTML are used to present items in a non-sequential format, typically with bullets or other markers. They are created using the <ul> (unordered list) tag, with each item inside a <li> (list item) tag. This tutorial will explain how to create and customize unordered lists with clear examples, including previews, to help beginners organize content effectively.

What Are Unordered Lists?

An unordered list is a way to group related items where the order doesn’t matter, such as a grocery list or website navigation links. The <ul> tag defines the list, and each <li> tag represents an individual item, displayed with a bullet by default.

Why Use Unordered Lists? Unordered lists make content visually organized, easy to scan, and ideal for presenting non-sequential information like features or options.

Syntax of an Unordered List

The basic structure of an unordered list is simple:

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

Preview

  • Item 1
  • Item 2
  • Item 3

Key components:

  • <ul>: Defines the unordered list.
  • <li>: Defines each list item, displayed with a bullet.

Creating Unordered Lists

Let’s explore how to use unordered lists with examples and their previews.

1. Basic Unordered List

A simple list of grocery items:

<ul>
  <li>Milk</li>
  <li>Eggs</li>
  <li>Bread</li>
</ul>

Preview

  • Milk
  • Eggs
  • Bread

2. Nested Unordered Lists

You can nest <ul> tags inside <li> tags to create sublists, useful for hierarchical content like categories.

<ul>
  <li>Fruits
    <ul>
      <li>Apples</li>
      <li>Bananas</li>
    </ul>
  </li>
  <li>Vegetables
    <ul>
      <li>Carrots</li>
      <li>Broccoli</li>
    </ul>
  </li>
</ul>

Preview

  • Fruits
    • Apples
    • Bananas
  • Vegetables
    • Carrots
    • Broccoli

3. Unordered List with Links

Unordered lists are often used for navigation menus by including <a> tags inside <li> tags.

<ul>
  <li><a href="home.html">Home</a></li>
  <li><a href="about.html">About</a></li>
  <li><a href="contact.html">Contact</a></li>
</ul>

Preview

Customizing Unordered Lists

You can change the appearance of unordered lists using the CSS list-style-type property. Common values include:

  • disc: Default bullet (filled circle).
  • circle: Hollow circle.
  • square: Square bullet.
  • none: No bullet.

Example with different bullet styles:

<ul style="list-style-type: square;">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Preview

  • Item 1
  • Item 2

You can also use a custom image as a bullet with list-style-image:

<ul style="list-style-image: url('bullet.png');">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
Warning: Always close <ul> and <li> tags properly to avoid rendering issues or unexpected layouts.

Best Practices for Unordered Lists

To make your unordered lists effective and user-friendly:

  • Use unordered lists for non-sequential items, like features or categories.
  • Keep list items short and clear for better readability.
  • Use CSS to customize bullet styles or spacing for a polished look.
  • Ensure nested lists are properly structured and indented for clarity.
  • Test lists on different devices to ensure consistent appearance.

Common Mistakes to Avoid

Beginners often make these errors:

  • Forgetting to close <li> or <ul> tags, causing formatting issues.
  • Using unordered lists for sequential content (use <ol> instead).
  • Over-nesting lists, which can confuse users or clutter the design.
Pro Tip: Combine CSS properties like margin, padding, or list-style-type to create visually appealing lists, such as horizontal menus.

Try It Yourself

Create a simple HTML file and experiment with unordered lists. Try different bullet styles and nesting to see how they work.

<!DOCTYPE html>
<html lang="en">
<body>
  <h3>My Hobbies</h3>
  <ul style="list-style-type: circle;">
    <li>Reading
      <ul>
        <li>Fiction</li>
        <li>Non-fiction</li>
      </ul>
    </li>
    <li>Hiking</li>
    <li>Photography</li>
  </ul>
</body>
</html>

Preview

My Hobbies

  • Reading
    • Fiction
    • Non-fiction
  • Hiking
  • Photography

By mastering the <ul> tag and its customization options, you can create well-organized, visually appealing lists that enhance your website’s usability. Practice regularly to get comfortable!

The Coding Journey provides high-quality, beginner-friendly, and advanced web development tutorials. Learn React, Next.js, JavaScript, Tailwind CSS, and more with hands-on projects. Build faster, code smarter, and level up your skills! 🚀

Tutorials

Online Compilers

Other Links

Company

© 2025 All Rights Reserved | The coding journey