Lesson 3: Lists


Unordered Lists

  • This is a list item or li.
  • It is in an unordered list or ul.
  • The list is opened with a <ul> tag.
  • Each item is between <li></li> tags.
  • The list is closed with a </ul> tag.

Here is how the list parts should look together: 

 <ul>
   <li>Thing 1</li>
   <li>Thing 2</li>
 </ul>

Note: white space is ignored in XHTML source (except in <pre></pre> tags), but formating is important to folks who create and maintain XHTML documents. So keep your XHTML source clean with indentation and white space to make it easy to read.

Unordered lists come in different styles. Here are three of them:

  • <ul style=list-style-type: disc;> is the format for using discs.
  • <ul style=list-style-type: circle;> marks items with hollow circles.
  • <ul style=list-style-type: square;> also does just what you'd think.


Ordered Lists

  1. Ordered lists are used for enumerated items.
  2. This is a ordered list item which starts with <ol>
  3. Each list item is still a <li>.
  4. Close it with a </ol>
  1. Ordered lists can use numbers or letters, upper case or lower case.
  2. You can even use Greek letters and Roman numerals.
  3. This list began with <ol style="list-style-type: upper-alpha;">.


Nested Lists

Lists can be nested within other lists, to any level you desire. Here is an unordered list nested within an ordered list which is itself nested inside another ordered list:

  1. List 1 part 1
    1. List 2 part 1
      • List 3 part 1
      • List 3 part 2
    2. List 2 part 2
  2. List 1 part 2

The html source code for this looks like this:

<ol style="list-style-type: decimal;">
  <li>List 1 part 1
    <ol style="list-style-type: lower-roman;">
      <li>List 2 part 1
        <ul style="list-style-type: disc;">
          <li>List 3 part 1</li>
          <li>List 3 part 2</li>
        </ul>
      </li>
      <li>List 2 part 2</li>
    </ol>
  </li>
  <li>List 1 part 2</li>
</ol>


Definition Lists

As you might suspect, this is used for lists of words and their definitions.

HTML
Hyper-text Markup Language
WWW
World Wide Web
W3C
World Wide Web Consortium
dl
definition list
dt
definition term
dd
definition description

The source code looks like this:

<dl>
  <dt>HTML</dt><dd>Hyper-text Markup Language</dd>
  <dt>WWW</dt><dd>World Wide Web</dd>
  <dt>W3C</dt><dd>World Wide Web Consortium</dd>
  <dt>dl</dt><dd>definition list</dd>
  <dt>dt</dt><dd>definition term</dd>
  <dt>dd</dt><dd>definition description</dd>
</dl>


Exercises:

Copy minimal_page.html to a page called lists.html and do the following in the new document:

  1. Set the title and a top level heading (h1) to Lists.

  2. Add an unordered list of items of your own choosing. Use a second level heading (h2) above this list to describe what kind of items you are listing.

  3. Add an ordered list of items of your own choosing. Use a second level heading (h2) above this list to describe what kind of items you are listing.

  4. Create a definition list of terms and their descriptions. Use a second level heading (h2) above this list to describe what kind of terms you are describing.

  5. Extra Credit! Try each of the following styles with ordered lists: list-style-type: decimal, lower-roman, upper-roman, lower-alpha, and upper-alpha.

  6. Extra Credit! Create an outline using nested lists to at least three levels. Use appropriate list style types for each level.

Congratulations, you have finished Lesson 3;

next lesson | home page