Have an account? Sign in
Login  Register  Facebook
Web Development School
This Page is Under Construction! - If You Want To Help Please Send your CV - Advanced Web Core (BETA)
Quick Table of Contents
[Edit] Three kinds of lists
HTML supports three kinds of lists. The first kind is a bulletted list, often called an unordered list. It uses the <ul> and <li> tags, for instance:
Example
<ul>
  <li>the first list item</li>

  <li>the second list item</li>

  <li>the third list item</li>
</ul>

Try it yourself »Click on the "Try it yourself" button to see how it works

Note that you always need to end the list with the </ul> end tag, but that the </li> is optional and can be left off. The second kind of list is a numbered list, often called an ordered list. It uses the <ol> and <li> tags. For instance:
Example
<ol>
  <li>the first list item</li>

  <li>the second list item</li>

  <li>the third list item</li>
</ol>

Try it yourself »Click on the "Try it yourself" button to see how it works

Like bulletted lists, you always need to end the list with the </ol> end tag, but the </li> end tag is optional and can be left off. The third and final kind of list is the definition list. This allows you to list terms and their definitions. This kind of list starts with a <dl> tag and ends with </dl> Each term starts with a <dt> tag and each definition starts with a <dd>. For instance:
Example 
<dl>
  <dt>the first term</dt>
  <dd>its definition</dd>

  <dt>the second term</dt>
  <dd>its definition</dd>

  <dt>the third term</dt>
  <dd>its definition</dd>
</dl>

Try it yourself »Click on the "Try it yourself" button to see how it works

The end tags </dt> and </dd> are optional and can be left off. Note that lists can be nested, one within another. For instance:
Example
<ol>
  <li>the first list item</li>

  <li>
    the second list item
    <ul>
      <li>first nested item</li>
      <li>second nested item</li>
    </ul>
  </li>

  <li>the third list item</li>
</ol>

Try it yourself »Click on the "Try it yourself" button to see how it works

You can also make use of paragraphs and headings etc. for longer list items.
September 22, 2011