Section 10.7. Presentational Elements

10.7. Presentational Elements

There are a handful of (X)HTML elements that are explicitly presentation oriented. Sometimes called "physical" styles, they provide instructions for the size, weight, or style of the font used to display the element.

If you've been paying attention, you already know that Cascading Style Sheets are now the preferred way to specify presentation instructions. Table 10-2 lists the presentational inline elements, along with the preferred alternative for achieving the same visual effect.

Table 10-2. Presentational inline elements and style sheet alternatives

Element	Description	Alternative
b	Bold	Use the strong element instead if appropriate, or use the font-weight property: font-weight: bold
big	Big	Use a relative font-size keyword to make text display slightly larger than the surrounding text: font-size: bigger
i	Italic	Use the em element instead if appropriate, or use the font-style property: font-style: italic
s (deprecated)	Strike-through	Use the text-decoration property to make text display with a line through it: text-decoration: line-through
small	Small	Use a relative font-size keyword to make text display slightly smaller than the surrounding text: font-size: smaller
strike (deprecated)	Strike-through	Use the text-decoration property to make text display with a line through it: text-decoration: line-through
tt	Teletype	Use the font-family property to select a specific or generic fixed-width font: font-family: "Andale Mono", monospace;
u (deprecated)	Underline	Use the text-decoration property to make text display with a line under it: text-decoration: underline

10.7.1. Font Elements

The font elementan inline element used to specify the size, color, and font face for the enclosed text using the size, color, and face attributes, respectivelyis the poster child for what went wrong with HTML. It was first introduced by Netscape Navigator as a means to give authors control over font formatting not available with HTML at the time (and for good reason). Netscape was rewarded with a temporary slew of loyal users, but the HTML standard and web development community paid a steep price in the long run.

Another deprecated font-related element, basefont, is used to set the font face, color, and size for an entire document when it is in the head of the document or for subsequent text when it is placed in the body.

The font element is emphatically deprecated, and you will be ridiculed by your peers for using it. I'm not kidding. Don't use it. For the sake of historical reference and thoroughness in documenting the HTML and XHTML Transitional DTDs, it is included in this chapter with some basic explanation.

font

---

     <font>...</font> 

This element is deprecated.

Attributes

Core (id, class, style, title), Internationalization

Deprecated attributes

color="#RRGGBB" or "color name"

face="typeface" (or list of typefaces)

size="value"

basefont

---

     <basefont> 

This element is deprecated.

Attributes

Deprecated attributes

color="#RRGGBB" or "color name"

face="typeface" (or list of typefaces)

size="value"

The font element adds no semantic value to a document and mixes presentation instructions in with the document structure. Furthermore, it makes updating a site more labor intensive, because each and every font element needs to be hunted down and changed, unlike style sheets that enable elements throughout a site to be reformatted with one simple edit.

The font element has three attributes, all of which have been deprecated as well:

color

Specifies the color of the text using a hexadecimal RGB value or color name.

face

Specifies a font or list of fonts (separated by commas) to be used to display the element.

size

Specifies the size for the font. The default text size is represented by the value "3." Values may be provided as numbers (1 through 7) or as values relative to 3 (for example, the value -1 is the same as the value 2, the value +3 is the same as 6).

A single font element may contain all of these attributes as shown:

     <font face="sans-serif" size="+1" color="white"><em>...</em></font> 

All of the functionality of the font element has been replaced by style sheet properties. The font element in the example could be handled with these style properties:

     em {font-family: sans-serif;         font-size: 120%;         color: white; } 

For more information on using style sheets to control the presentation of fonts, see Chapter 18, and kiss your font tags goodbye forever.

10.7.2. Subscript and Superscript

The subscript (sub) and superscript (sup) elements cause the selected text to display in a smaller size and positioned slightly below (sub) or above (sup) the baseline. These elements may be helpful for indicating chemical formulas or mathematical equations.

sub, sup

---

     <sub>...</sub>, <sup>...</sup> 

Attributes

Core (id, class, style, title), Internationalization, Events

Figure 10-3 shows how these examples of subscript and superscript render in a browser.

     <p>H<sub>2</sub>0</p>     <p>E=MC<sup>2</sup></p> 

