The B. Davis Schwartz Memorial Library

LISTS

Lists are one way of organizing text on the page.

Unordered Lists

The Unordered List tag <UL> places a bullet in front of each List Item <LI> (note that a </LI> tag is not necessary):

<UL>
<LI>Comedies
<LI>Tragedies
<LI>Histories
</UL>

  • Comedies
  • Tragedies
  • Histories

You can put a list inside another list:

<UL>
<LI>Comedies
<UL>
<LI>Twelfth Night
<LI>As You Like It
<LI>Much Ado About Nothing
</UL>
<LI>Tragedies
<UL>
<LI>King Lear
<LI>Hamlet
<LI>Othello
</UL>
<LI>Histories
<UL>
<LI>Richard III
<LI>Henry V
<LI>Henry IV, Part One
</UL>
</UL>

  • Comedies
    • Twelfth Night
    • As You Like It
    • Much Ado About Nothing
  • Tragedies
    • King Lear
    • Hamlet
    • Othello
  • Histories
    • Richard III
    • Henry V
    • Henry IV, Part One

And more lists inside those lists:

<UL>
<LI>Comedies
<UL>
<LI>Twelfth Night
<UL>
<LI>Viola
<LI>Orsino
<LI>Feste
</UL>
<LI>As You Like It
<UL>
<LI>Rosalind
<LI>Orlando
<LI>Touchstone
</UL>
<LI>Much Ado About Nothing
<UL>
<LI>Beatrice
<LI>Benedict
<LI>Dogberry
</UL>
</UL>
<LI>Tragedies
<UL>
<LI>King Lear
<LI>Hamlet
<LI>Othello
</UL>
<LI>Histories
<UL>
<LI>Richard III
<LI>Henry V
<LI>Henry IV, Part One
</UL>
</UL>

  • Comedies
    • Twelfth Night
      • Viola
      • Orsino
      • Feste
    • As You Like It
      • Rosalind
      • Orlando
      • Touchstone
    • Much Ado About Nothing
      • Beatrice
      • Benedict
      • Dogberry
  • Tragedies
    • King Lear
    • Hamlet
    • Othello
  • Histories
    • Richard III
    • Henry V
    • Henry IV, Part One

Note that some browsers use different types of bullets to distinguish between different levels within the list. Some will let you manually control which bullet will be used by adding a command to either the <UL> or <LI> tags:

<UL type=square>
<LI>Comedies
<LI>Tragedies
<LI>Histories
</UL>

  • Comedies
  • Tragedies
  • Histories

<UL type=disc>
<LI>Comedies
<LI>Tragedies
<LI>Histories
</UL>

  • Comedies
  • Tragedies
  • Histories

<UL type=circle>
<LI>Comedies
<LI>Tragedies
<LI>Histories
</UL>

  • Comedies
  • Tragedies
  • Histories

<UL>
<LI type=square>Comedies
<LI type=disc>Tragedies
<LI type=circle>Histories
</UL>

  • Comedies
  • Tragedies
  • Histories

<UL type=square>
<LI>Comedies
<UL type=disc>
<LI>Twelfth Night
<UL type=circle>
<LI>Viola
<LI>Orsino
<LI>Feste
</UL>
<LI>As You Like It
<UL type=circle>
<LI>Rosalind
<LI>Orlando
<LI>Touchstone
</UL>
<LI>Much Ado About Nothing
<UL type=circle>
<LI>Beatrice
<LI>Benedict
<LI>Dogberry
</UL>
</UL>
<LI>Tragedies
<UL type=disc>
<LI>King Lear
<LI>Hamlet
<LI>Othello
</UL>
<LI>Histories
<UL type=disc>
<LI>Richard III
<LI>Henry V
<LI>Henry IV, Part One
</UL>
</UL>

  • Comedies
    • Twelfth Night
      • Viola
      • Orsino
      • Feste
    • As You Like It
      • Rosalind
      • Orlando
      • Touchstone
    • Much Ado About Nothing
      • Beatrice
      • Benedict
      • Dogberry
  • Tragedies
    • King Lear
    • Hamlet
    • Othello
  • Histories
    • Richard III
    • Henry V
    • Henry IV, Part One

When you're typing your list HTML, it would be a good idea to skip a few lines between sections or to indent the lists-within-lists. It won't affect the way the list is displayed, but it will make it much easier for you to keep track of the different sections than the above example does.

If a list item is longer than one line, the second and following lines will be automatically indented:


Ordered Lists

The Ordered List tag <OL> assigns numbers to the List Items <LI>:

<OL>
<LI>Comedies
<LI>Tragedies
<LI>Histories
</OL>

  1. Comedies
  2. Tragedies
  3. Histories

The Arabic numerals can be replaced with Roman numerals or letters (uppercase and lowercase):

