HTML Lists

HTML allows us to format attractive lists to... er, list things. A list of important points in no particular order; a list of parts for a project; a list of sequential instructions for some task; these are just a few uses for lists.

This page addresses three kinds of lists: ordered, unordered and definition. We will also look at nested lists. As with most HTML tags, the various list tags come in pairs and surround the items they effect.

Ordered Lists

The ordered list (<ol></ol>), as it sounds, makes alpha/numeric lists. Ordered lists are great for listing sequential instructions, driving directions, and a host of other things that need order.

  1. The <li></li> or list item tag pair is used for the individual items on your list.
  2. Choose the type of numbering/lettering by using the type attribute style attribute with list-style-type definition in the ol or li tag. The default is decimal numbers: 1, 2, 3, etc.
  3. How about capitol letters? Use style="list-style-type:upper-alpha".
  4. Lower case? Use style="list-style-type:lower-alpha".
  5. I am using capital Roman numerals for this item. Numbers are the default. Use style="list-style-type:upper-roman".
  6. Lower case Roman numerals. Use style="list-style-type:lower-roman".
  7. Use the start attribute in the <ol> tag to indicate the starting value of the list. Use the value attribute in the <li> tag to choose a specific value for the list item. Both attributes use positive integers, the browser interprets the correct style of displaying the number.
  8. Top

There are many more types of numbering to choose, w3schools.com has a nice page on the subject: http://www.w3schools.com/CSS/pr_list-style-type.asp

Unordered Lists

The unordered list (<ul></ul>) creates the standard bulleted list. These lists are useful for listing things in no particular order with no implied emphasis.

  • The <li></li> tag pair is used for each item, just like the ordered list.
  • Use the style attribute with list-style-type property in either the <ul> or <li> tags to choose the bullet style you want.
  • style="list-style-type:disc"
  • style="list-style-type:circle"
  • style="list-style-type:square"
  • Top

Definition Lists

The definition list (<dl></dl>) works naturally for glossaries and is also useful whenever you wish to pair a word or phrase with a longer paragraph.

Term Item (<dt></dt>)
The definition is indented and a line below the term. (<dd></dd>)
DM 60A/CIS 161
A beginning class in HTML, or Hyper Text Markup Language, the coding which directs the browser's display of the content.
Top
A link to take you to the top of the page.

Nested Lists

You can also "nest" lists. That is, have a list inside of a list. The trick is to remember all the closing list tags. Nested lists are very useful for showing hierarchy of things in the list. Try it and see what happens.

  1. The Four Food Groups

    1. Chocolate
      Why chocolate?
      Here are a few good reasons.
      • Chocolate is indispensable for our well being.
      • Brown food is good.
      • The Cocoa Butter in the chocolate keeps your vital parts well lubricated.
    2. Beer
      Why beer?
      Beer is indispensable for our well being.
    3. Chips
      Why chips?
      Chips are indispensable for our well being.
    4. Coffee
      Why coffee?
      Coffee is indispensable for our well being.

  2. Seven Habits of Successful People

    1. I forget...
    2. I forget...
    3. I forget...
    4. I forget...
    5. I forget...
    6. I forget...
    7. I forget...
    8. Top
bottom graphic for DM 60A pages