HTML Lists

Overview

Lists provide an easy way to organize HTML text. Lists can also be nested within other lists.

There are four types of lists.

  • Unordered
  • Ordered
  • Compact Unordered
  • Definition


    Unordered Lists

    Unordered lists have a blank line followed by a bullet pointed list.

    <UL> </UL> Beginning and ending tags for an unordered list
    <LI> </LI> Beginning and ending (optional) tags for each list item

    HTML Code
    <UL>
    <LI>First list item
    <LI>Second list item
    <LI>Third list item
    </UL>
    Results
    • First list item
    • Second list item
    • Third list item


    Ordered Lists

    Ordered lists have a blank line followed by a alpha or number pointed list.

    <OL> </OL> Beginning and ending tags for a number ordered list
    <OL TYPE="A"> </OL> Beginning and ending tags for an alpha ordered list
    <LI> </LI> Beginning and ending (optional) tags for each list item

    HTML Code
    <OL>
    <LI>First list item
    <LI>Second list item
    <LI>Third list item
    </OL>
    Results
    1. First list item
    2. Second list item
    3. Third list item

    HTML Code
    <OL TYPE="A">
    <LI>First list item
    <LI>Second list item
    <LI>Third list item
    </OL>
    Results
    1. First list item
    2. Second list item
    3. Third list item


    Compact Unordered Lists

    Compact unordered lists are bullet pointed and can be used within another list.

    <MENU> </MENU> Beginning and ending tags for a compact unordered list
    <LI> </LI> Beginning and ending (optional) tags for each list item

    HTML Code
    <OL>
    <LI>First list item
    <LI>Second list item
    <MENU>
    <LI>List item one
    <LI>List item two
    <LI>List item three
    </MENU>
    <LI>Third list item
    </OL>
    Results
    1. First list item
    2. Second list item
    3. List item one
    4. List item two
    5. List item three
    6. Third list item


    Definition Lists

    Definition lists are good for glossaries. They print the term on one line and the indented definition on the next line.

    <DL> </DL> Beginning and ending tags for a definition list
    <DT> Definition term tag
    <DD> Definition tag

    HTML Code
    <DL>
    <DT>First term
    <DD>First definition
    <DT>Second term
    <DD>Second definition
    <DT>Third term
    <DD>Third definition
    </DL>
    Results
    First term
    First definition
    Second term
    Second definition
    Third term
    Third definition


  • Web Tips
    Home - www.waubonsee.edu

    Copyright © 1998 Waubonsee Community College. All rights reserved.
    Last updated April 1998