Chapter 2

Fine-tuning Your Text

What You Will Learn in This Chapter

• Fine-tuning your text with markup that defines importance and emphasis
• Marking up text that describes the time, abbreviations, code, and more

Wrox.com Code Downloads for this Chapter

You can find the wrox.com code downloads for this chapter at www.wrox.com/remtitle.cgi?isbn=9781118340189 on the Download Code tab. The code is in the Chapter 2 download and individually named according to the names throughout the chapter.

Beyond the basic structural elements outlined so far, you can use a wide range of elements to mark up your text. The following chapter introduces these elements. After working through it, you’ll have all the elements you might need to mark up almost any kind of content you can dream up.

Elements That Describe Text-Level Semantics

This section introduces a number of elements, which will help you more precisely describe text. Starting with elements that help you describe the importance or emphasis of text and working through elements that describe structured data such as time or represent programmatic code, this chapter adds a much richer set of tools to mark up your web pages.

The <span> Element

The <span> element is a close cousin to the <div>. It’s a generic element with no semantic value that you can use to group inline elements. So, if you have a part of a sentence or paragraph you want to group, you can use the <span> element. Here you can see a <span> element added to indicate which content refers to an inventor. It contains both a strong element and some text.

<span class="inventor"><strong>1</strong> The World Wide Web was invented by Tim Berners-Lee</span>

<strong>2</strong> The W3C is the World Wide Web Consortium which maintains many Web standards

On its own, this would have no effect on how the document looks visually, but it does add extra meaning to the markup, which now groups the related elements. It’s particularly helpful to attach special styles to these elements using CSS rules.

The <em> Element

The content of an <em> element is intended to be a point of emphasis in your document, and it usually displays in italicized text. The kind of emphasis intended is on words such as “must” in the following sentence:

You <em>must</em> remember to close elements in HTML.

You should use this element only when you want to add emphasis to a word, not just because you want to make the text appear italicized. If you just want italic text for stylistic reasons—without adding emphasis—you can either use the <i> element or preferably use CSS.

The <strong> Element

The <strong> element is intended to show strong emphasis for its content—stronger emphasis than the <em> element. As with the <em> element, you should use the <strong> element only when you want to add strong emphasis to part of a document. Most visual browsers display the strong emphasis in a bold font.

<em>Always</em> look at burning magnesium through protective colored glass as it <strong>can cause blindness</strong>.

Figure 2-1 shows how the <em> and <strong> elements are rendered in Firefox (ch02_eg01.html).

You need to remember that how the elements are presented (italics or bold) is largely irrelevant. You should use these elements to add emphasis to phrases and therefore give your documents greater meaning, rather than to control how they appear visually. As you can see in Chapter 7, it is quite simple with CSS to change the visual presentation of these elements—for example, to highlight any words inside an <em> element with a yellow background and make them bold rather than italic.

Figure 2-1

The <b> Element

Anything that appears in a <b> element displays in bold, like the word “bold” here:

For those interested in typography, it is worth noting that this does not necessarily mean the browser will use a boldface version of a font. Some browsers use an algorithm to take a normal version of a font and make the lines thicker (giving it the appearance of being bold).

The <i> Element

The content of an <i> element displays in italicized text, like the word “italic” here:

This does not necessarily mean the browser looks for an oblique or italicized version of the font. Most browsers use an algorithm to put the lines on a slant to simulate an italic font.

<strong> versus <b> and <em> versus <i>

You probably wonder why elements present the same way when shown in a browser and which one you should use. <strong> and <em> are generally recommended over <b> and <i>because the strength and emphasis aren’t necessarily tied to typographic conventions. This means they can more sensibly be used in a screen reader or other implementation not dependent on a certain type style.

The <small> Element

The <small> element is used for “fine print.” Disclaimers, caveats, and copyrights are typical usages of the <small> element.

The <cite> Element

If you quote a text, you can indicate the source by placing it between an opening <cite> tag and a closing </cite> tag. As you would expect in a print publication, the content of the <cite> element renders in italicized text by default (ch02_eg02.html).

If you reference an online resource, you should place your <cite> element inside an <a> element, which, as you see in Chapter 3, creates a link to the relevant document.

There are several applications that potentially could make use of the <cite> element. For example, a search application could use <cite> tags to find documents that reference certain works. Or a browser could collect the content of <cite> elements to generate a bibliography for any given document; although, at the moment it is not widely enough used for either feature to exist.

The <q> Element

Use the <q> element when you want to add a quote within a sentence, rather than as an indented block on its own (ch02_eg03.html):

As Dylan Thomas said, <q>Somebody's boring me. I think it's me</q>.

The HTML recommendation says that the text enclosed in a <q> element should begin and end in double quotes. Firefox inserts these quotation marks for you, but IE8 was the first version of Internet Explorer to support the <q> element. So, if you want your quote to be surrounded by quotation marks, be warned that IE7 and earlier versions of IE do not display them. If you still need to support IE7 and older, you can use CSS to fix this issue, so all is not lost.

The <q> element can also carry the cite attribute. The value should be a URL pointing to the source of the quote.

The <dfn> Element

The <dfn> element enables you to specify that you are introducing a special term. Its use is similar to the italicized notes in this book used to introduce important new concepts.

Typically, use the <dfn> element the first time you introduce a key term and only in that instance. Most recent browsers render the content of a <dfn> element in an italic font.

For example, you can indicate that the term “HTML” in the following sentence is important and should be marked as such:

Figure 2-2 shows the use of the <dfn> element (ch02_eg04.html).

Figure 2-2

The <abbr> Element

You can indicate when you use an abbreviated form or acronym by placing the abbreviation between opening <abbr> and closing </abbr> tags.

When possible, consider using a title attribute whose value is the full version of the abbreviations. For example, if you want to indicate that HTML is an acronym for HyperText Markup Language, you can use the <abbr> element like so:

If you abbreviate a foreign word, you can also use the lang attribute to indicate the language used.

The <time> Element

You can...