[an error occurred while processing this directive]


Handouts » HTML Handouts » HTML Lists

Hypertext Lists

See also the CSS Lists handout. Lists in hypertext offer the only form of indentation available. Since HTML and ignores white space, formatting with the space bar of the keyboard will not provide the layout needed for some documents.

The list tags can be used with and without their notation (numbers and bullets) in order to center columns of text. Bear in mind that "centering" is a relative term and the windows of graphics can be changed by the reader, resulting in browser windows that vary in width from a few inches to 10 or more. So you are not really centering text, though it may appear centered in *your* window. You are merely indenting the text from the left.

Here are examples of three HTML list commands along with an approach that allows you to use bullets of your own making.

Ordered (numbered) List
Unordered (bulleted) List
Definition List

An Ordered (numbered) List in HTML

Use the <ol> tag to create numbered lists in Html. Note that you do not enter the "numbers" in the lists; the HTML language provides them. You will merely enter commands to *provide* numbers. The nice feature about the OL listing is that you don't have to keep track of the numbers themselves; you can insert and remove entries without screwing up the numbers.

You can select the type of numbers used with the type designation: type = =A|a|I|i|1

<ol type=A>

Figure 1 shows an ordered (numbered) list of internet tools Tools can be divided into roughly two genres: online search tools and software you run on your local machine.

Tool Use: On and Off the Net

  1. Online Search Tools
    1. The Hunt
    2. Exploration
  2. Local Software
    1. Telecommunications Software (telewarez)
    2. HTML Editors
Figure 1. A nested, ordered list

Figure 1 displays 2 sets of nested <ol> tags. You can see the formatted hypertext below:

<h2>Tool Use: On and Off the Net</h2>
<ol>
<li>Online Search Tools
     <ol type=A>
     <li> The Hunt
     <li> Exploration
     </ol>
<li>Local Software
     <ol type=A>
     <li>Telecommunications Software (telewarez)
     <li>HTML Editors
     </ol>
</ol>
Figure 1a. The HTML code for the ordered list in Figure 1.

To the Top


An Unordered List With Bullets

This is an Unordered list. That means the listed text is indented from the left margin and tagged with bullets (the asterisk in lynx; round dots in graphics browsers), rather than being numbered, like with the <ol>. Begin each line with the <li> tag to place the bullet. If you *omit* the <li> tag the line will be indented but no bullet will be presented. Notice how the following entries are indented under this paragraph.

You can choose the appearance of the bulets with the type designation, as in

<ul type=disk|circle|square>

An Unnumbered List Marked with Bullets

  • An entry in the list.
  • This is a long entry in the list. This line is so long it will wrap around, maintaining the indentation. Remember, wrapping is affected by the width of the *reader's* browser window, so what you see may not be what other people see.
  • Here is another entry in the list.

  • The <p> tag was inserted above and below this entry to supply blank lines above and below this entry.

    This entry in the list does NOT begin with <li> tag. It is indented, just like the other entries; it just doesn't begin with a <li> tag. So you don't get the bullet!

Figure 2. An Unordered List Marked with Bullets


Here is what that list looks like in HTML:

<h2>An Unnumbered List Marked with Bullets</h2>
<ul>
<li> An entry in the list.
<li>This is a long entry in the list. This line is so long it will wrap around, maintaining the indentation. Remember, wrapping is affected by the width of the *reader's* browser window, so what you see may not be what other people see.
<li> Here is another entry in the list.
<p>
<li>The <p> tag was inserted above and below this entry to
supply blank lines above and below this entry.
<p>
This entry in the list does NOT begin with <li> tag. It is indented, just like the other entries; it just doesn't begin with a <li> tag. So you don't get the bullet!
</ul>
Figure 2b. The HTML code for the bulleted list.


To the Top


The HTML Definition List

The definition list is a kind of column format and uses 3 tags, <dl>, <dt> and <dd>. The <dl> opens the list; </dl> closes the list. <dt> marks the "term to be defined", positioning it to the left. The <dd> marks the "definition OF the term". This text is usually runs about a paragraph in length and appears indented underneath the "term".

In this case the <dl> has been entered on the line below the title (A Definition List on Internet Tools). The <dt> tag is entered before the 2 terms, Gopher and Veronica (there is no closing tag for <dt>). The <dd> tag is entered before the definition of the terms; it has no closing tag either.

Internet Tools

Gopher
The earliest document delivery service on the Internet. Gophers go and get documents and bring them back to you.
Veronica
A companion to the Gopher, Veronica allows you to search gopher tunnels for specific strings of text. Boolean terminology and truncation are available.
World Wide Web
A global system of document and multimedia distribution, based in hypertext and incorporating older net tools (such as telnet and FTP).
Figure 3. A List Formatted by Definition Tags

Here is the formatted text

<h2>Internet Tools </h2>
<dl>
<dt>Gopher
<dd>The earliest document delivery service on the Internet. Gophers go and get documents and bring them back to you.
<dt>Veronica
<dd>A companion to the Gopher, Veronica allows you to search gopher tunnels for specific strings of text. Boolean terminology and truncation are available.
<dt>World Wide Web
<dd>A global system of document and multimedia distribution, based in hypertext and incorporating older net tools (such as telnet and FTP).
</dl>
Figure 3b. The HTML code for the definition list

Notice that is doesn't matter whether you enter the <dt> and <dd> terms on the same line or on separate lines. The browsers will merge them in together in the correct format.


To the Top


http://paula.edmiston.org/handouts/html/lists.html
Last Edited: 11 Mar 2012


[an error occurred while processing this directive]