Text-Level Elements

 <  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.

Physical Character-Formatting Elements

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.

Table 3-1: Inline Physical Tags

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.

click to expand
Figure 3-12: Rendering of physical text formatting elements

Several physical text formatting elements ”particularly <u> , <big> , and <small> ”present certain problems that warrant extra discussion.

Confusion Caused by Underlining

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.

Using <big> and <small>

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

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.

Table 3-2: Logical Text Formatting Elements

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):

click to expand   click to expand   click to expand
Figure 3-13: Rendering of logical text formation under Mozilla, Internet Explorer, and Opera
  <!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  >  


HTML & XHTML
HTML & XHTML: The Complete Reference (Osborne Complete Reference Series)
ISBN: 007222942X
EAN: 2147483647
Year: 2003
Pages: 252
Authors: Thomas Powell

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net