Notice: Undefined variable: extra_header in /www/martincc/new/header.php on line 11

Organizing the content of an XHTML page and/or an entire website is an important part of webpage design. Lists and tables are relatively simple means to organize content. There are three basic types of lists in XHTML:

  1. Ordered lists (numbered) which contain items enumerated either with numbers (1, 2, 3, …) , letters (a, b, c, …) or Roman numerals (i, ii, iii, …)
  2. Unordered lists (bulleted) which contain items marked with one of three different types of bullets.
  3. Definition lists which are a convenient means of displaying a number of terms and their definitions (or explanations) indented below the term.

Lists also create a line break between the top and bottom of the list.


4.1 Bulleted (Unordered) Lists

Unordered lists are created using the <ul>…</ul> tags. The list items are defined with the <li> tags and go in between the opening and closing tags for the unordered lists.

  1. Add the following code to your first XHTML page created in the previous section: <h2>My Fall Schedule</h2>

    <ul>
    <li>CS105 Webpage Design</li>
    <li>MA 109 Calculus I</li>
    <li>EN 102 Language and Rhetoric</li>
    </ul>
  2. Save your file and view it in a browser. Notice the bullets that appear before each item in the list. It should look like the list below.

    Image of File in Browser

  3. The type of bullet that appears in the list can be changed using CSS stylesheets.
  4. You can also nest unordered lists. Nested lists that do not have their own CSS styling will use the default bullet type. Add the following to your XHTML file: <h2>Courses I have taken at College</h2>

    <ul>
    <li>Fall 2001
    <ul>
    <li>PL 100 First Philosophy</li>
    <li>MA 109 Calculus I
    <ul>
    <li>I barely survived this class.</li>
    </ul>
    </li>
    <li>EN 102 Language and Rhetoric</li>
    </ul>
    </li>
    <li>Spring 2002
    <ul>
    <li>CS110 Intro to C++
    <ul>
    <li>I loved this class.</li>
    </ul>
    </li>
    <li>BL 101 Intro to Plant Life</li>
    <li>HI 102 Early US History</li>
    </ul>
    </li>
    <li>Fall 2002
    <ul>
    <li>CS105 Webpage Design
    <ul>
    <li>This class was wonderful.</li>
    </ul>
    </li>
    <li>MA 110 Calculus II</li>
    <li>EN 108 Short Stories</li>
    </ul>
    </li>
    </ul>
  5. Save the file and view it in a browser.
    NOTE: Each nested sublist must be a complete list using beginning and ending <ul> tags. Additionally, the browser restarts the bullet style sequence, unless otherwise controlled via a CSS stylesheet. You are able to nest ordered lists inside unordered lists as well.
    Image of File in Browser


4.2 Numbered (Ordered) Lists

Unordered lists are created using the <ol>…</ol> tags. The list items are defined with <li> tags and go in between the beginning and closing tags for the ordered lists.

  1. Add the following code to your first XHTML page created earlier: <h2>My Fall Schedule </h2>

    <ol>
    <li>CS105 Webpage Design</li>
    <li>MA 109 Calculus I</li>
    <li>EN 102 Language and Rhetoric</li>
    </ol>
  2. Save your file and view it in a browser. Note the numbers that appear before each item in the list.
  3. The <ol> tag can also be styled using CSS stylesheets. Arabic numbers are the default numbering type.
  4. You can also nest ordered lists. Nested lists that do not have their own CSS styling will use the default bullet type. <h2>Courses I have taken at College </h2>

    <ol>
    <li>Fall 2001
    <ol>
    <li>PL 100 First Philosophy</li>
    <li>MA 109 Calculus I
    <ol>
    <li> I barely survived this class.</li>
    </ol>
    </li>
    <li>EN 102 Language and Rhetoric</li>
    </ol>
    </li>
    <li>Spring 2002
    <ol>
    <li>CS110 Intro to C++
    <ol>
    <li> I loved this class.</li>
    </ol>
    </li>
    <li>BL 101 Intro to Plant Life</li>
    <li>HI 102 Early US History</li>
    </ol>
    </li>
    <li>Fall 2002
    <ol>
    <li>CS105 Webpage Design
    <ol>
    <li> This class was wonderful.</li>
    </ol>
    </li>
    <li>MA 110 Calculus II</li>
    <li>EN 108 Short Stories</li>
    </ol>
    </li>
    </ol>
    NOTE: Each nested sublist must be a complete list using beginning and ending <ol> tags. Additionally, the browser restarts the bullet style sequence, unless otherwise controlled via a CSS stylesheet. You are able to nest unordered lists inside ordered lists as well.
    It should appear as this:

    Image of File in Browser

4.3 Definition Lists

Definition lists are the third type of XHTML list which displays a number of terms and an associated definition. The <dl>…</dl> tags define a definition list. The <dt>…</dt> tags create a definition term in a definition list. The <dd>…</dd> tags define the definition for the term, which will appear indented and below the term.

  1. Try adding the following to your XHTML file: <h2> CIS Course Descriptions </h2>

    <dl>
    <dt>CS 101 Survey of Computers and Computing </dt>
    <dd>
    This course presents an overview of current concepts and
    terminology related to computers and information processing.
    It is designed for students who have had no previous
    college-level computing courses. It covers the use of
    graphical user interfaces, applications software, and
    telecommunications in a laboratory environment. Not open to
    CIS majors without departmental approval. Three credits.
    </dd>
    <dt>CS 110 Introduction to Computing and Information Science I</dt>
    <dd>
    An introduction to problem solving and computer
    programming using a high-level programming language.
    Topics include algorithms, program structure, input/output,
    modularity and parameters, control structures, data abstraction,
    arrays, text files and structured techniques.
    </dd>
    </dl>
    Save your file and view it in a browser.
    It should appear as this:

    Image of File in Browser

References

  1. Bos, Bert, XML Introduction (accessed August, 2002) http://www.w3.org/XML/1999/XML-in-10-points
  2. Dietel, H. M., Dietel, P. J. & Neito, T. R. (2001) Internet & World Wide Web: How to Program. 2nd Edition. Prentice Hall, NJ.
  3. Flynn, P. XML FAQ (accessed August, 2002) http://www.ucc.ie/xml/#acro
  4. Richmond, A. The Web Developers Virtual Library Introduction to XHTML (accessed August, 2002) http://www.wdvl.com/Authoring/Languages/XML/XHTML/
  5. Veen, J. (2001) The Art and Science of Web Design. New Riders: Indianapolis, IN.
  6. HTML and XHTML Information www.w3c.org/markup

Introduction to Web Design by Cynthia J. Martincic :: Credits