Section 10.3. Inline Elements | Web Design in a Nutshell: A Desktop Quick Reference (In a Nutshell (OReilly))

10.3. Inline Elements

Most text elements are inline elements (spans of characters within the flow of text). Inline elements by default do not add line breaks or extra space.

This section introduces the semantic text elements that describe the enclosed text's meaning, context, or usage. These elements leave the specific rendering of the element to style sheets, either the author's or the browser's default rendering. There are other inline elements in the XHTML specification that are concerned with presentation (for example, the b element for bold text). They are briefly discussed at the end this chapter.

10.3.1. Phrase Elements

HTML 4.01 and XHTML 1.0 and 1.1 define a collection of phrase elements (also called logical elements) for adding structure and meaning to inline text. Because phrase elements share syntax and attributes, they are aggregated into one element listing here.

abbr, acronym, cite, code, dfn, em, kbd, samp, strong, var

     <abbr>...</abbr>, <acronym>...</acronym>, etc.

Attributes

Core (id, class, style, title), Internationalization, Events

Phrase elements may contain other inline elements. The meaning and use of each element is listed here. When elements have a standardized presentation in browsers (for example, em elements universally display in an italic font), it is also noted. Authors are reminded, however, to choose elements based on meaning, not a desired rendering effect.

em: Indicates emphasized text. em elements are nearly always rendered in italics.
strong: Denotes strongly emphasized text. Strong elements are nearly always rendered in bold text.
abbr: Indicates an abbreviated form.
acronym: Indicates an acronym.
cite: Denotes a citation: a reference to another document, especially books, magazines, articles, and so on. cites are commonly rendered in italics.
dfn: Indicates the defining instance or first occurrence of the enclosed term. It can be used to call attention to the introduction of special terms and phrases. Defining terms are often rendered in italics.
code: Denotes a program code sample. By default, code is rendered in the browser's specified fixed-width font (usually Courier).
kbd: Stands for "keyboard" and indicates text entered by the user. It may be useful for technical documents. Keyboard text is typically rendered in a fixed-width font.
samp: Indicates sample output from programs, scripts, etc. It may be useful for technical documents. Sample text is usually rendered in a fixed-width font by default.
var: Indicates the instance of a variable or program argument. This is another element that will be most useful for technical documents. Variables usually render in italics.

10.3.1.1. Indicating emphasis

The em and strong elements are used for indicating emphasis and even stronger emphasis, as demonstrated in this example.

     <p>We <em>really</em> need to leave <strong>right now</strong>!</p>

Although emphasized text renders reliably in italics, it is not always an appropriate substitute for the i element. For example, if you want to italicize the title of a book, the cite element is the better choice. If there is no good match, create your own meaningful element using a generic span element and apply italics with the font-style style property. To use another example, it is a convention to display words from another language in italics, but that doesn't necessarily mean that those words are emphasized.

A good rule of thumb is to consider how your document would sound if it were read aloud (as it might be). Do you want the italic words to be read louder or at a different pitch from the rest of the sentence? If the answer is no, then it is probably best to find an alternative to em. The same logic applies to the strong element.

10.3.1.2. Acronyms and abbreviations

The abbr element indicates that text is an abbreviation: a shortened form of a word ending in a period, such as Mass., Inc., or etc. Acronyms (indicated with the acronym element) are abbreviations formed from the initial letters or groups of letters of words in a phrase, such as WWW and USA. An acronym may be pronounced as a word (NATO) or letter by letter (FBI).

The title attribute may be added to either element to provide the full name or longer form. The value of the title attribute may be displayed as a "tool tip" by visual browsers, or read aloud by a speech device.

     <acronym title="National Aeronautics and Space Administration">NASA        </acronym>     <abbr title="Tablespoons">Tbs.</abbr>

Marking up shorthand terms such as abbreviations and acronyms provides useful information on how they should be interpreted by user agents such as spellcheckers, aural devices, and search-engine indexers. It also improves the accessibility of the content.

The CSS 2.1 specification provides the informative speak aural property that allows authors to specify whether an acronym should be read as a word or spoken letter by letter, as shown here:

     acronym#FBI {speak: spell-out;}

The speak property is documented in Appendix B.

10.3.2. Short Quotations

HTML 4 introduced the q element for indicating short inline quotations, such as "To be, or not to be." Longer quotations should use the blockquote element listed earlier.

     <q>...</q>

Attributes

Core (id, class, style, title), Internationalization, Events

cite="url"

The HTML Recommendation suggests that user agents should automatically insert quotation marks before and after q elements, therefore, authors are advised to omit them in the source. As of this writing, Internet Explorer 5 for Macintosh, Netscape 6, and Opera do insert generic double quotation marks, but Internet Explorer 6 for Windows does not.

     As mother always said, <q>a guest is no one to criticize.</q>

Ideally, when used with the lang (language) attribute, the browser may insert language-specific quotation marks. Contextual quotation marks will be better handled with CSS-based generated text, as described in Chapter 23, once browser support improves.

The cite attribute is intended to provide a link to additional information about the source of the quote, but it is not well supported as of this writing. Netscape 6.1 makes the cite link available in a contextual menu accessed by right-clicking the quotation.