Platform under construction

HTML Data

Intermediate

Unordered Lists

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

<ul>
  <li>Semantic HTML</li>
  <li>Accessible structure</li>
</ul>

HTML data structures

Unordered lists are for related items where order is not the message.

Use ul when the items belong together but changing their order does not change the core meaning. Features, benefits, tags, menu groups and requirements often fit this pattern.

A ul is not only a bullet style. It tells the browser that this is a collection of list items.

You can remove bullets or create custom markers with CSS while keeping the correct HTML structure.

ul

The unordered list wrapper.

li

A single item in the list.

nested ul

A list inside a list item.

::marker

CSS hook for styling list markers.

Syntax and structure

A ul should contain li items.

Put content inside li. If an item has subitems, nest a new ul inside that li.

Feature list

<ul class="feature-list">
  <li>Clear lesson structure</li>
  <li>Live code practice</li>
  <li>Production-focused examples</li>
</ul>

Bullets typed by hand

<p>* Clear lesson structure</p>
<p>* Live code practice</p>
<p>* Production-focused examples</p>

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 for collections

If order is not important, ul is usually right.

Use li for every item

Do not place random divs directly inside ul.

Keep item wording parallel

Lists scan better when items follow a similar sentence shape.

Nest only when useful

A nested list should be a real subcollection, not visual indentation.

Style markers in CSS

Use ::marker, list-style or custom layout without faking the list.

Avoid overlong items

A list item can contain paragraphs, but too much text may be better as sections.

Production thinking

Structured data markup affects accessibility, SEO and maintainability.

Why does this matter?

This matters because unordered lists are simple, but they prevent content from becoming a wall of disconnected text.

Accessibility

A real ul communicates that the items form a group and announces the number of items in many assistive technologies.

Production note

Feature blocks, navigation menus and checklist cards often start as ul markup before CSS turns them into a polished interface.

SEO note

Unordered lists are useful for scannable feature information, service details and concise summaries.

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 a fourth feature item.
Change the marker color in CSS.
Nest a small ul inside one list item.

Practice assignment

Do this before moving to the next lesson.

Create a feature list with five items.
Keep every item written in the same style.
Style the marker without removing the ul structure.

HTML CSS

Live preview

Self-check

Before you continue, prove that you own this lesson.