Figure 10-3. Subscript and superscript

10.7.3. Line Breaks

Line breaks may be added in the flow of text using the br element. The text following the br element begins on a new line with no extra space added above. It is one of the few presentational elements preserved in the XHTML 1.0 Strict and XHTML 1.1 DTDs.

br

---

     <br /> 

Attributes

Core (id, class, style, title)

Deprecated Attributes

clear="none | left | right | all "

The br element is straightforward to use, as shown in this example.

     <p>This is a paragraph but I want <br />this text to start on a new line in the browser.</p> 

The clear attribute is used with the br element to specify where the next line should appear in relation to floated elements. For example, if an image has been floated to the right, then adding the markup <br clear="right" /> in the flow of text causes the new line to begin below the image on the right margin. The value left starts the next line below any floated objects on the left margin. The value all starts the next line below floats on both margins. The default, none, causes the next line to start where it would normally.

10.7.4. Word Wrapping

Another text quality that is inherently presentational is word wrapping : the way lines break automatically in the browser window. In CSS, you can prevent lines from wrapping by setting the white-space property to nowrap. The HTML and XHTML Recommendations define no element for preventing lines from wrapping. However, there are two nonstandard elements, nobr and wbr, that were introduced by Netscape and are sometimes used to control whether and where lines wrap.

The nobr element, which stands for "no break," prevents its contents from wrapping. The wbr (word break) element allows authors to specify the preferred point at which a line should break. These have never been adopted into an HTML Recommendation, but they are still in use and supported by Internet Explorer (all versions) and Mozilla. They are not supported in Safari and Opera.

Text and graphics that appear within the nobr element always display on one line, and are not wrapped in the browser window. If the string of characters or elements within the nobr element is very long, it continues off the browser window, and users must scroll horizontally to the right to see it. Adding a br within a nobr element text causes the line to break.

The esoteric word-break element (wbr) is used to indicate a recommended word-break point within content if the browser needs to do so. This may be useful if you have long strings of text (such as code or URLs) that may need to fit in tight spaces like table cells. If the table cell is wide enough, the text stays on one line, but if it is scaled smaller on someone's browser, the browser will wrap the line at the wbr. All of these nonstandard presentational elements should be avoided as well.

There are standard character entities for "soft hyphen" that should perform the same function, but they are inconsistently supported (the following section provides more information on character entities). The &#8203; entity causes a conditional line break in Mozilla, Safari, and Opera, but not Internet Explorer. The &shy; entity works for Opera and Internet Explorer on Windows but is buggy on Safari and is not supported by Mozilla.

Thanks go to Peter-Paul Koch for his wbr testing and summary on Quirksmode.org.

10.7.5. Horizontal Rules

In some instances, it is useful to add a visual divider between sections of a document. (X)HTML includes the hr element for adding a horizontal rule (line) to a web page.

hr

---

     <hr /> 

Attributes

Core (id, class, style, title), Internationalization, Events

Deprecated attributes

align="center|left|right"

noshade="noshade"

size="number"

width="number" or "number%"

The HR element is a block-level element, so it always appears on its own line, usually with a bit of space above and below as well. By default, browsers render a horizontal rule as a beveled dimensional line, as shown in Figure 10-4.

     <p>These are some deep thoughts.</p>     <hr />     <p>And this is another paragraph of deep thoughts.</p> 

Figure 10-4. A horizontal rule (default rendering)

The hr element includes a number of deprecated attributes for controlling the presentation of the rule.

size

Specifies the length of the rule in pixels or percentages.

width

Specifies the thickness of the rule in pixels.

align

Specifies the horizontal alignment of horizontal rules that are not the full width of the containing element.

noshade

Turns off the dimensional shading on the rule and renders it in black.

It is possible to control the presentation of an hr with style sheets, as shown in this example, that make the rule a one-pixel solid blue line. Note that the color and background colors are specified for cross-browser compatibility.

     hr {height: 1px;         width: 100%;         color: blue;         background-color: blue; } 

The preferred method is to keep the presentational HR element out of the document entirely and specify horizontal dividers using borders on the top or bottom edges of specific block elements, such as before H1s.

     h1 {border-top: 1px solid blue;         padding-top: 3em; }