XHTML Lists

 

Lists are common elements of most Web pages – lists of links, lists of items, or lists as a table of contents for an entire Web site. This document describes how to mark up three types of lists: unordered, ordered, and definition lists.

 

Unordered and ordered lists

Unordered lists

An unordered list is a collection of items where the order of appearance is not important (e.g., a bulleted list). Two XHTML elements are used to construct an unordered list: ul and li (list item). The ul element denotes the beginning of an unordered list. The list itself is composed of li elements.

 

<p>Fun Programming Languages</p>

<ul>

  <li>Java</li>

  <li>C</li>

  <li>Perl</li>

  <li>.NET?</li>

</ul>

 

This is how the text may appear in the browser.

 

Fun Programming Languages

  • Java
  • C
  • Perl
  • .NET?

 

The default marker type for unordered list items is a solid, round bullet; however, the marker type can be altered with cascading style sheets.

 

Ordered lists

An ordered list is a collection of items that are numbered. The ol element is used to define an ordered list, and again, the li element defines the list members.

 

<p>Steps for using a fun programming language to solve a problem:</p>

<ol>

  <li>Think about the problem</li>

  <li>Describe the algorithm in pseudocode</li>

  <li>Implement the algorithm</li>

  <li>Test and refactor as needed</li>

  <li>Deploy application</li>

  <li>Collect paycheck</li>

</ol>

 

This is how the text may appear in the browser.

 

Steps for using a fun programming language to solve a problem:

  1. Think about the problem
  2. Describe the algorithm in pseudocode
  3. Implement the algorithm
  4. Test and refactor as needed
  5. Deploy appplication
  6. Collect paycheck

 

The default marker type for ordered lists is Arabic numbers (e.g., 1., 2., 3.); however, style sheets can control the marker type. To start the list numbering at a specific value, use the start attribute of the ol element. Additionally, the value attribute of li can be used to modify the numbering within the list. Any subsequent list items are affected by the value change. For example, if the value attribute specifies that the list element is 4, the next element will be 5.

 

<ol start=4>

  <li>The first item is 'four'</li>

  <li>This item is 'five'</li>

  <li value="1">Now things are really confusing!</li>

  <li> This item is now two</li>

</ol>

 

Here is how the text may appear in the browser.

 

  1. The first item is four
  2. This item is five
  1. Now things are really confusing!
  2. This item is now two

 

More on lists

Inserting a line break will break the line of text without affecting the indentation.

 

<ul>

  <li>Item one is on a single line.</li>

  <li>Item two spans multiple<br />lines.</li>

</ul>

 

&bull          Item one is on a single line.

&bull          Item two spans multiple

lines.

 

The list members – text, images, links, etc. – must be placed inside li elements. The following markup is incorrect:

 

<ul>

  My favorite languages are:  <!-- text cannot exist inside the 'ul' element -->

  <li>Perl</li>

  <li>FORTRAN</li>

  <li>x86 assembly</li>

</ul>

 

To create nested lists, start the sublist inside the parent list's li element.

 

<!-- same list type (ordered within ordered) -->

<ol>

  <li>Perl Topics

    <ol>

      <li>Strings</li>

      <li>Arrays</li>

      <li>Objects</li>

    </ol>

  </li>

  <li>FORTRAN Topics</li>

</ol>

<!-- different list type (unordered within ordered) -->

<ol>

  <li>Perl Advantages

    <ul>

      <li>Interpreted</li>

      <li>Very compact code</li>

      <li>Good regular expression support</li>

    </ul>

  <li>FORTRAN Advantages</li>

</ol>

Here is how the text may appear in the browser.

 

&bull          Perl Topics

 

1.    Strings

2.    Arrays

3.    Objects

 

&bull          FORTRAN Topics

 

 

  1. Perl

 

&bull     Interpreted

&bull     Very compact code

&bull     Good regular expression support

 

  1. FORTRAN

 

Cascading style sheets can control the display of lists with respect to indenting, margins, marker type (e.g., images for ul bullets), and ordered list styles (e.g., a., b., c., I., II., III.).

 

Definition lists

A definition list is a special type of list used most often for glossaries or other word-phrase pairs. There are three XHTML elements used in definition lists: dl (definition list), dt (definition term), and dd (definition).

 

<dl>

  <dt>Associative array</dt>

  <dd>A list of items stored based on a key; also called a hash table.</dd>

  <dt>Parameters</dt>

  <dd>Variables provided as arguments to a function or subroutine.</dd>

</dl>

 

Here is how the text may appear in the browser.

 

Associative array

                  A list of items stored based on a key; also called a hash table.

Parameters

                  Variables provided as arguments to a function or subroutine.

 

It is not necessary for every definition term to have a definition.

 

<dl>

  <dt>Constant-time</dt>

  <dt>O(1)</dt>

  <dd>Algorithms that have an efficiency that is not based on input size.</dd>

 

  <dt>Linear-time</dt>

  <dt>O(n)</dt>

  <dd>Algorithms that have an efficiency that is linear with respect

    to input size.</dd>

</dl>

 

Here is how the text may appear in the browser.

 

Constant-time

O(1)

Algorithms that have an efficiency that is not based on input size.

Linear-time

O(n)

Algorithms that have an efficiency that is linear with respect to input size.