DEV Community

Drive Coding
Drive Coding

Posted on • Originally published at drivecoding.com

HTML Lists for Beginners: 5 Mistakes Killing Your UX

#html #beginners #css #webdev

TL;DR

Most beginners use <ul> and <ol> interchangeably and wonder why their pages feel broken. There is one nesting mistake in particular that silently destroys screen reader accessibility — and almost nobody talks about it. This post covers the five biggest HTML list errors and how to fix them fast.

The Problem: Your List Code Looks Fine But Feels Wrong

You learned HTML lists in about 20 minutes. Slap some <li> tags inside a <ul>, done. Job finished. Ship it.

Except users are bouncing. Your content feels cluttered. And a screen reader is announcing your navigation menu like it is reading a legal disclaimer at 1.5x speed.

Sound familiar? You are not alone. HTML lists for beginners look deceptively simple on the surface. Underneath, there are five specific mistakes that quietly strangle your user experience before anyone even reads your content.

Let us fix that.

What HTML Lists Actually Do (Beyond Bullet Points)

Before diving into mistakes, here is what most tutorials skip: HTML lists are not a visual tool. They are a semantic structure tool. When you wrap content in <ul> or <ol>, you are telling the browser, the search engine, and the screen reader: these items belong together and have a relationship.

That matters enormously for SEO and accessibility.

<!-- This is just visual formatting -->
<p>• Eggs • Milk • Flour</p>

<!-- This is semantic structure -->
<ul>
  <li>Eggs</li>
  <li>Milk</li>
  <li>Flour</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Google can parse the second one. A screen reader can announce it properly. Your future self can maintain it without crying.

Mistake 1: Using <ul> When Order Actually Matters

This is the most common HTML list mistake beginners make. Unordered lists (<ul>) are for items where sequence is irrelevant — pizza toppings, feature lists, ingredient collections.

Ordered lists (<ol>) are for steps, rankings, and sequences where position has meaning.

<!-- Wrong: Steps presented as unordered -->
<ul>
  <li>Add the eggs</li>
  <li>Preheat the oven</li>
  <li>Mix the flour</li>
</ul>

<!-- Right: Sequential steps use ol -->
<ol>
  <li>Preheat the oven to 180C</li>
  <li>Mix the flour and eggs</li>
  <li>Bake for 25 minutes</li>
</ol>
Enter fullscreen mode Exit fullscreen mode

Why does this matter for UX? Because <ol> auto-numbers your items. Add a step in the middle and the numbers update automatically. No manual editing. No numbering errors. Screen readers also announce "Step 2 of 5" which guides users through processes clearly.

Mistake 2: Nesting Lists Incorrectly

Nested lists are where beginners either shine or completely fall apart. The rule almost nobody mentions: nested lists must live inside an <li> element, not directly inside <ul> or <ol>.

<!-- Wrong: List nested directly inside ul -->
<ul>
  <li>Monday</li>
  <ul>
    <li>9AM Meeting</li>
  </ul>
</ul>

<!-- Right: Nested list lives inside the li -->
<ul>
  <li>Monday
    <ul>
      <li>9AM Meeting</li>
      <li>10AM Coffee (mandatory)</li>
    </ul>
  </li>
</ul>
Enter fullscreen mode Exit fullscreen mode

The wrong version technically renders in most browsers. It also produces invalid HTML, confuses assistive technology, and causes unpredictable styling behavior across browsers. Valid structure is not optional when you care about real users.

Mistake 3: Stripping List Semantics With CSS and Forgetting ARIA

Here is the one that catches experienced beginners off guard. When you set list-style: none in CSS to remove bullets for navigation menus, Safari and VoiceOver actually stop announcing the element as a list.

You killed the semantic meaning with one line of CSS.

The fix is a single attribute:

<ul role="list" style="list-style: none;">
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Adding role="list" restores the accessibility announcement. Most tutorials on HTML lists for beginners never mention this. It is one of the most impactful fixes you can make in 10 seconds.

Mistake 4: Using <br> Tags Instead of Proper List Structure

This one is a habit carried over from early HTML days. Beginners sometimes fake lists using line breaks:

<!-- Please do not do this -->
<p>
  Feature 1<br>
  Feature 2<br>
  Feature 3
</p>

<!-- Do this instead -->
<ul>
  <li>Feature 1</li>
  <li>Feature 2</li>
  <li>Feature 3</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

The <br> version gives you zero semantic value. Search engines cannot identify list items. Screen readers cannot count items or navigate between them. It is the HTML equivalent of writing an Excel spreadsheet in Notepad.

Mistake 5: Over-Nesting Until Nobody Can Read Your Code

Nesting lists is powerful. Nesting lists four levels deep because your content is genuinely that complex is almost always a sign that your information architecture needs rethinking, not more nesting.

A good rule of thumb: if you are going past two levels of nesting, consider whether some of those sub-items deserve their own section with a heading instead.

Key Takeaways

  • Use <ol> for sequential steps, <ul> for unordered collections
  • Always nest child lists inside <li> elements, never directly inside <ul>
  • Add role="list" when removing bullets with CSS to preserve screen reader behavior
  • Never fake lists with <br> tags
  • Two levels of nesting is almost always enough

These five fixes will immediately improve your HTML structure, accessibility scores, and user experience. But there is one more technique covered in the full post — customizing list bullets beyond basic CSS — that completely transforms how your lists look and behave across devices.

Want the complete guide with interactive examples and the full bullet customization walkthrough? Read the full post at Drive Coding: https://drivecoding.com/html-lists-5-critical-mistakes-killing-your-ux/

Originally published at Drive Coding

Top comments (0)