How to Create a Bullet List in HTML

Use an unordered list when you want to show related items with bullet points instead of numbers. This is the best choice for feature lists, menus, checklists, and grouped links where order does not matter.

What you’ll build or solve

You’ll learn how to create a bullet list in HTML using the <ul> tag with <li> items. You’ll also know how to keep the structure clean and easy to scan.

When this approach works best

This approach is the right choice when the list items are related but do not need a specific order.

Common real-world scenarios include:

• Product features
• Website navigation links
• Packing checklists
• Skills lists in a portfolio
• FAQ topic links

This is a bad idea when the order matters, such as tutorial steps or ranked items. In those cases, use <ol> instead.

Prerequisites

You only need:

• A basic HTML file
• A text editor
• Basic HTML knowledge

Step-by-step instructions

Step 1: Add a <ul> with <li> items

Wrap the full list inside <ul> and place each bullet point inside its own <li>.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

For longer bullet lists, keep adding more <li> elements inside the same <ul>.

<ul>
  <li>Interactive lessons</li>
  <li>Real coding projects</li>
  <li>Progress tracking</li>
  <li>Certificates</li>
</ul>

What to look for:

• <ul> creates the bullet list container
• <li> creates each bullet point
• The browser adds bullets automatically
• Keep all related items inside the same list
• Use <ol> instead if the sequence matters

Examples you can copy

Feature bullets

<ul>
  <li>Learn at your own pace</li>
  <li>Practice with projects</li>
  <li>Track your progress</li>
</ul>

Navigation bullets

<ul>
  <li><a href="/">Home</a></li>
  <li><a href="/courses">Courses</a></li>
  <li><a href="/pricing">Pricing</a></li>
</ul>

Portfolio skills

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>React</li>
</ul>

Common mistakes and how to fix them

Mistake 1: Forgetting <li> tags

What the reader might do:

<ul>
  HTML
  CSS
  JavaScript
</ul>

Why it breaks: plain text inside <ul> is not treated as valid list items.

Corrected approach:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Mistake 2: Using bullet lists for ordered steps

What the reader might do:

<ul>
  <li>Install VS Code</li>
  <li>Create index.html</li>
</ul>

Why it breaks: the sequence is important, so bullets make the order less clear.

Corrected approach:

<ol>
  <li>Install VS Code</li>
  <li>Create index.html</li>
</ol>

Mistake 3: Splitting one list into multiple <ul> blocks

What the reader might do:

<ul>
  <li>HTML</li>
</ul>
<ul>
  <li>CSS</li>
</ul>

Why it breaks: related items become separate lists, which hurts structure and styling.

Corrected approach:

<ul>
  <li>HTML</li>
  <li>CSS</li>
</ul>

Troubleshooting

If bullets do not appear, check that the items are inside <li> tags.

If the list shows numbers instead, switch from <ol> to <ul>.

If spacing looks wrong, check for CSS that changes list-style or padding.

If related bullets are split apart, combine them into one <ul> block.

Quick recap

• Use <ul> to create a bullet list
• Put every bullet inside an <li> tag
• Keep all related items in one list container
• Use <ol> when order matters
• Check CSS if bullets or spacing disappear