HTML Lists

What lists are for

A list marks a group of related items as a group. Browsers and assistive technologies can announce how many items exist and move through them one by one. That structure helps skimming, outlines, and recipes. The meaning disappears if you fake bullets with random dashes in plain paragraphs, or if you stretch ul only to shove text into visual columns. Choose list markup when the content truly is a set or a sequence. Save decorative spacing and grid layout for CSS later.

Direct answer

• ul — unordered list (bullets by default in browsers)
• ol — ordered list (numbers by default)
• li — each list item
  Nest another ul or ol inside an li when you need sub-items. Do not leave an li floating outside its parent list. Closing tags must nest in reverse order of opening tags, especially once you add a sublist under one step.

When to use which list

Pick the element that matches the idea you are writing, not the look you hope CSS will add later. Bullets and numbers are default presentations; the HTML decision is about whether order is part of the meaning.

Unordered list

A shopping-style bullet list is the classic ul demo. Every item is an li. Start here when items are peers — fruit names, hobby labels, or feature highlights that could shuffle without breaking the lesson.

Reading the unordered sample

• ul opens the unordered list container
• Each li is one item in that group
• Closing tags must nest correctly: finish each li before closing the ul
• Default bullets are a browser style; later CSS can change markers, but the HTML meaning stays “unordered set”
• Empty li elements and missing closes are common typos — view the page early to catch them

Ordered list with a nested sublist

Numbered steps often need a small bullet group under one step — files to create, tools to open, or ingredients for that step alone. Nest the inner list inside that step’s li, not as a sibling sitting beside the whole ol. The outer numbers stay readable while the inner bullets clarify detail.

Reading the nested sample

• Outer ol numbers the main steps in sequence
• The second li contains intro text plus a child ul
• Inner li elements belong to the nested ul; that ul closes before the parent li closes
• The third step continues the outer ordered sequence after the nested block finishes
• This pattern scales to deeper nests, but keep beginners’ trees shallow so the open/close order stays obvious
• If numbers look “wrong,” check whether an li was closed too early and pushed the nested list outside

Meaning first, styling later

Browsers draw bullets and numbers for you without extra CSS. That convenience tempts people to misuse lists as indent machines or fake sidebars. Resist that habit here. If the content is a set or a sequence, list markup is the right semantic choice even before you restyle markers. If you need side-by-side cards, a nav bar grid, or magazine columns, wait for CSS and structural layout lessons — do not bend ul into a page framework just because menus sometimes use lists later with careful styling.

Accessibility and scanning habits

Lists help people skim and help assistive tech announce phrases like “list of three items.” Keep each li focused on one idea when you can. Avoid stuffing huge unrelated paragraphs into every item unless the content truly needs that depth. Nest only when hierarchy is real — fake nesting just to indent text confuses both humans and tools. A short heading above the list often clarifies what the group is about before the first bullet appears. If a step list is long, consider splitting it into smaller ordered groups with their own headings instead of one endless ol.

Practice in your editor

1. Make a ul of three hobbies (or three foods — keep items short).
2. Make an ol of three morning steps in the order you actually do them.
3. Nest a small ul under one of those li items (for example, files to open or tools to grab).
4. Validate mentally: every li sits inside a ul or ol; nested lists sit inside an li.
5. Swap one list’s type (ul ↔ ol) and ask whether the meaning still fits the content.
6. View the page in a browser and confirm bullets/numbers appear without writing any CSS yet.
7. Break the nest on purpose once, note how the outline looks wrong, then fix the closes.
8. Read the nested sample aloud as “step two contains a mini-list” to lock the mental model.

Easy mistakes

• Writing li outside any ul/ol (orphan items)
• Using lists only to indent random paragraphs or fake columns
• Forgetting to close nested lists in the right order
• Putting a nested ul as a sibling of li instead of inside one li
• Choosing ol for items with no sequence (or ul for strict step numbers) without thinking about meaning
• Copying list markup from layout-only tutorials that treat ul as a menu grid without teaching semantics first
• Leaving the outer list unclosed after a long nested block

Summary

• ul + li for unordered sets (bullets by default)
• ol + li for ordered sequences (numbers by default)
• Nest a sublist inside an li, not beside the parent list
• Choose the list type that matches meaning
• Do not use lists as a substitute for CSS layout columns
• After the plug-ins history note, lists return you to everyday structural HTML you will keep reusing on almost every tutorial page you write next