HtmlHow-ToBeginner · 3 min read

How to Create Unordered List in HTML: Simple Guide

To create an unordered list in HTML, use the <ul> tag to start the list and place each item inside <li> tags. This creates a bulleted list that browsers display with dots by default.

📐

Syntax

The unordered list starts with the <ul> tag and ends with </ul>. Each list item is wrapped inside <li> tags. The browser shows bullet points before each item.

html

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

Output

• First item • Second item • Third item

💻

Example

This example shows a simple unordered list with three items. Each item appears with a bullet point.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Unordered List Example</title>
</head>
<body>
  <h2>My Shopping List</h2>
  <ul>
    <li>Milk</li>
    <li>Bread</li>
    <li>Eggs</li>
  </ul>
</body>
</html>

Output

My Shopping List • Milk • Bread • Eggs

⚠️

Common Pitfalls

One common mistake is forgetting to close the <ul> or <li> tags, which can break the list display. Another is using <ol> (ordered list) instead of <ul> when you want bullets, not numbers.

html

<!-- Wrong: Missing closing tag -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<!-- Right: Properly closed tags -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Output

• Item 1 • Item 2

📊

Quick Reference

<ul>: Starts an unordered (bulleted) list
<li>: Defines each list item
Always close tags properly: </ul> and </li>
Use CSS to customize bullet style if needed

✅

Key Takeaways

Use

to start and end an unordered list in HTML.

Wrap each list item inside

tags for proper display.

Always close your tags to avoid display issues.

Unordered lists show bullet points by default in browsers.

Use CSS if you want to change bullet styles or spacing.