logo logo

List Formatting in HTML pages

The <ul> tag signals the browser that the following content, ending with the </ul> tag, is an unordered list of items. Inside, each item in the unordered list is identified by a leading <li> tag. Otherwise, nearly anything HTML-wise goes, including other lists, text, and multimedia elements.

Typically, the browser adds a leading bullet character and formats each item on a new line, indented somewhat from the left margin of the document. The actual rendering of unordered lists, however, varies widely between browsers, so you shouldn’t get bent out of shape trying to attain exact positioning of the elements. For instance, some browsers treat the start of an unordered list as a new paragraph and, like the <p> tag, leave a blank line above the list. Other browsers simply start the list item after a simple line break. Browsers vary, too, in how much space they use between list items. For example, the following source:

Popular Kumquat recipes:
<ul>
  <li>Pickled Kumquats
  <li>‘Quats and ‘Kraut (a holiday favorite!)
  <li>‘Quatshakes
</ul>
There are so many more to please every palate!

appears to the Mosaic user as shown in Figure 8.1.

Tricky HTML authors sometimes use nested unordered lists, with and without <li>-tagged items, to take advantage of the automatic, successive indenting. You can produce some fairly slick text segments that way. Just don’t depend on it for all browsers, including future ones. Rather, it’s best to use the border property with a style definition in the paragraph (<p>) or division (<div>) tag to indent nonlist sections of your document

bottom

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment

bottom