About Classes Contact Handouts Nota Bene Search Toolkit 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 Online Search Tools The Hunt Exploration Local Software Telecommunications Software (telewarez) 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. 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. 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. 1994 - 2010 Paula Edmiston http://theflyingcat.com/handouts/html/lists.html Last Edited: 01 Dec 05