TUTORIALS » HTML / JavaScript » HTML essentials (guided tutorials)

Lists in HTML



Another very useful feature of HTML is its capacity to render lists. There are two types of lists:
    • Ordered lists (numbered)
    • Unordered lists (non-numbered)

Ordered lists – The <ol> tag

To display an ordered list, all the list items must be enclosed within the 
<ol>
tag. Each list item must be placed within 
<il>
tags.

Example code: 
My favorite fruits are:
<ol>
  <li>Apples</li>
  <li>Oranges</li>
  <li>Kiwis</li>
</ol>
To render:
My favorite fruits are:
  1. Apples
  2. Oranges
  3. Kiwis

Unordered lists – The <ul> tag

To display an unordered list, all the list items must be enclosed within the 
<ul>
tag. Each list item must also be placed within 
<il>
tags.

Example code: 
My favorite fruits are:
<ul>
  <li>Apples</li>
  <li>Oranges</li>
  <li>Kiwis</li>
</ul>
To render:
My favorite fruits are:
  • Apples
  • Oranges
  • Kiwis

Multi level lists

You can also create multi-level lists by nesting 
<ol>
's and 
<ul>
's. Just remember to keep a clean nesting of tags and to open-close them in the proper order.

Example: 
My favorite fruits are:
<ol>
  <li>Apples
    <ul>
      <li>Golden Delicious</li>
      <li>Red Astrachan</li>
      <li>Red Astrachan</li>
    </ul>
  </li>
  <li>Oranges</li>
  <li>Kiwis<
    <ul>
      <li>Hayward</li>
      <li>Hinabelle</li>
    </ul>
  </li>
</ol>
To display:
My favorite fruits are:
  1. Apples
    • Golden Delicious
    • Red Astrachan
    • Red Astrachan
  2. Oranges
  3. Kiwis
    • Hayward
    • Hinabelle

  1. Practice creating ordered and unordered lists of your own.
  2. Also practice nesting <ol>'s and <ul>'s to create multi-level lists.
Comments & Questions