<OL type=I>
<LI>Comedies
<LI>Tragedies
<LI>Histories
</OL>

  1. Comedies
  2. Tragedies
  3. Histories

<OL type=i>
<LI>Comedies
<LI>Tragedies
<LI>Histories
</OL>

  1. Comedies
  2. Tragedies
  3. Histories

<OL type=A>
<LI>Comedies
<LI>Tragedies
<LI>Histories
</OL>

  1. Comedies
  2. Tragedies
  3. Histories

<OL type=a>
<LI>Comedies
<LI>Tragedies
<LI>Histories
</OL>

  1. Comedies
  2. Tragedies
  3. Histories

<OL type=1>
<LI>Comedies
<LI>Tragedies
<LI>Histories
</OL>

  1. Comedies
  2. Tragedies
  3. Histories

<OL>
<LI type=1>Comedies
<LI type=A>Tragedies
<LI type=I>Histories
</OL>

  1. Comedies
  2. Tragedies
  3. Histories

You can tell the numbering to start with any number:

<OL start=5>
<LI>Comedies
<LI>Tragedies
<LI>Histories
</OL>

  1. Comedies
  2. Tragedies
  3. Histories

<OL start=6 type=A>
<LI>Comedies
<LI>Tragedies
<LI>Histories
</OL>

  1. Comedies
  2. Tragedies
  3. Histories

<OL start=7 type=I>
<LI>Comedies
<LI>Tragedies
<LI>Histories
</OL>

  1. Comedies
  2. Tragedies
  3. Histories

As shown above, you can nest ordered lists inside each other or mix them with unordered lists:

<OL type=A>
<LI>Comedies
<OL type=1>
<LI>Twelfth Night
<OL type=i>
<LI>Viola
<LI>Orsino
<LI>Feste
</OL>
<LI>As You Like It
<OL type=i>
<LI>Rosalind
<LI>Orlando
<LI>Touchstone
</OL>
<LI>Much Ado About Nothing
<OL type=i>
<LI>Beatrice
<LI>Benedict
<LI>Dogberry
</OL>
</OL>
<LI>Tragedies
<UL type=square>
<LI>King Lear
<LI>Hamlet
<LI>Othello
</UL>
<LI>Histories
<UL type=disc>
<LI>Richard III
<LI>Henry V
<LI>Henry IV, Part One
</UL>
</OL>

  1. Comedies
    1. Twelfth Night
      1. Viola
      2. Orsino
      3. Feste
    2. As You Like It
      1. Rosalind
      2. Orlando
      3. Touchstone
    3. Much Ado About Nothing
      1. Beatrice
      2. Benedict
      3. Dogberry
  2. Tragedies
    • King Lear
    • Hamlet
    • Othello
  • Histories
    • Richard III
    • Henry V
    • Henry IV, Part One


    • Definition Lists

    The Definition List <DL> tag was intended for listing Terms <DT> and their Definitions <DD>, but they can be used in any situation where you would like text to be indented:

    <DL>
    <DT>Comedies
    <DD>Twelfth Night
    <DD>As You Like It
    <DD>Much Ado About Nothing

    <DT>Tragedies
    <DD>King Lear
    <DD>Hamlet
    <DD>Othello
    <DD><BR>     (This line break tag will cause a space to be skipped before the next <DT> tag)

    <DT>Richard III says the following speech, although a misprint in my edition indicates that someone named Glos says it:
    <DD>Now is the winter of our discontent made glorious summer by this sun of York; and all the clouds that lour'd upon our house in the deep bosom of the ocean buried. Now are our brows bound with victorious wreaths; our bruised arms hung up for monuments; our stern alarums chang'd to merry meetings, our dreadful marches to delightful measures.
    </DL>

    Comedies
    Twelfth Night
    As You Like It
    Much Ado About Nothing
    Tragedies
    King Lear
    Hamlet
    Othello

    Richard III says the following speech, although a misprint in my edition indicates that someone named Glos says it:
    Now is the winter of our discontent made glorious summer by this sun of York; and all the clouds that lour'd upon our house in the deep bosom of the ocean buried. Now are our brows bound with victorious wreaths; our bruised arms hung up for monuments; our stern alarums chang'd to merry meetings, our dreadful marches to delightful measures.

    Not all browsers will allow you to nest definition lists within other definition lists or to mix them with ordered or unordered lists, but some will.

    There are several other kinds of lists, but I haven't found any use for them. Try some other websites if you're interested.



    Previous Section
    		 Table of Contents
    		 Next Section



    Return to the Library Home Page

    HTML by Robert Delaney
    rdelaney@aurora.liunet.edu


    Return to Long Island University Home Page Return to C.W. Post Campus Home Page