| Basics | Headings | Formatting | Font Tags | Font Styles | Lines | Links | Lists | Images | Tables | SSI | Frames | Glossary |

LIST Tags

It is possible to display a group of items in a list or bulleted format. You can have them numbered, un-numbered or in definition format. In the list syntax the tag <LI> identified an element of the list.

Unordered lists

<UL> <LI> ... </UL>
Displays a list of items in an orderly fashion. There <UL> indicates that a list is to follow. Each of the elements in the list is started with <LI>. When you are done with the list it is closed with a </UL> tag.

Fast food in Vermillion
<UL>
     <LI>Burger King
     <LI>Dairy Queen
     <LI>Dominos
     <LI>Hardee's
     <LI>Pizza Hut
</UL>
Fast food in Vermillion
  • Burger King
  • Dairy Queen
  • Dominos
  • Hardee's
  • Pizza Hut

Changing the display of bullet

<LI type=#> where #= disc, circle, square
You can change the styles of markers using the type command within the <LI> tag.

<UL>
<LI type=disc>disc
<LI type=circle>circle
<LI type=square>square
</UL>
  • disc
  • circle
  • square

Ordered lists

<OL> <LI> ...</OL>
Displays items in a numbered list. The <OL> tells the browser to start an ordered list. Each element of the list must start with <LI>. To end the list you must close with a </OL> tag. 

Fast food in Vermillion
<OL>
     <LI>Burger King
     <LI>Dairy Queen
     <LI>Dominos
     <LI>Hardee's
     <LI>Pizza Hut
</OL>
Fast food in Vermillion
  1. Burger King
  2. Dairy Queen
  3. Dominos
  4. Hardee's
  5. Pizza Hut

Changing the display of the ordered list

<LI type=#> where # = a, A, i, I, 1
Styles of Number/Letter markers 

<OL>
<LI type=a>small letters
<LI type=A>capital letters
<LI type=i>small roman numeral
<LI type=I>large roman numeral
<LI type=1>number
</OL>
  1. small letters
  2. capital letters
  3. small roman numeral
  4. large roman numeral
  5. number

Changing the starting number

<OL start=#> where # is the starting number
Start a list on a specified number instead of starting with one. 
<OL start=8>
<LI type=1>Starting at eight
<LI>and keeps increasing
</OL>
  1. Starting at eight
  2. and keeps increasing

Defined lists

<DL> <DT> ... <DD> ...</DL>
If you have a list of terms to define, you may use the definition set of tags. These tags automatically indent the definitions.

Where <DL> ... </DL> encloses the definition list.
<DT> refers to the term to be defined
<DD> refers to the definition of the term

Fast food in Vermillion
<DL>
     <DT>Burger King
          <DD> hamburger
     <DT>Dairy Queen
          <DD> hamburger
     <DT>Dominos
          <DD> pizza
     <DT>Hardee's
          <DD> hamburger
     <DT>Pizza Hut
          <DD> pizza
</DL>
Fast food in Vermillion
    Burger King
    hamburger
    Dairy Queen
    hamburger
    Dominos
    pizza
    Hardee's
    hamburger
    Pizza Hut
    pizza

Nesting Lists

It is possible to nest lists to achieve an outline type of display. To do this the innermost list must be enclosed within the outermost list.

<OL>
  <LI type=1>topic 1
    <OL>
      <LI type=A>subtopic A
      <LI type=A>subtopic B
        <OL>
          <LI type=i>sub-subtopic i
          <LI type=i>sub-subtopic ii
        </OL>
      <LI type=A>subtopic C
    </OL>
  <LI>topic 2
  <LI>topic 3
</OL>
  1. topic 1
    1. subtopic A
    2. subtopic B
      1. sub-subtopic i
      2. sub-subtopic ii
    3. subtopic C
  2. topic 2
  3. topic 3
| Basics | Headings | Formatting | Font Tags | Font Styles | Lines | Links | Lists | Images | Tables | SSI | Frames | Glossary |

last modified February 01, 2006 29626

© 2006  TRIO | Tutorials | bwjames@usd.edu | Back to HTML 101