Succeed in Web Design

HTML Lists

SCSchool for Champions LLC

HTML lists are used to group related items together on a web page. HTML provides three kinds of list: unordered (bulleted), ordered (numbered), and description (pairs of terms and definitions). Using the right kind makes content clearer for both readers and search engines.

Questions you may have include:

What types of HTML list are there?
How do you code each one?
When should you use each?

Unordered lists

An unordered list shows items with bullets, for items whose order does not matter. It uses the <ul> element, with each item in an <li> element:

<ul>
  <li>Apples</li>
  <li>Oranges</li>
</ul>

Ordered lists

An ordered list numbers its items, for steps or rankings where sequence matters. It uses <ol> with <li> items:

<ol>
  <li>Preheat the oven</li>
  <li>Mix the batter</li>
  <li>Bake</li>
</ol>

Description lists

A description list pairs terms with their definitions, using <dl> for the list, <dt> for each term, and <dd> for its description:

<dl>
  <dt>HTML</dt>
  <dd>The markup language for web pages</dd>
</dl>

Nesting and styling

Lists can be nested by placing a list inside an <li>, which is how multi-level menus and outlines are built. The appearance — bullet style, numbering, spacing — is controlled with CSS rather than in the HTML itself.

Summary

HTML offers unordered lists (<ul>) for items in no particular order, ordered lists (<ol>) for sequences, and description lists (<dl>) for term-and-definition pairs. Lists can be nested for multi-level structures, and their look is set with CSS.