HTML Lists — Ordered, Unordered and Nested Lists with Examples

Lists are everywhere in HTML — navigation menus, step-by-step instructions, feature comparisons, ingredient lists, to-do items. If you have been following this series from What is HTML? A Complete Beginner Guide with Examples, you will use lists in almost every page you build. HTML gives you three types of lists, and each one serves a distinct purpose.

Unordered Lists — ul and li

An unordered list displays items with bullet points. No numbering, no sequence implied. Use it when the order of items genuinely does not matter.

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

The <ul> tag wraps the whole list. Each item inside uses <li> (list item). The browser renders filled circle bullet points automatically. You can change the bullet style with CSS later, but in plain HTML this is the default rendering.

Ordered Lists — ol and li

An ordered list numbers items automatically. Use it when sequence or ranking genuinely matters — installation steps, top 10 lists, recipes, instructions.

<ol>n  <li>Open your text editor</li>n  <li>Write your HTML code</li>n  <li>Save the file as index.html</li>n  <li>Open the file in your browser</li>n</ol>

The browser automatically outputs 1, 2, 3, 4 — you do not write the numbers yourself. HTML handles it. You can change the numbering style using the type attribute: type=”A” for uppercase letters, type=”a” for lowercase, type=”I” for Roman numerals. The start attribute lets you begin from a number other than 1.

<ol type="A" start="3">n  <li>Third option</li>n  <li>Fourth option</li>n</ol>

Nested Lists

You can put a list inside a list item to create a nested structure. This is how multi-level navigation menus and document outlines are built.

<ul>n  <li>Frontend Developmentn    <ul>n      <li>HTML</li>n      <li>CSS</li>n      <li>JavaScript</li>n    </ul>n  </li>n  <li>Backend Developmentn    <ul>n      <li>PHP</li>n      <li>Python</li>n    </ul>n  </li>n</ul>

The nested <ul> sits inside the <li>, not after it. Indenting your code makes nesting much easier to read and debug. Browsers automatically indent nested lists and change the bullet style — unordered lists typically go from filled circle to open circle to square as nesting deepens.

Description Lists — dl, dt, dd

Description lists are used less often but are perfect for glossaries, term definitions, metadata, and key-value pairs. Three tags work together here.

<dl>n  <dt>HTML</dt>n  <dd>HyperText Markup Language — defines the structure of webpages.</dd>nn  <dt>CSS</dt>n  <dd>Cascading Style Sheets — controls visual presentation.</dd>nn  <dt>JavaScript</dt>n  <dd>A scripting language that adds interactivity to pages.</dd>n</dl>

<dl> wraps the list. <dt> is the term. <dd> is the description — the browser indents it automatically. FAQ sections where the question is one style and the answer is indented below it are often a description list underneath.

Lists Inside Navigation Menus

Navigation bars on most professional websites are actually unordered lists styled with CSS. The semantic structure makes perfect sense — a nav menu is a list of links, and that is exactly what <ul> and <li> represent.

<nav>n  <ul>n    <li><a href="/">Home</a></li>n    <li><a href="/tutorials/">Tutorials</a></li>n    <li><a href="/contact/">Contact</a></li>n  </ul>n</nav>

CSS then removes the bullets and arranges items horizontally. The underlying HTML remains a proper semantic list — which screen readers and search engines both understand correctly.

Next up is one of the more structured elements in HTML — HTML Tables — How to Create Tables with Examples. Tables are used for displaying data in rows and columns, and understanding them opens up a lot of possibilities for presenting information clearly.