[an error occurred while processing this directive]
Go to Bottom Nav - September 18, 2021 - No exercises at this time - ERRORblah Happy Holidays and Semester Break!

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 60/CIS 161
A beginning class in HTML, or Hyper Text Markup Language, the coding which directs the browser's display of the content.
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. The first li of an ol starts here but the tag does not close yet...
      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
Heading One
Ut pharetra, ante eget imperdiet ullamcorper, tortor nunc sollicitudin orci, non cursus neque nisl eget ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum, nibh in suscipit interdum, velit magna volutpat turpis, at ornare sem magna et tellus. Sed pulvinar facilisis ligula, id vehicula eros sollicitudin a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Heading Two
Vivamus vestibulum, augue id iaculis sodales, odio odio feugiat arcu, scelerisque congue nisi ipsum vitae orci. Nunc sed ligula quam. Cras sed iaculis neque. Proin ultricies consectetur tortor, eu pulvinar sapien commodo ac. Cras diam arcu, lacinia id mattis ut, convallis sed massa. Nullam ut arcu lacus. Suspendisse ultricies elementum arcu ut dictum.
Heading Three
Sed aliquet augue ut ligula porta gravida pellentesque sapien semper. Duis mauris massa, semper pulvinar eleifend id, tincidunt fermentum nulla. Proin ipsum neque, imperdiet in vestibulum non, hendrerit ac nisi. Maecenas eleifend libero quis urna lacinia elementum. Etiam mi massa, sollicitudin nec accumsan in, aliquet in dui. Pellentesque consequat diam quis felis luctus a vehicula lectus mollis.
Pull Down Menu Close Menu