Intermediate HTML

6. Organizing Information: Ordered and Unordered Lists

Creating an anchored outline can be one of the best ways to allow easy navigation of a complicated web document. HTML uses ordered and unordered lists to create outlines.


Ordered Lists

If you want to make an outline style document which will number the sections for you, you should use an ordered list.

Here is an example of a simple ordered list.

  1. First
  2. Second
  3. Third
  4. Fourth
  5. Fifth

Here is the code used to create the above list:

<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
</ol>

Here is an example of a nested ordered list used to create an outline:

  1. First Topic
    1. subcategory 1
      1. first
        1. one
          1. Last Level

Here is the code used to create the above list:

<ol type="I">
<li>First Topic</li>

     <ol type="A">
     <li>subcategory 1</li>

            <ol>
            <li>first</li>

                      <ol type="a">
                      <li>one</li>

                                <ol type="i">
                                <li>Last Level</li>

                                </ol>
                      </ol>
             </ol>
     </ol>
</ol>


Unordered Lists

An unordered list is a bulleted list. The basic syntax is the same as the ordered list.

Here is an example of what the three kinds of bullets look like:
Disc BulletsCircle BulletsSquare Bullets
  • First
  • First
  • First
  • Second
  • Second
  • Second
  • Third
  • Third
  • Third

The code used to create the list on the left is shown below. Notice that no type is specified. This is because the "disc" type is the default. You could type out <ul type="disc"> but it is not necessary.

<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>

To change the bullets to circles (empty discs) or squares use the following:
     <ul type="circle"> OR <ul type="square">

Return To The Top
Creative Commons License
This work is licensed under a Creative Commons License.

(<< Back)     [Home]     (Next >>)
Hosted by www.Geocities.ws

1