< Day Day Up > |
Text-level elements in HTML come in two basic flavors: physical and logical. Physical elements , such as <b> for bold and <i> for italic, are used to specify how text should be rendered. Logical elements , such as <strong> and <em> , indicate what text is, but not necessarily how it should look. Although common renderings exist for logical text elements, the ambiguity of these elements and the limited knowledge of this type of document structuring have reduced their use. However, the acceptance of style sheets and the growing diversity of user agents mean using logical elements makes more sense than ever.
Sometimes you might want to use bold, italics, or other font attributes to set off certain text, such as computer code. HTML and XHTML support various elements that can be used to influence physical formatting. The elements have no meaning other than to make text render in a particular way. Any other meaning is assigned by the reader.
The common physical elements are listed in Table 3-1. Note, as shown in the table, under the strict variants of HTML and XHTML, the <s> , <strike> , and <u> tags are deprecated and should not be used.
Element | Meaning | Notes |
---|---|---|
<i> </i> | Italics | |
<b> </b> | Bold | |
<tt> </tt> | Teletype ( monospaced ) | |
<u> </u> | Underline | Deprecated in HTML and XHTML strict variants. |
<s> </s> | Strikethrough | Deprecated in HTML and XHTML strict variants. |
<strike> </strike> | Strikethrough | Deprecated in HTML and XHTML strict variants. |
<sub> </sub> | Subscript | |
<sup> </sup> | Superscript | |
<big> </big> | Bigger font (one size bigger) | |
<small> </small> | Smaller font (one size smaller) |
The following example code shows the basic use of the physical text-formatting elements:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title> Physical Text Elements </title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> </head> <body> <h1 align="center">Physical Text Elements</h1> <hr /> <p> This is <b> Bold </b> <br /> This is <i> Italic </i> <br /> This is <tt> Monospaced </tt> <br /> This is <u> Underlined </u> <br /> This is <strike> Strike-through </strike> <br /> This is also <s> Strike-through </s> <br /> This is <big> Big </big> <br /> This is even <big><big> Bigger </big></big> <br /> This is <small> Small </small> <br /> This is even <small><small> Smaller </small></small><br /> This is <sup> Superscript </sup> <br /> This is <sub> Subscript </sub> <br /> This is <b><i><u> Bold, italic, and underlined </u></i></b> </p> </body> </html>
Physical elements can be combined in arbitrary ways, as shown in the final part of the example. However, just because text can be made monospaced, bold, italic, and superscript doesn't mean that various types of formatting should be applied to text. Figure 3-12 shows the rendering of the physical text elements under popular browsers.
Several physical text formatting elements ”particularly <u> , <big> , and <small> ”present certain problems that warrant extra discussion.
Today most browsers support the <u> tag, which underlines text. It was not initially defined under HTML 2.0, but was later introduced by Microsoft Internet Explorer and soon after all browsers began to support it. The trouble with this tag is that the meaning of underlined text can be unclear to people who use the Web. In most graphical browsers, clickable hypertext links are represented as blue underlined text. (Link color might vary.) Users instinctively think of underlined text as something that can be clicked. Some feel that the link color sufficiently distinguishes links from text that is underlined purely for stylistic purposes. However, this doesn't take into consideration monochrome monitors or people who are colorblind. Because the underline element could introduce more trouble than it is worth, it should be avoided even if it's allowed in the variant of HTML or XHTML you are using. Fortunately, under strict variants of HTML and XHTML, the tag is removed.
What do the big and small elements actually do? On the face of it, enclosing content within a <big> tag pair makes it bigger. Putting the <small> tag around something makes it smaller. What about when multiple <big> and <small> tags are nested? HTML has relative fonts ranging from size 1, very small, to size 7, very large. Every application of <big> bumps up the font one notch to the next level. The default font for a document usually is relative size 3, so two applications of <big> would raise the font size to 5. Multiple occurrences of <small> do the opposite ”they make things one size smaller. HTML authors familiar with the <font> tag discussed in Chapter 6 should note that <big> is equivalent to <font size="+1"> and <small> is equivalent to <font size="-1"> .
Logical elements indicate the type of content that they enclose. The browser is relatively free to determine the presentation of that content, although there are expected renderings for these elements that are followed by nearly all browsers. Although this practice conforms to the design of HTML, there are issues about designer acceptance. Plain and simple, will a designer think <strong> or <b> ? As mentioned previously, HTML purists push for <strong> because a browser for the blind could read strong text properly. For the majority of people coding Web pages, however, HTML is used as a visual language, despite its design intentions. Even when logical elements are used, many developers assume their default rendering in browsers to be static. <h1> tags always make something large in their minds. Little encourages Web page authors to think in any other way. Consider that until recently, it was almost impossible to insert a logical tag using a WYSIWYG HTML editor.
Seasoned experts know the beauty and intentions behind logical elements, and with style sheets logical elements will continue to catch on and eventually become the dominant form of page design. Even at the time of this writing, a quick survey of large sites shows that logical text elements are relatively rare. However, to embrace the future and style sheets, HTML authors should strongly reexamine their use of these elements. Table 3-2 illustrates the logical text-formatting elements supported by browsers.
Element | Meaning | Common Rendering |
---|---|---|
<abbr> </abbr> | Abbreviation (for example, Mr.) | Plain |
<acronym> </acronym> | Acronym (for example, WWW) | Plain |
<cite> </cite> | Citation | Italics |
<code> </code> | Code listing | Fixed Width |
<dfn> </dfn> | Definition | Italics |
<em> </em> | Emphasis | Italics |
<kbd> .. </kbd> | Keystrokes | Fixed Width |
<q> </q> | Inline quotation | Quoted (not in IE 6) |
<samp> </samp> | Sample text (example) | Fixed Width |
<strong> </strong> | Strong emphasis | Bold |
<var> </var> | Programming variable | Italics |
The following example uses all of the logical elements in a test document (shown in Figure 3-13 under common browsers):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title> Logical Text Elements </title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> </head> <body> <h1 align="center">Logical Text Elements</h1> <hr /> <p> <acronym> WWW </acronym> is an acronym <br /> <abbr> Mr. </abbr> is an abbreviation <br /> This is <em> Emphasis </em> <br /> This is <strong> Strong </strong> <br /> This is a <cite> Citation </cite> <br /> This is <code> Code </code> <br /> This is <dfn> Definition </dfn> <br /> This is <kbd> Keyboard </kbd> <br /> This is a <q> Quotation </q> <br /> This is <samp> Sample </samp> <br /> This is <var> Variable </var> <br /> </p> </body> </html>
Subtle differences might occur in the rendering of logical elements. For example, <dfn> results in Roman text under Netscape, but yields italicized text under Internet Explorer. <q> wraps quotes around content, but does not change rendering in Internet Explorer 6 or earlier. You should also note that the <abbr> and <acronym> tags lack default physical presentation in browsers. Without CSS, they have no practical meaning, save potentially using the title attribute to display the meaning of the enclosed text. In short, there is no guarantee of rendering, and older versions of browsers in particular can vary on inline logical elements, including common ones such as <em> . Consult Appendix A for any special browser support details you may encounter.
< Day Day Up > |