Platform under construction

HTML Data

Intermediate

HTML Lists

Learn HTML Lists with practical examples for tables, lists, structured data relationships, accessibility, SEO and live practice.

<ul><li>Collection item</li></ul>
<ol><li>Step one</li></ol>

HTML data structures

Lists group related items with the right kind of meaning.

HTML has three main list types: unordered lists, ordered lists and description lists. Each one says something different about the relationship between items.

A list is stronger than a row of paragraphs when the items belong together. It helps scanning, accessibility and maintainability.

Choose the list type based on meaning: unordered for collections, ordered for sequence or rank, description lists for terms and details.

ul

A list where order does not change the meaning.

ol

A list where order, sequence or ranking matters.

li

A list item inside ul or ol.

dl, dt, dd

A description list for terms and their details.

Syntax and structure

Choose the list element that matches the relationship.

Do not choose a list because of bullets or numbers. Choose it because of meaning, then style it with CSS.

Meaningful list types

<ul>
  <li>HTML structure</li>
  <li>CSS styling</li>
  <li>JavaScript behavior</li>
</ul>

<ol>
  <li>Create the document</li>
  <li>Add accessible content</li>
  <li>Test in the browser</li>
</ol>

Fake lists with line breaks

<p>- HTML structure<br>- CSS styling<br>- JavaScript behavior</p>
<div>1. Create file<br>2. Add content<br>3. Test</div>

Rules that matter

Data HTML should preserve relationships, not only appearance.

Tables and lists are small elements with big structural value. They help users scan, compare, follow steps and understand how pieces of information belong together.

Use lists for grouped items

If items belong together, a list often communicates that relationship better than paragraphs.

Choose by meaning

Bullets, numbers and markers can be styled. The element should match the content.

Keep li direct

ul and ol should contain li elements as their list items.

Use nested lists carefully

Deep nesting can become hard to scan.

Do not fake markers

Hyphens and numbers typed into paragraphs are weaker than real list markup.

Style markers with CSS

Use CSS for marker appearance instead of changing the HTML meaning.

Production thinking

Structured data markup affects accessibility, SEO and maintainability.

Why does this matter?

This matters because lists are one of the simplest ways to make content scannable without losing semantic structure.

Accessibility

Real lists announce the number of items and let assistive technology understand the group.

Production note

Navigation, feature lists, checklists, steps and metadata groups should use the correct list structure before styling.

SEO note

Well-structured lists can improve readability and help search engines understand grouped information and step-by-step content.

Live code lab

Change the code and run the example.

Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.

Mini assignment

Try this now.

Add one unordered item that does not depend on order.
Add one ordered step where order matters.
Rewrite a fake line-break list as a real ul.

Practice assignment

Do this before moving to the next lesson.

Create one ul, one ol and one dl.
Explain why each list type fits the content.
Style the markers without changing the HTML meaning.

HTML CSS

Live preview

Self-check

Before you continue, prove that you own this lesson.