Programming

Lists

Unordered, ordered and description lists.

All lessons · HTML lessons: learn from scratch

Unordered and ordered lists

When the order of items does not matter use <ul> (bulleted); when it does, use <ol> (numbered). Each item is an <li> element. <ol> has the start and reversed attributes.

<h3>Shopping</h3>
<ul>
  <li>Bread</li>
  <li>Cheese</li>
  <li>Tomatoes</li>
</ul>

<h3>Tea in 3 steps</h3>
<ol>
  <li>Boil water</li>
  <li>Add tea</li>
  <li>Wait five minutes</li>
</ol>

Nested lists

A sub-list goes inside an <li>, before that item's closing tag. This structure is the basis of menus and tables of contents.

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
  <li>Backend</li>
</ul>

Description lists

For term–explanation pairs there is <dl>: <dt> is the term and <dd> its explanation. It suits glossaries and property lists.

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

Author: Nibras Code