Home > Articles

  • Print
  • + Share This

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

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

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

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

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

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.

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

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

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

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

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>
  • + Share This
  • 🔖 Save To Your Account

InformIT Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from InformIT and its family of brands. I can unsubscribe at any time.

Overview


Pearson Education, Inc., 221 River Street, Hoboken, New Jersey 07030, (Pearson) presents this site to provide information about products and services that can be purchased through this site.

This privacy notice provides an overview of our commitment to privacy and describes how we collect, protect, use and share personal information collected through this site. Please note that other Pearson websites and online products and services have their own separate privacy policies.

Collection and Use of Information


To conduct business and deliver products and services, Pearson collects and uses personal information in several ways in connection with this site, including:

Questions and Inquiries

For inquiries and questions, we collect the inquiry or question, together with name, contact details (email address, phone number and mailing address) and any other additional information voluntarily submitted to us through a Contact Us form or an email. We use this information to address the inquiry and respond to the question.

Online Store

For orders and purchases placed through our online store on this site, we collect order details, name, institution name and address (if applicable), email address, phone number, shipping and billing addresses, credit/debit card information, shipping options and any instructions. We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes.

Surveys

Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites. Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites, develop new products and services, conduct educational research and for other purposes specified in the survey.

Contests and Drawings

Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing. Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.

Newsletters

If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email information@informit.com.

Service Announcements

On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. Generally, users may not opt-out of these communications, though they can deactivate their account information. However, these communications are not promotional in nature.

Customer Service

We communicate with users on a regular basis to provide requested services and in regard to issues relating to their account we reply via email or phone in accordance with the users' wishes when a user submits their information through our Contact Us form.

Other Collection and Use of Information


Application and System Logs

Pearson automatically collects log data to help ensure the delivery, availability and security of this site. Log data may include technical information about how a user or visitor connected to this site, such as browser type, type of computer/device, operating system, internet service provider and IP address. We use this information for support purposes and to monitor the health of the site, identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents and appropriately scale computing resources.

Web Analytics

Pearson may use third party web trend analytical services, including Google Analytics, to collect visitor information, such as IP addresses, browser types, referring pages, pages visited and time spent on a particular site. While these analytical services collect and report information on an anonymous basis, they may use cookies to gather web trend information. The information gathered may enable Pearson (but not the third party web trend services) to link information with application and system log data. Pearson uses this information for system administration and to identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents, appropriately scale computing resources and otherwise support and deliver this site and its services.

Cookies and Related Technologies

This site uses cookies and similar technologies to personalize content, measure traffic patterns, control security, track use and access of information on this site, and provide interest-based messages and advertising. Users can manage and block the use of cookies through their browser. Disabling or blocking certain cookies may limit the functionality of this site.

Do Not Track

This site currently does not respond to Do Not Track signals.

Security


Pearson uses appropriate physical, administrative and technical security measures to protect personal information from unauthorized access, use and disclosure.

Children


This site is not directed to children under the age of 13.

Marketing


Pearson may send or direct marketing communications to users, provided that

  • Pearson will not use personal information collected or processed as a K-12 school service provider for the purpose of directed or targeted advertising.
  • Such marketing is consistent with applicable law and Pearson's legal obligations.
  • Pearson will not knowingly direct or send marketing communications to an individual who has expressed a preference not to receive marketing.
  • Where required by applicable law, express or implied consent to marketing exists and has not been withdrawn.

Pearson may provide personal information to a third party service provider on a restricted basis to provide marketing solely on behalf of Pearson or an affiliate or customer for whom Pearson is a service provider. Marketing preferences may be changed at any time.

Correcting/Updating Personal Information


If a user's personally identifiable information changes (such as your postal address or email address), we provide a way to correct or update that user's personal data provided to us. This can be done on the Account page. If a user no longer desires our service and desires to delete his or her account, please contact us at customer-service@informit.com and we will process the deletion of a user's account.

Choice/Opt-out


Users can always make an informed choice as to whether they should proceed with certain services offered by InformIT. If you choose to remove yourself from our mailing list(s) simply visit the following page and uncheck any communication you no longer want to receive: www.informit.com/u.aspx.

Sale of Personal Information


Pearson does not rent or sell personal information in exchange for any payment of money.

While Pearson does not sell personal information, as defined in Nevada law, Nevada residents may email a request for no sale of their personal information to NevadaDesignatedRequest@pearson.com.

Supplemental Privacy Statement for California Residents


California residents should read our Supplemental privacy statement for California residents in conjunction with this Privacy Notice. The Supplemental privacy statement for California residents explains Pearson's commitment to comply with California law and applies to personal information of California residents collected in connection with this site and the Services.

Sharing and Disclosure


Pearson may disclose personal information, as follows:

  • As required by law.
  • With the consent of the individual (or their parent, if the individual is a minor)
  • In response to a subpoena, court order or legal process, to the extent permitted or required by law
  • To protect the security and safety of individuals, data, assets and systems, consistent with applicable law
  • In connection the sale, joint venture or other transfer of some or all of its company or assets, subject to the provisions of this Privacy Notice
  • To investigate or address actual or suspected fraud or other illegal activities
  • To exercise its legal rights, including enforcement of the Terms of Use for this site or another contract
  • To affiliated Pearson companies and other companies and organizations who perform work for Pearson and are obligated to protect the privacy of personal information consistent with this Privacy Notice
  • To a school, organization, company or government agency, where Pearson collects or processes the personal information in a school setting or on behalf of such organization, company or government agency.

Links


This web site contains links to other sites. Please be aware that we are not responsible for the privacy practices of such other sites. We encourage our users to be aware when they leave our site and to read the privacy statements of each and every web site that collects Personal Information. This privacy statement applies solely to information collected by this web site.

Requests and Contact


Please contact us about this Privacy Notice or if you have any requests or questions relating to the privacy of your personal information.

Changes to this Privacy Notice


We may revise this Privacy Notice through an updated posting. We will identify the effective date of the revision in the posting. Often, updates are made to provide greater clarity or to comply with changes in regulatory requirements. If the updates involve material changes to the collection, protection, use or disclosure of Personal Information, Pearson will provide notice of the change through a conspicuous notice on this site or other appropriate way. Continued use of the site after the effective date of a posted revision evidences acceptance. Please contact us if you have questions or concerns about the Privacy Notice or any objection to any revisions.

Last Update: November 17, 2020