Chapter 41. Using Phrase Elements Properly

Phrase elements are a series of HTML tags for identifying the particular structure of a segment of text within a larger element such as a paragraph.

GEEKSPEAK

A phrase element is an HTML tag that defines the structure of a segment of text within a larger element such as a paragraph.

The phrase elements typically create special typographic effects like boldface and italics, so designers tend to use them for their results rather than for what they are supposed to represent. You read in Topic 40 an impassioned plea to return to more responsible coding practices, now that CSS is at least somewhat reliable much of the time in many browsers, and the same argument applies here. Mark up your HTML properly, with the right tags for the job. If you want extra typographical effects, or if you need different ones than the tags provide by default, create these effects yourself with CSS styles.

With that in mind, see Table 41.1 for a comprehensive list of phrase elements.

Table 41.1. HTML Phrase Elements

TAG	IDENTIFIES	TYPICALLY DISPLAYS AS	EXAMPLE
em	Emphasized text	Italic	<em>What</em> did you say?
strong	Really emphasized text	Boldface	You can't be <strong>serious!</strong>
cite	A citation; a reference or source	Italic	What's up, doc? <cite>-- Bugs Bunny</cite>
dfn	A term that is defined in the following text	Italic	A <dfn>tag</dfn> is an HTML markup element.
code	Computer code	Monospaced text	The <code>em</code> tag identifies emphasized text.
samp	Sample output froma computer program, function, etc.	Monospaced text	When this happens, the computer displays <samp>Error: Please Reboot.</samp>
kbd	Keys or text that the user presses or enters	Monospaced text	Press <kbd>Enter</kbd> to continue.
var	A variable in a computer program, equation, etc.	Italic	Check the value of <var>x</var> before you continue.
abbr	An abbreviation	Normal text[*]	Your site looks fantastic, but the <abbr title="World Wide Web Consortium">W3C</abbr> would not approve, as usual.
acronym	An acronym	Normal text	Send your complaints to <acronym title="National Aeronautics and Space Administration">NASA</acronym>.

^[*] In Netscape, an abbreviation displays with a dotted underline. When the visitor mouses over the term, a tip appears, giving the full-text equivalent from the title attribute. IE does not offer anything like this feature.

Most of the phrase elements are self-explanatory, but the abbreviation and acronym tags need further clarification.

First, a quick refresher. An abbreviation is a group of letters that stands for a word or a series of words. You pronounce each letter in some abbreviations separately, even if the abbreviation is pronounceable. A good example is the abbreviation UN, which stands for United Nations. When you see this abbreviation, you don't say "unn," but "you, enn."

You don't pronounce certain abbreviations at all, instead replacing them with the actual words that they represent. Consider the abbreviation for the state of California, CA. Typically, when you see this abbreviation, you just say "California" instead of "see, ay."

An acronym, by contrast, is an abbreviation that you pronounce as if it were a word. When you see the acronym NASA (National Aeronautics and Space Administration), you don't say "enn, ay, ess, ay," but "nassuh," and rarely do you substitute the agency's real name. You just pronounce the acronym and get on with your life.

GEEKSPEAK

An abbreviation is a group of letters that stands for a word or a series of words. An acronym is an abbreviation that you pronounce as if it were a word.

What difference does marking up acronyms and abbreviations make to most of your visitors? None whatsoever. As Table 41.1 shows, the abbr and acronym tags don't add special typographical formatting to the marked-up text (at least not in Internet Explorer, the most popular browser by far). Most people who come to your site will never know that you went to the trouble of typing National Aeronautics and Space Administration every time you used the acronym NASA. But those visitors who use screen readers and other accessibility aids will thank you profusely for your consideration.

FAQ

How can I contribute a new word to my native language?

Come up with a really successful acronym. Some acronyms work so well as words that they become actual words, especially acronyms that describe technical concepts that most people don't care to understand. Laser, radar, and scuba were all once acronyms.

Screen readers and the like are too dumb to realize when they are looking at an abbreviation or an acronym, so you must tell them by way of your markup. When a screen reader comes to a phrase marked up as an acronym, it knows that it should try to pronounce the text as a word. When the screen reader comes to an abbreviation, it knows to pronounce each letter separately or to substitute the full text, which appears in the title attribute of the tag.

You also improve the performance of your site in search engines when you mark up abbreviations and acronyms correctly and include the full text in the title attribute. Some search engines catalog your page according to the words in the title attribute and the abbreviation or acronym itself, so your site appears to people who search for HTML as well as Hypertext Markup Language.