Formatting Elements
XHTML provides a host of elements that you can use to change how text is displayed on a browser screen. After all, 12-point Times Roman or Arial gets a little tiring after a while, and it's nice to give a reader an occasional break from a sea of ordinary text.
You can apply formatting instructions at two levels within a document. The first is at the text level, which means you are marking up at least a single character, but often much more than that. The second is at the paragraph or block level, which means you are formatting a specific logical chunk of the document. This section looks at both types of markup, starting with text-level formatting.
Text-Level Formatting
Text-level formatting can occur in one of two ways. An XHTML element that formats text can make changes to the font properties of the text (font formatting or physical styles), or it can describe how the text is being used in the context of the document (phrase formatting or logical styles). The next two sections introduce you to the elements used for each type of formatting.
NOTE
The HTML <FONT>, <BASEFONT>, <U>, <S>, and <STRIKE> tags do not have equivalents under the Strict XHTML DTD. You should use style sheets to specify information previously provided through these tags, or you can use the Transitional or Frameset DTD, both of which permit the use of these elements.
Font Formatting
<b>
Type:
Container
Function:
Contains text to be rendered in boldface (see Figure 3.1).
){kind=link}
Figure 3.1 Boldface text stands out from the plain text around it, drawing the reader's attention.
Syntax:
<b> ... bold text goes here ... </b>
Attributes:
None.
Example:
<b>First Name:</b> <input type="text" name="fname" />
<big>
Type:
Container
Function:
Contains text to be rendered in a font size bigger than the default font size (see Figure 3.2).
){kind=link}
Figure 3.2 Using the <big> element increases the point size in which text is rendered.
Example:
<big> ... bigger text goes here ... </big>
Attributes:
None.
Example:
<big>D</big>rop <big>C</big>aps are a nice onscreen effect.
Related Elements:
The <small> element has the opposite effect (see later in this chapter).
<i>
Type:
Container
Function:
Contains text to be rendered in italic (see Figure 3.3).
){kind=link}
Figure 3.3 Italicized text can be used to denote emphasis or the title of something.
Syntax:
<i> ... italicized text goes here ... </i>
Attributes:
None.
Example:
The textbook for the class is Ben Forta's <i>The ColdFusion 4.0 Web Application Construction Kit</i>.
<small>
Type:
Container
Function:
Contains text to be rendered in a font size smaller than the default font size.
Syntax:
<small> ... smaller text goes here ... </small>
Attributes:
None.
Example:
<small>"Sssssssshhh!"</small>, he whispered in a tiny voice.
Related Elements:
The <big> element has the opposite effect (see the <big> element section earlier in the chapter).
<sub>
Type:
Container
Function:
Contains text to be a subscript to the text that precedes it.
Syntax:
<sub> ... subscript text goes here ... </sub>
Attributes:
None.
Example:
a<sub>1</sub>, a<sub>2</sub>, and a<sub>3</sub> are the coefficients of the variables x, y, and z.
<sup>
Type:
Container
Function:
Contains text to be rendered as a superscript to the text that precedes it (see Figure 3.4).
){kind=link}
Figure 3.4 Superscripts are useful for indicating trademark or copyright information.
Syntax:
<sup> ... superscript text goes here ... </sup>
Attributes:
None.
Example:
x<sup>2</sup> + y<sup>2</sup> = 1 defines the unit circle.
<tt>
Type:
Container
Function:
Contains text to be rendered in a monospace or fixed-width font. Typically, this font is Courier or some kind of typewriter font (see Figure 3.5).
){kind=link}
Figure 3.5 Typewriter text is good for displaying computer-related content or for varying the fonts used in the document.
Syntax:
<tt> ... text to be in fixed-width font goes here ... </tt>
Attributes:
None.
Example:
The computer will then display the <tt>Login:</tt> prompt.
Phrase Formatting
Recall that phrase formatting indicates the meaning of the text it marks up and not necessarily how the text will be rendered on the browser screen. Nevertheless, text marked with a phrase-formatting element will typically have some kind of special rendering to set it apart from unmarked text.
<abbr>
Type:
Container
Function:
Contains text that is an abbreviation of something. This is useful information for browsers that are not vision-based because it enables them to treat the abbreviation differently. A speech-based browser, for example, could know to look in an abbreviation table for pronunciation if you marked up "Dr." with the <abbr> element. That way, it could say the word "doctor" rather than making the "dr" sound you would get by pronouncing the "d" and the "r" together.
Syntax:
<abbr> ... acronym goes here ... </abbr>
Attributes:
None.
Example:
She got her <abbr>PhD</abbr> from the University of Virginia.
<acronym>
Type:
Container
Function:
Contains text that specifies an acronym. This element is also useful for nonvisual browsers. The element might tell a speech-based browser to pronounce the letters in the acronym one at a time, for example, rather than trying to pronounce the acronym as a word.
Syntax:
<acronym> ... acronym goes here ... </acronym>
Attributes:
None.
Example:
Practical Extraction and Reporting Language <acronym>(PERL)</acronym> is a popular CGI scripting language.
<address>
Type:
Container
Function:
Contains either a postal or an email address (see Figure 3.6). Text marked with this element is typically rendered in italic.
){kind=link}
Figure 3.6 Marking up address information provides a logical marker for programs processing the document and a visual marker for those reading the document.
Syntax:
<address> ... address goes here ... </address>
Attributes:
None.
Example:
If you have any comments, please send them to <address>webmaster@your-isp.com</address>.
<cite>
Type:
Container
Function:
Contains the name of a source from which a passage is cited. The source's name is typically rendered in italic.
Syntax:
<cite> ... citation source goes here ... </cite>
Attributes:
None.
Example:
According to the <cite>XHTML 1.0 Recommendation</cite>, the type attribute of the <script> element is required.
<code>
Type:
Container
Function:
Contains chunks of computer language code. Browsers commonly display text marked with the <code> element in a fixed-width font such as Courier.
Syntax:
<code> ... code fragment goes here ... </code>
Attributes:
None.
Example:
<code>
alert("Please fill in the password field.");
return false;
</code>
<del>
Type:
Container
Function:
Contains text that has been deleted from the document. The element is intended mainly for documents with multiple authors and editors who would want to see all the content in an original draft, even though it might have been deleted by a reviewer.
NOTE
The idea of logically marking up deleted text is similar to the idea of using revision marks in Microsoft Word. When revision marks are turned on, you can see the deleted text even though it is technically no longer part of the document.
Syntax:
<del cite="url" datetime="YYYYMMDDThh:mm:ss"> ... deleted text goes here </del>
Attributes:
<del> can take two attributes:
cite—Provides the URL of a document that explains why the deletion was necessary.
datetime—Puts a "timestamp" on the deletion.
Example:
She just got a big<del>, huge</del> raise.
In this example, the use of the word "huge" is redundant, so an astute copy editor would delete it.
Related Elements:
The <ins> element has a similar function for inserted text.
<dfn>
Type:
Container
Function:
Denotes the defining instance of a term.
Syntax:
<dfn> ... term being introduced goes here ... </dfn>
Attributes:
None.
Example:
Freud proposed the idea of a <dfn>catharsis</dfn> - a release of psychic tension.
<em>
Type:
Container
Function:
Contains text to be emphasized. Most browsers render emphasized text in italic.
Syntax:
<em> ... emphasized text goes here ... </em>
Attributes:
None.
Example:
Please do <em>not</em> feed the animals.
<ins>
Type:
Container
Function:
Contains text that has been inserted into the document after its original draft.
Syntax:
<ins> ... inserted text goes here ... </ins>
Attributes:
Like <del>, <ins> can take two attributes:
cite—Provides the URL of a document that explains why the insertion was necessary.
datetime—Puts a "timestamp" on the insertion.
Example:
The New World was discovered by <del>Magellan</del> <ins>Columbus</ins> in 1492.
NOTE
Note how <del> and <ins> are used together to strike some text and then to insert a correction in its place.
Related Elements:
The <del> element logically represents deleted text.
<kbd>
Type:
Container
Function:
Contains text that represents keyboard input. Browsers typically render such text in a fixed-width font.
Syntax:
<kbd> ... keyboard input goes here ... </kbd>
Attributes:
None.
Example:
To begin, type <kbd>go</kbd> and press Enter.
<q>
Type:
Container
Function:
Contains a direct quotation to be displayed inline.
Syntax:
<q cite="URL_of_cited_document"> ... quotation goes here ... </q>
Attributes:
If you're quoting from an online source, you can set the cite attribute equal to the source's URL. Also, you might want to consider using the lang attribute because quotes are denoted with different characters in many languages.
Related Elements:
The <blockquote> element can also be used to mark up quoted text, but block quotes are displayed with increased right and left indents and are not in line with the rest of the body text.
Example:
<q>To be or not to be. That is the question.</q> is her favorite quote from Shakespeare.
<samp>
Type:
Container
Function:
Contains text that represents the literal output from a program. Such output is sometimes referred to as sample text. Most browsers render sample text in a fixed-width font.
Syntax:
<samp> ... program output goes here ... </samp>
Attributes:
None.
Example:
A common first exercise in a programming course is to write a program to produce the message <samp>Hello World</samp>.
<strong>
Type:
Container
Function:
Contains text to be strongly emphasized. Browsers typically render strongly emphasized text in boldface (see Figure 3.7).
){kind=link}
Figure 3.7 The <strong> element is useful for marking up recommendations with extra emphasis.
Syntax:
<strong> ... strongly emphasized text goes here ... </strong>
Attributes:
None.
Example:
<strong>STOP!</strong> Do not proceed any further. Contact your system administrator.
<var>
Type:
Container
Function:
Denotes a variable from a computer program. Variables are typically rendered in a fixed-width font.
Syntax:
<var> ... program variable goes here ... </var>
Attributes:
None.
Example:
The <var>RecordCount</var> variable is set to the number of records that the query retrieved.
Block-Level Formatting Elements
Block-level formatting elements are usually applied to larger amounts of content than the text-level formatting elements. As such, the block-level elements define major sections of a document, such as paragraphs, headings, abstracts, chapters, and so on. The elements profiled in this section are the ones to turn to when you want to define the block-level elements in a document you're authoring.
NOTE
The HTML <CENTER> tag does not have an equivalent under the Strict XHTML DTD, but is permissible under the Transitional and Frameset DTDs. You should center page elements using the style sheet instructions when writing to the Strict DTD.
<blockquote>
Type:
Container
Function:
Contains quoted text that is to be displayed indented from regular body text (see Figure 3.8).
){kind=link}
Figure 3.8 Blockquotes are used to offset longer quoted passages.
Syntax:
<blockquote cite="URL_of_cited_document"> ... quoted text goes here ... </blockquote>
Attributes:
If you're quoting from an online source, you can set the cite attribute equal to the source's URL.
Example:
Fans of Schoolhouse Rock will always be able to recite the preamble of the United States Constitution: <blockquote> We, the people, in order to form a more perfect Union ... </blockquote>
Related Elements:
The <q> element is used to denote quoted text that is to be displayed in line with the body text.
<br />
Type:
Standalone
Function:
Inserts a line break in the document. Carriage returns in the XHTML code do not translate to line breaks on the browser screen, so authors often need to insert the breaks themselves. The <br /> element is indispensable when rendering text with frequent line breaks, such as addresses or poetry. Unlike the <p> element or the heading elements, <br /> adds no additional vertical space after the break.
Syntax:
<br />
Attributes:
None.
NOTE
The HTML <BR> tag takes the CLEAR attribute to facilitate breaking to a margin that is free of a "floating" page element such as an image or a table. Under the Strict DTD, XHTML <br/> tag does not have a clear attribute. You should break to clear margins using style sheet instructions instead. You are free to use the clear attribute with the Transitional and Frameset DTDs.
Example:
First Name: <input type="text" name="fname" /><br /> Last Name: <input type="text" name="lname" /><br /> Telephone: <input type="text" name="phone"/><br /> Email: <input type="text" name="email" />
<bdo>
Type:
Container
Function:
When mixing languages in an XHTML document, it sometimes becomes necessary to be sensitive to the direction in which the language is read (left-to-right versus right-to-left). When languages that have mixed directions are used in a document, an approach called the bidirectional algorithm is used to ensure proper presentation of the content. In cases where you want to override the bidirectional algorithm for a block of text, you can enclose that text in the <bdo> and </bdo> elements.
Syntax:
<bdo dir="ltr|rtl"> ... directional text goes here ... </bdo>
Attributes:
The <bdo> element takes the dir attribute, which can be set to ltr to specify left-to-right directionality or to rtl to specify right-to-left directionality.
Example:
<body lang="he" ...> <!-- Hebrew language context - RTL directionality> ... <bdo dir="ltr">Here's some English text.</bdo> ... ... </body>
<div>
Type:
Container
Function:
Defines a section or division of a document that requires a special alignment.
Syntax:
<div> ... document content ... </div>
Attributes:
None.
NOTE
The ALIGN attribute of the HTML <DIV> tag does not have an equivalent under the Strict XHTML DTD. To do alignment within a <div> element, use the style attribute and specify alignment by using a Cascading Style Sheet instruction. You can use the align attribute of the <div> element with the Transitional and Frameset DTDs.
Example:
<div style="align: right"> Everything in this section is right-justified. Hard to read, isn't it? ... </div>
<hr />
Type:
Standalone
Function:
Places a horizontal line on the page (see Figure 3.9).
){kind=link}
Figure 3.9 Horizontal rules are a great way to break up a page and give the readers' eyes a rest.
Syntax:
<hr />
Attributes:
None.
NOTE
The ALIGN, WIDTH, NOSHADE, and SIZE attributes of the HTML <HR> tag do not have equivalents under the Strict XHTML DTD. To modify the appearance of horizontal rule, you should use the style attribute of the <hr /> element. You are free to use these attributes when writing to the Transitional and Frameset DTDs.
Example:
<hr style="width: 80%" />
<h1>—<h6>
Type:
Container
Function:
Establishes a hierarchy of document heading levels. Level 1 has the largest font size. Increasing through the levels causes the font size to decrease. All headings are rendered in boldface and have a little extra line spacing built in above and below them (see Figure 3.10).
){kind=link}
Figure 3.10 Headings are rendered in boldface and are usually in a type size different from the body text.
NOTE
Although the headings' elements are meant to be used in a strictly hierarchical fashion, many authors use them out of sequence to achieve the formatting effects they want.
Syntax:
<hn> ... Level n heading ... </hn>
where n = 1, 2, 3, 4, 5, or 6.
Attributes:
None.
NOTE
The XHTML heading elements do not take an align attribute like the corresponding HTML tags do. To align your XHTML headings, you can use the style attribute.
Example:
<h1 style="align: center">Table of Contents</h1> <h2>Chapter 1 - Introduction</h2> ... <h2>Chapter 2- Prior Research</h2> ...
<p>
Type:
Container
Function:
Denotes a paragraph.
Syntax:
<p> paragraph text </p>
Attributes:
None.
NOTE
XHTML does not support an align attribute for the <p> element. You should use the style attribute together with a style sheet instruction instead.
Example:
<p style="align: justify">For those of you who scorn ragged right margins.</p>
<pre>
Type:
Container
Function:
Denotes text to be treated as preformatted. Browsers render preformatted text in a fixed-width font. Whitespace characters, such as spaces, tabs, and carriage returns, found inside a <pre> element are not ignored. This makes preformatted text a viable option for presenting tables of information.
Syntax:
<pre> ... preformatted text goes here ... </pre>
Attributes:
The <pre> element's xml:space attribute indicates that whitespace should be preserved.
Example:
<pre> Catalog No. Item Price AZ-1390 Polo Shirt $29.99 FT-0081 Sweater $52.99 CL-9334 Belt $16.99 </pre>
<span>
Type:
Container
Function:
Generic container element for defining a document block. One popular use is for applying style information.
Syntax:
<span style="style information"> range of text over which style is to be applied </span>
Attributes:
If you're assigning style information, you can set the style attribute to a sequence of as many characteristic: value pairs as you need to specify the style information you're applying. Valid style characteristics are those put forward in the Cascading Style Sheets Level 2 specification.
Example:
<span style="font-weight: bold; color: red; text-indent: 0.25 in"> Here is some bold, red, text that's indented by one quarter of an inch. </span>