Topic 17 of 57 3. HTML Lists Interactive Tutorial

HTML Unordered Lists: UL Tag, Syntax, and Examples

11 mins read Last updated: 12 Nov 2026 15,100 views

HTML Editor HTML Cheat Sheet 0.00%

On This Page0 sectionsQuick jump to subtopic

Topic Overview & Definition

Key Question

How do you create and customize unordered bulleted lists using the <ul> tag?

Direct Answer & Overview

An HTML unordered list is created using the

elements. Browsers render each item prefixed by a bullet marker by default. Unordered lists are widely used for feature bullet points, shopping lists, and website navigation menus.

Comprehensive Step-by-Step Concepts

1) Basic Syntax: The list begins with

and ends with . Every item inside must be enclosed within opening and closing

tags. 2) Marker Styles via CSS: While early HTML used the 'type' attribute, modern standards dictate configuring markers via the CSS 'list-style-type' property: - 'disc' (default filled circle) - 'circle' (hollow circle) - 'square' (filled square) - 'none' (removes bullets completely) 3) Custom Image and Emoji Markers: You can use CSS 'list-style-image: url('check.png')' or CSS '::marker' pseudo-element to render custom icons, emojis (e.g. ::marker { content: '🚀 '; }), or color-coded indicators. 4) Building Navigation Bars: Navbars are constructed with . With CSS Flexbox (display: flex) and list-style: none, vertical lists convert into sleek horizontal menus. 5) Proper Nesting Rules: Sub-lists must always be nested inside a parent

tag, never directly between

elements.

Runnable HTML5 Code Example & Practical Implementation

index.html

HTML Editor

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Unordered Lists Showcase</title>
    <style>
        .custom-checklist { list-style: none; padding-left: 0; }
        .custom-checklist li::marker { content: '✔ '; color: #16a34a; font-weight: bold; }
        .horizontal-nav ul { list-style: none; display: flex; gap: 20px; padding: 0; }
        .horizontal-nav a { text-decoration: none; color: #2563eb; font-weight: 600; }
    </style>
</head>
<body>
    <nav class="horizontal-nav" aria-label="Main Menu">
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#pricing">Pricing</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>

    <h2>Software Features</h2>
    <ul class="custom-checklist">
        <li>Unlimited Cloud Storage</li>
        <li>256-bit AES End-to-End Encryption</li>
        <li>24/7 Priority Support</li>
    </ul>
</body>
</html>

Key Takeaways, Best Practices & Standards

Best Practice & Standards

Always nest subordinate lists inside

elements, and use CSS ::marker to customize bullet colors and styles cleanly.

Common Technical & Interview Questions

Q1: How do you style only the bullet marker of an
element without affecting its text color?

A1: Use the CSS '::marker' pseudo-element (e.g. li::marker { color: #dc2626; font-size: 1.2em; }).

Q2: Why must nested lists be placed inside an
rather than between two
tags?

A2: HTML validators will report an error if an

item.

Q3: How do screen readers announce unordered lists?

A3: Screen readers announce 'List with N items', informing the user of the scope of the list before reading out the individual list items.

All HTML Topics

Previous TopicHTML Lists: Types, Tags, and Examples

Next TopicHTML Ordered Lists: OL Tag, Attributes, and Examples