HTML Lists

Lists group related items together, such as a shopping list or the steps of a recipe.

Unordered Lists

An unordered list starts with <ul>. Each item is an <li>. Items are shown with bullets.

Example

html

<!DOCTYPE html>
<html>
<body>

<h3>Shopping list</h3>
<ul>
  <li>Milk</li>
  <li>Bread</li>
  <li>Eggs</li>
</ul>

</body>
</html>

Try it Yourself »

Output

Shopping list
  • Milk
  • Bread
  • Eggs

Ordered Lists

An ordered list starts with <ol>. Items are numbered automatically, so you never need to type the numbers.

Example

html

<!DOCTYPE html>
<html>
<body>

<h3>How to make tea</h3>
<ol>
  <li>Boil water and milk</li>
  <li>Add tea leaves and sugar</li>
  <li>Let it boil for two minutes</li>
  <li>Strain and serve</li>
</ol>

</body>
</html>

Try it Yourself »

Output

How to make tea
  1. Boil water and milk
  2. Add tea leaves and sugar
  3. Let it boil for two minutes
  4. Strain and serve

Changing the Marker

Code	Marker
`<ul style="list-style-type:square;">`	Squares
`<ul style="list-style-type:circle;">`	Empty circles
`<ul style="list-style-type:none;">`	No marker
`<ol type="A">`	A, B, C
`<ol type="i">`	i, ii, iii
`<ol start="5">`	Starts counting at 5

Example

html

<ol type="A">
  <li>Karachi</li>
  <li>Lahore</li>
  <li>Islamabad</li>
</ol>

list-style-type:none is how most website menus are made: a list of links with the bullets removed, then styled with CSS.

Description Lists

A description list pairs terms with their descriptions. It uses <dl>, <dt> (the term) and <dd> (the description).

Example

html

<!DOCTYPE html>
<html>
<body>

<dl>
  <dt>HTML</dt>
  <dd>Gives a web page its structure.</dd>
  <dt>CSS</dt>
  <dd>Adds colours, fonts and layout.</dd>
</dl>

</body>
</html>

Try it Yourself »

Nested Lists

A list can sit inside a list item. Put the inner list inside the <li>, before its closing tag.

Example

html

<!DOCTYPE html>
<html>
<body>

<ul>
  <li>Courses
    <ul>
      <li>Web Development</li>
      <li>Graphic Designing</li>
    </ul>
  </li>
  <li>Contact</li>
</ul>

</body>
</html>

Try it Yourself »

Summary

Tag	Purpose
`<ul>`	Unordered (bulleted) list
`<ol>`	Ordered (numbered) list
`<li>`	One list item
`<dl>`, `<dt>`, `<dd>`	Description list, term, description

Exercise

Which tag creates a numbered list?