A Complete Guide to Web Design

122 Chapter 7 – Formatting Text

Layout Techniques with HTML

Web Design in a Nutshell, eMatter Edition

Nesting Lists

Any list can be nested within another list. For instance, you could add a bulleted

list item under an item within a numbered list; numbered lists can be added within

a definition; and so on. Lists can be nested several layers deep; however, since the

left indent is cumulative, it doesn’t take long for the text to end up pressed against

the right margin.

It is helpful to use indents in your HTML source document to keep nesting levels

clear. Be careful to close all of the lists you start!

Nesting unordered lists

When unordered lists are nested within each other, the browser automatically

displays a different bullet for each consecutive level, as shown in Figure 7-11.

Nesting ordered lists

It would be nice if nested ordered lists automatically displayed in standard outline

format, but unfortunately, browsers do not have the capacity to automatically

change numbering schemes. By default, every level within a nested numbered list

will display with numbers (arabic numerals). If you want standard outline format,

you need to label each list manually with the typeattribute, as shown in

Figure 7-12.

Layout Techniques with HTML

First, let it be stated that “layout techniques with HTML” is an oxymoron. HTML

was specifically designed to pass off all layout functions to the end user. The

Figure 7-10: Simple definition list

<DL>

<DT>Poaching

<DD>Cooking food partially or completely submerged in

simmering liquid.

<DT>Baking

<DD>Cooking food in the indirect, dry heat of an oven.

The food may be covered or uncovered.

<DT>Broiling

<DD>Cooking food a measured distance from the direct,

dry heat of the heat source.

</DL>