Unordered Lists

Here is how the list parts should look together in a list of fruits:

<ul>
  <li>apples</li>
  <li>bananas</li>
  <li>cherries</li>
  <li>grapes</li>
</ul>

When rendered it looks like this:

Note: white space more than a single character is ignored by browsers when rendering HTML source (except in <pre></pre> elements), but formating is important to people who create and maintain HTML documents. So keep your HTML source clean with indentation and white space to make it easy to read.

Ordered Lists

Ordered lists come in five types, which enumerate the list with:

Add the appropiate type attribute to the inside the open ol tag to get the enumeration type you want.

Let's look at our list of fruits again enumerated with upper case Roman numbers:

<ol type="I">
  <li>apples</li>
  <li>bananas</li>
  <li>cherries</li>
  <li>grapes</li>
</ol>

When rendered it looks like this:

Description Lists

This is used for lists of terms and their descriptions.

The source code looks like this:

<dl>
  <dt>HTML</dt><dd>Hyper-text Markup Language</dd>
  <dt>WWW</dt><dd>World Wide Web</dd>
  <dt>W3C</dt><dd>World Wide Web Consortium</dd>
  <dt>dl</dt><dd>description list</dd>
  <dt>dt</dt><dd>description term</dd>
  <dt>dd</dt><dd>description details</dd>
</dl>

Nested Lists

To be syntactically valid, the only thing that can go inside a list is a list item. A list item is a block element in which you can put most anything, including another list. Lists can be nested this way within other lists, to any level you desire. Here is an unordered list nested within an ordered list which is itself nested inside another ordered list:

Here is the html source code:

<ol type="1">
  <li>List 1 part 1
    <ol type="i">
      <li>List 2 part 1
        <ul>
          <li>List 3 part 1</li>
          <li>List 3 part 2</li>
        </ul>
      </li>
      <li>List 2 part 2</li>
    </ol>
  </li>
  <li>List 1 part 2</li>
</ol>

Notice how each new list is nested within the a list item of its parent list.