Making Lists

Lists go way back to the beginning of HTML and they present information in an easy to format fashion. There are three types of lists: unordered lists <ul>, ordered lists <ol>, and definition lists <dl>.

Unordered Lists

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. Using the attribute type="x" you can choose between disc, circle or square. If you do not include the type="x" attribute, it will default to disc.

one two three

one two three

one two three

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>


<ul type="circle">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

<ul type="square">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

Ordered Lists

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. Using the attribute type="x" you have the choice of numbers, uppercase letters, lowercase letters, uppercase Roman numerals or lowercase Roman numerals. If you do not include the type="x" attribute, it will default to numbers.

one two three

one two three

one two three

<ol>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ol>


<ol type="A">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ol>

<ol type="i">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ol>

Nested Lists

You can also nest lists giving it an outline effect.

<ul>
  <li>One</li>
  <li>Two
    <ul>
      <li>three</li>
      <li>four
        <ul>
          <li>five</li>
          <li>six</li>
        </ul>
      </li>
    </ul>
      </li>
  <li>seven</li>
  <li>eight</li>
</ul>

Definition Lists

A definition list is not a list of items. This is a list of terms and explanation of the terms. A definition list starts with the <dl> tag. Each definition list term starts with the <dt> tag. Each definition list definition starts with the <dd> tag.

<dl>
  <dt>Download</dt>
    <dd>Transferring data from another computer to the computer you are using.</dd>
  <dt>Upload</dt>
    <dd>Transferring data from the computer you are using to another computer.</dd>
</dl>

 TO TOP