How to Make a List in HTML

Use HTML list tags when you need to group related items in a clear, scannable format. Lists are perfect for steps, feature groups, menus, checklists, and collections of related links.

What you’ll build or solve

You’ll learn how to create lists in HTML using the correct list tags. You’ll also know when to choose a bulleted list versus a numbered list.

When this approach works best

This approach is the right choice when several related items belong in one structured group.

Common real-world scenarios include:

• Step-by-step instructions
• Feature lists
• Navigation menus
• Packing checklists
• FAQ topic links

This is a bad idea when the content is a normal paragraph or a section heading. In those cases, use <p> or heading tags instead.

Prerequisites

You only need:

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

Step-by-step instructions

Step 1: Add the correct list tag with <li> items

Use <ul> for unordered lists and <ol> for ordered lists. Put each item inside an <li> tag.

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

For lists where the order matters, switch to <ol> and keep the same <li> items.

<ol>
  <li>Open your editor</li>
  <li>Create an HTML file</li>
  <li>Save and preview it</li>
</ol>

What to look for:

• Use <ul> for bullet lists
• Use <ol> for numbered steps
• Every item goes inside <li>
• Keep all related items inside the same list container
• Do not use lists for normal paragraphs

Examples you can copy

Feature list

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

Tutorial steps

<ol>
  <li>Install VS Code</li>
  <li>Create index.html</li>
  <li>Add your first heading</li>
</ol>

Navigation menu

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

Common mistakes and how to fix them

Mistake 1: Forgetting the <li> tag

What the reader might do:

<ul>
  HTML
  CSS
  JavaScript
</ul>

Why it breaks: the browser does not treat plain text as proper list items, so the structure is invalid.

Corrected approach:

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

Mistake 2: Using <ul> when the order matters

What the reader might do:

<ul>
  <li>Step one</li>
  <li>Step two</li>
</ul>

Why it breaks: readers lose the clear sequence of steps.

Corrected approach:

<ol>
  <li>Step one</li>
  <li>Step two</li>
</ol>

Mistake 3: Putting paragraphs outside the list

What the reader might do:

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

Why it breaks: related items are split into different structures.

Corrected approach:

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

Troubleshooting

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

If the order matters, switch from <ul> to <ol>.

If spacing looks odd, check for CSS rules that changed list-style or padding.

If the list feels hard to scan, break long items into shorter phrases.

Quick recap

• Use <ul> for bullet lists
• Use <ol> for ordered steps
• Put every item inside <li>
• Keep related items in one list block
• Use paragraphs instead when the content is not a list