HTML Lists - Complete Guide

HTML lists are one of the first things you learn in web development, and one of the things you will use most. Menus, step-by-step guides, feature lists and glossaries are almost always built with them. In this guide you will learn the three types of HTML lists, the tags each one uses, and how to choose the right one. You will also see how to nest lists, change bullets and numbers with CSS, start counting from any number, and avoid the mistakes that make lists harder to use for people on screen readers. Every example is short and ready to copy.

Quick Answer: HTML Lists

HTML lists group related items together. Use <ul> for an unordered list with bullets, <ol> for an ordered list with numbers, and <dl> for a description list of terms and their meanings. Each item in a <ul> or <ol> goes inside an <li> tag. Pick the tag by meaning, then change the look with CSS.

What Are HTML Lists?

An HTML list is a set of related items marked up so the browser, search engines and assistive tools all know the items belong together. HTML has three kinds:

List type	Container tag	Item tag	Default look	Use it for
Unordered list	<ul>	<li>	Bullets	Items where order does not matter
Ordered list	<ol>	<li>	Numbers	Steps, rankings, anything in sequence
Description list	<dl>	<dt> and <dd>	Term, then an indented description	Glossaries, specs, name and value pairs

The description list used to be called a "definition list". The name changed because it works for any term and value pair, not only dictionary definitions.

How Do HTML Lists Work?

Every list follows the same pattern: a container tag that says what kind of list it is, and item tags inside it. The browser then adds bullets or numbers for you.

Step 1: Choose the Right List Type

Ask one question: does the order of the items change their meaning? If yes, use <ol>. If no, use <ul>. If each item is a term with an explanation, use <dl>.

A shopping list is unordered. A recipe method is ordered. A glossary is a description list.

Step 2: Add Your Items

Put each item inside an <li> tag. Here are the two most common lists side by side:

<!-- Unordered list -->
<ul>
  <li>Milk</li>
  <li>Bread</li>
  <li>Eggs</li>
</ul>

<!-- Ordered list -->
<ol>
  <li>Preheat the oven.</li>
  <li>Mix the ingredients.</li>
  <li>Bake for 20 minutes.</li>
</ol>

A description list uses <dt> for each term and <dd> for its description:

<dl>
  <dt>HTML</dt>
  <dd>The language that structures a web page.</dd>
  <dt>CSS</dt>
  <dd>The language that styles a web page.</dd>
</dl>

To make a sub-list, place the new list inside an <li>, not between two items:

<ul>
  <li>Fruit
    <ul>
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ul>

Step 3: Style and Fine-Tune the List

Change bullets and numbers with CSS, not by switching tags. The list-style-type property controls the marker:

ul { list-style-type: square; }        /* square bullets */
ol { list-style-type: upper-roman; }   /* I, II, III */
li::marker { color: #1a8fc9; }         /* colour only the bullet or number */

Ordered lists also have three useful attributes:

<ol start="5">     <!-- counts 5, 6, 7 -->
<ol reversed>      <!-- counts down: 3, 2, 1 -->
<ol type="a">      <!-- a, b, c -->
<li value="10">   <!-- this item becomes number 10 -->

There are two limits to know. First, a <ul> or <ol> may only contain <li> elements directly, so any heading or paragraph has to go inside an item. Second, if you remove the bullets with list-style: none, Safari stops announcing the list to VoiceOver users. Add role="list" to the <ul> to keep it.

Key Features or Benefits of HTML Lists

• Easier to scan. Readers skim web pages. Short items with clear markers let them find what they need in seconds.
• Better for screen readers. Screen readers tell users when a list starts and usually how many items it has, so they know what to expect before they listen.
• Clear structure for search engines. Proper list markup shows which points belong together. Google sometimes uses lists on a page when it builds list-style answers in search results.
• Numbering that maintains itself. Add or remove a step in an <ol> and every number updates automatically.
• Ready for menus. Most website menus are unordered lists with links inside. The menu at the top of this blog is built that way.

Important Facts About HTML Lists

• Nested bullets change shape on their own. Browsers show a filled disc at the first level, a hollow circle at the second, and a square at the third and below.
• A list cannot sit inside a paragraph. If you place a <ul> inside a <p>, the browser closes the paragraph before the list starts, which can break your spacing. Close the paragraph first.
• One term can have several descriptions. In a <dl>, one <dt> can be followed by more than one <dd>, and you may wrap each term and its descriptions in a <div> to style them as a group.
• The type attribute is for meaning, CSS is for looks. Use type="a" or type="I" when the letters or numerals matter to the content, such as legal clauses that readers refer to as "section b". Use CSS when it is only a style choice.
• Blogger adds lists for you. The bullet and number buttons in the Blogger post editor create real <ul> and <ol> tags, so you get all of these benefits without writing code.

Should You Use <ul> or <ol>?

Try reordering the items in your head. If the list still makes complete sense, use <ul>. If it now reads wrongly, use <ol>.

"Things to pack for a trip" passes the test, so it is a <ul>. "How to reset your router" fails it, because step 3 cannot come before step 1, so it is an <ol>. A "Top 10" ranking is also an <ol>, because the position of each item is the point of the list.

Do not pick <ol> just because you prefer numbers to bullets. If you want numbers on a list that has no real order, keep <ul> and change the marker with CSS.

Frequently Asked Questions

How do I remove the bullets from an HTML list?

Set list-style: none; on the list in CSS. Browsers also add space on the left, so add padding-left: 0; as well. To keep the list recognised by VoiceOver in Safari, add role="list" to the <ul> tag.

Can an ordered list start from a number other than 1?

Yes. Add the start attribute, for example <ol start="4">, to begin at 4. This is handy when a list continues after a paragraph or an image. To change the number of one item, use value on that <li>.

How many levels deep can I nest lists?

HTML has no limit, but readers struggle after two or three levels. If you need more depth than that, the content is usually easier to follow when it is split into separate sections, each with its own heading.

Conclusion

HTML gives you three list types, and each one has a clear job: <ul> when order does not matter, <ol> when it does, and <dl> for terms and their descriptions. Choose the tag by meaning, put items inside <li>, and use CSS for the look. Keep nesting shallow, and add role="list" whenever you remove the bullets.

A good next step is to open a page you have already built and check every list with the reorder test above. Then continue with our guides to HTML tables and HTML links, the two elements you will most often combine with lists.