HTML Basics
Stanford University Libraries & Academic Information Resources

Lists

Lists, of which HTML provides five types (only four in common use), are an important part of the HTML vocabulary. They give the author a way to say something critical about the relationship between pieces of text, knowing that the browsing software will provide a suitable way of presenting that relationship to the reader. The five types of list are:

• ul Unordered List
• ol Ordered List
• menu Menu
• dir Directory (rarely used)
• dl Definition List

Basic structure of lists

With the exception of Definition lists, all types of list have the same basic structure: a list consists of a sequence of list items, marked up with the <li>

    <list-type>
    <li>
    ...
    </list-type>

List items may contain complex components

List items can be simple text, or can contain paragraphs, preformatted text, blockquotes and a variety of other elements. (see the Technical Reference Guide for details). In addition, when they are part of an an Unordered List or an Ordered List, List items can also contain other lists (ul, dl, menu, or dir).[1]

Thus, In HTML, Lists need not be as simple as the 'list of lists' shown above. In fact, it is possible for a list to contain large blocks of prose complicated markup; an entire document might be structured as a list.

Unordered lists

Let's take a simple, unordered list, <ul> as a model (as always, the indentation is not significant):

Here are some things to remember about HTML

    <ul>
      <li>It's meant to identify the components (<em>structure)</em> of your
          document, not its appearance</li>
      <li>HTML documents should
      be <a href="list-x1.html">validated</a></li>
      <li>There are really only a few tags to keep track of</li>
    </ul>

Notice that the list can contain hypertext links, highlighting tags, and other elements. Notice also that this unordered list is probably rendered by your browser as a bulleted list.

• It's meant to identify the components (structure) of your document, not its appearance
• HTML documents should be validated
• There are really only a few tags to keep track of

As noted above unordered lists can nest with the list item of another list (that is, inside another Unordered list, an Ordered list, or a Definition list). Some browsers change the style of a bullet for a nested unordered list; others simply use the same style bullet for all nesting levels

<ul>
    <li>Fish
        <ul>
            <li>Trout</li>
            <li>Bass</li>
        </ul>
    </li>
    <li>Mammals
        <ul>
            <li>Sheep</li>
            <li>Moose</li>
        </ul>
    </li>
</ul>

Note that most authors usually omit the end-tag </li>, a practice which is perfectly legal. However, as you can see that it can be rather tricky to keep track of just where nested lists begin and end, and including the end-tag may help clarify things.

Your browser renders the example above as:

• Fish
  • Trout
  • Bass
• Mammals
  • Sheep
  • Moose

Ordered Lists

Ordered lists (<ol>) are nearly identical to unordered lists, except that the browser prepends a number to each list item:

    <ol>
    <li>Stanford
    <li>SUNY Binghamton
    <li>Berkeley
    <ol>

which is rendered

1. Stanford
2. SUNY Binghamton
3. Berkeley

Note that the browsing software supplies the number, not the author. If you include a number in your text, it will be blindy duplicated, which is probably not what you want:

1. 1. Stanford
2. 2. SUNY Binghamton
3. 3. Berkeley

Nested lists

Just as with unordered lists, ordered lists can nest inside the List items of other lists, including other ordered lists. However, most browsers don't provide complex numbering/lettering schemes to nested lists, and simply start the numbering over again, from 1, which is rarely what the author envisioned (future versions of HTML may provide more sophisticated handling for this type of list):

    <ol>
        <li>Fish
            <ol>
                <li>Big Fish
                    <ol>
                        <li>Sharks</li>
                        <li>Marlin</li>
                    </ol>
                </li>
                <li>Small Fish
                    <ol>
                        <li>Trout</li>
                        <li>Bass</li>
                    </ol>
                </li>
            </ol>
        <li>Mammals
            <ol>
                <li>etc...</li>
            </ol>
        </li>
    </ol>

rendered as

1. Fish
   1. Big Fish
      1. Sharks
      2. Marlin
   2. Small Fish
      1. Trout
      2. Bass
2. Mammals
   1. etc...

Ordered Lists and Dir

Menu and dir are another form of unordered list, used principally in the creation of navigational pages. That is, they are used in the design of user interface pages, offering the reader a choice of several links to other pages, for example, rather than in the markup of ordinary prose.

A menu is for most purposes, nearly identical to an unordered list (in fact some browsers appear to treat them as if they were identical.

Example

    <menu>
        <li><a href="contents.html">Table of contents</a></li>
        <li><a href'"chapter1.html">Chapter 1</a></li>
        <li>...
    </menu>

Dir (Directory lists) are rarely used, but may be useful for some purposes. In a directory list the List items are meant to be short (up to 20 characters each), typically a list of file names or links to other pages.

Rendering by browsers varies. The items in a directory list may be arranged in columns (typically 24 characters wide). If the rendering software is able to optimize the column width as function of the widths of individual elements, so much the better. Note however, that at present, many browsers do not treat dir differently from other lists.

Example

    <dir compact>
        <li>titlepag.html
        <li>contents.html
        <li>preface.html
        <li>forword.html
        <li>chapter1.html
        <li>chapter2.html
        <li>chapter3.html
        <li>chapter4.html
        <li>chapter5.html
        <li>afterword.html
        <li>appendix1.html
        <li>appendix2.html
        <li>appendix3.html
        <li>appendix4.html
        <li>index.html
    </dir>

which your browser renders as follows (but as always, don't depend on the behaviour of one brower to predict the behaviour of others--most I've looked at just treat dir as ul):

What's missing

Unfortunately, there is no way, in HTML 2.0 to specify a truly "plain" unordered list. Ul is in effect synonymous with a bulleted list and in common usage "bullets" connote some form of emphasis. Currently, the only ways to express a simple list and be sure that it will be rendered without any such emphasis, are

• to use preformatted text, e.g.

      <pre>
          apples
          pears
          bananas
      </pre>
  

  which is rendered:

      apples
      pears
      bananas
  

• to write an an ordinary paragraph and delimit the list items with br tags like this

      <p>Here is are three fruits<br>
      apples<br>
      pears<br>
      bananas</p>
  

  which is rendered:

  Here is are three fruits
  apples
  pears
  bananas

Future versions of HTML may rectify this situation.