Breadcrumbs

Too Easy XHTML - Organization with Lists [5]

Throughout this guide you've learned various tags to define a specific object. Here in Part 5 we are going to look at organizing data in XHTML using lists. We'll look at three major list supported by XHTML - unordered, ordered, and definition. Lists have many benefits including easy organization, structured navigation for disabled users, and increased usability.

Unordered and Ordered Lists

Two common list types include unordered and ordered. Unordered lists are bullet lists using various symbols to list out information. Ordered lists are usually numbered and meant to be in a specific order, like a set of instructions. They each have very similar syntax, which makes them close cousins.

An unordered list is defined using <ul></ul>. Similar, an ordered list is defined using <ol></ol>. To specify listed items we use the list item tag, <li></li>, in both ordered and unordered lists:

Code: XHTML

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

Above we see two simple lists, one ordered and the other unordered. The code outputs two lists:

Examples of ordered and unordered lists

You can also nest list within each other:

Code: XHTML

<ul>
    <li>Item 1
    <ul>
        <li>Item 1.1</li>
        <li>Item 1.2</li>
    </ul>
    </li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

By placing another list item within the list item (<li>) tag you get a nested list. You can continue to create sub-lists over and over simply by duplicating the technique demonstrated above.

Definition Lists

A definition list isn't like a normal list, but is a list of definitions and their meanings. It makes use of three tags - one to define the list, one to define the words, and one to define meanings.

Code: XHTML

<dl>
    <dt>Clock</dt>
    <dd>Device to tell time</dd>
    <dt>Lamp</dt>
    <dd>Illuminates light</dd>
</dl>

Web browsers by default apply some formatting to definition lists to make them more readable, so the output renders like:

Example of a definition list

Similar to ordered and unordered lists, you can nest definition lists too:

Code: XHTML

<dl>
    <dt>Clock</dt>
    <dd>Device to tell time
        <dl>
            <dt>Watch</dt>
            <dd>Portable Clock</dd>
        </dl>
    </dd>
    <dt>Lamp</dt>
    <dd>Illuminates light</dd>
</dl>

Benefits of Lists

Using lists has benefits in accessibility, usability, design, and organization:

Accessibility - Lists enable content to be read easier in a screen reader. Screen readers read off a list stating the start and end of each item. If you were to create more primitive lists, using text and line break tags, you wouldn't get the added aural benefits.

Usability - Using lists is a break away from the normal paragraphs on a web page. It is easier for the visitor to read and it attracts their attention. Lists make pages more scannable too for on-the-go visitors.

Design - With the added accessibility of lists you can also make those same lists look good for your other visitors. Using CSS you can style them in a variety of ways, on top of the other benefits of lists.

Organization - Since XHTML is an XML based language, the purpose of tags it to describe data. Each tag has a specific meaning in describing data, the more organized and descriptive the data, the better the markup. Lists provide increased data organization and makes your markup clearer.

Summary

You've taken a look at using three types of lists in your XHTML documents - ordered, unordered, and definition. You also looked at the benefits of using lists. In Part 6 we will look at using forms if your XHTML documents.