Hero

HTML Unordered List Master the HTML Unordered List (<ul>) to display items with bullet points where the specific sequence is not critical. Learning Outcomes: Create unordered lists, add list items, and change bullet styles. Prerequisites: Understanding of the HTML lists overview. Reading Time: 4 min read Difficulty: Beginner

Introduction

The Unordered List is the most commonly used list in HTML. Whenever you need to display a collection of items where the sequence doesn't strictly matter—like a list of features, a grocery list, or links in a navigation bar—the unordered list is your go-to tag.

Why This Matters

As a frontend developer working on himubey.in, almost every interactive menu you build will start as an unordered list. Dropdowns, sidebars, footer links, and even image galleries are structurally built using <ul> tags before CSS transforms them into beautiful UI components.

Core Concepts

• <ul> (Unordered List): The parent container that defines the start and end of the list. By default, browsers render items inside it with solid black bullet points (discs).
• <li> (List Item): The child element that holds the actual content. Every item must be wrapped in this tag.

Syntax

To create an unordered list, you wrap your items inside the <ul> tags.

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

Real World Example

Let's build a "Core Skills" section for Himanshu Dubey's developer dashboard.

<section class="skills-dashboard">
  <h2>Himubey's Core Skills</h2>
  <ul>
    <li>HTML5 & Semantic Markup</li>
    <li>CSS3, Flexbox, and Tailwind CSS</li>
    <li>Modern JavaScript (ES6+)</li>
    <li>React and Next.js Frameworks</li>
  </ul>
</section>

Best Practices

• CSS Styling: While HTML used to have a type attribute (like type="circle" or type="square") to change the bullet style, this is now deprecated. Always use the CSS list-style-type property to change bullet points.
• Consistent Nesting: When nesting unordered lists inside one another to create sub-menus, ensure the nested <ul> is placed firmly inside an <li> tag.

Common Mistakes

Mistake: Nesting a <ul> directly as a child of another <ul>.

<!-- WRONG -->
<ul>
  <li>Frontend</li>
  <ul>
    <li>React</li>
  </ul>
</ul>

Correct Approach: The nested list must belong to a specific list item.

<!-- CORRECT -->
<ul>
  <li>Frontend
    <ul>
      <li>React</li>
    </ul>
  </li>
</ul>

💡 Himubey Tip

Want to use custom emojis or SVG icons instead of boring black bullet points? You can remove the default bullets with list-style: none; and use the CSS ::before pseudo-element on your <li> tags to inject custom icons!

Interview Questions

1. What does <ul> stand for, and when should you use it?
2. What is the default marker (bullet point) style for an unordered list?
3. How do you properly nest an unordered list inside another unordered list?
4. Why should you avoid using the HTML type attribute on a <ul> tag in modern development?

Mini Challenge

Task: Build a "My Hobbies" list.

1. Create a <ul> tag.
2. Inside the list, add three <li> elements detailing your favorite hobbies.
3. For one of the hobbies, add a nested <ul> containing two specific details about that hobby.

Summary

The <ul> tag is fundamental for structuring non-sequential data. By wrapping your content in <li> tags inside a <ul>, you create a semantic, accessible grouping of items. Remember to always use CSS to style your bullets and handle nesting correctly!

Next Lesson

Next Lesson: HTML Ordered List