Use Text Elements to Describe Text

Text elements derive their names from the intended function or purpose of the text. For example, the element stands for strongly emphasized text. Generally, browsers will display text with a bold typeface, indicating that it is strongly emphasized.

Identify Text with Text Elements

As you will see, each of the following elements not only displays text, but also says something about the text it contains:

</em> The emphasis element is an element used for emphasizing important portions of a document. It generally displays italicized text.
<strong> </strong> The strong element indicates stronger emphasis than does and usually displays as bold text.
<kbd> </kbd> Standing for keyboard, this element identifies its contents as user input through a keyboard. Generally, it displays as a monospaced font. Some browsers also might display it as bold.
<cite> </cite> The citation element identifies a portion of your document as a reference to an outside source.
<var> </var> This element indicates a variable, as might be used in computer code.
<dfn> </dfn> The <dfn> element identifies a portion of text as a defining instance of a term. It also generally displays in italic.
<code> </code> This element not only displays in a courier, fixed-width font, but also indicates that the text is a portion of computer code.
<samp> </samp> The <samp> element identifies its contents as sample output, for example, from a computer program, most often rendering text in a monospaced font.
<abbr> </abbr> Identifies an abbreviation; for example, TX instead of Texas.
<acronym> </acronym> This element identifies text as an acronym, such as S.C.U.B.A. or N.A.S.A.
<address> </address> You would use this element to set apart your address or personal information at the bottom of a Web page. The <address> element also adds a line break before and after the address.

To see each of these elements in action, copy the code listing that follows and save it as text.htm. To save time, open template.htm and save it as text.htm. Then just add the lines in between the <body> </body> portion of the code to get the results shown in the following illustration:

<html>      <head>           <title>Using Text Elements</title>      </head>      <body>           The <em>Emphasis element</em><br />           The <strong>Strong element</strong><br />           The <kbd>Keyboard element</kbd><br />           The <cite>Citation element</cite><br />           The <var>Variable element</var><br />           The <dfn>Definition element</dfn><br />           The <code>Code element</code><br />           The<samp>Sample output element</samp><br />           The <acronym>Acronym element</acronym><br />           The <address>Address element</address><br />      </body> </html>

click to expand

Shortcut

The line break element at the end of each line in the preceding code causes the browser to create a new line of text.

Why are there so many different ways to describe text? Because HTML is not primarily concerned with what someone sees when they view a Web page. Hypertext Markup Language is aimed at defining the content of a document, not its appearance. Do you need to use all of these different elements in your Web pages? Not necessarily, but keep in mind that the World Wide Web didn’t get that name for nothing. As your knowledge of HTML and XHTML grows and you become more concerned with making your pages accessible to as many people as possible, you will develop an appreciation for these elements.

Add Superscripts and Subscripts with and

The superscript and subscript elements are reflective of the need to add footnotes for sources as well as the need to be able to write chemical formulas. They are also useful tools for the Web page author. Perhaps you’ll need to document a source on your Web site by inserting a footnote reference at the end of a quotation. For this, you’ll use the element. Or perhaps you’re a science nut and want to describe the molecular structure of water or carbon dioxide. Then you can create a subscript with the element.

<sup> </sup> This element creates a superscript.
<sub> </sub> This element forces text to display as a subscript.

To see these elements in action, use your template to create a new document, saving it as sup.htm. Then insert the following line in between the <body> </body> tags. It will create a line with both superscripts and subscripts, as in the following illustration:

<html>      <head>           <title>Superscript and Subscript</title>      </head>      <body>      The <sup>superscript</sup> and <sub>subscript</sub> elements raise and lower text.      </body> </html>

click to expand

Identify Deleted and Inserted Text with <del> and <ins>

Perhaps no elements better illustrate HTML’s document-oriented roots than the <del> and <ins> elements. In the process of editing and rewriting manuscripts, deleted text is displayed with a line through the middle (strikethrough), and newly added text is displayed as underlined. That way, the writers and editors of a document can clearly discern the changes that are being made. HTML’s <del> and <ins> perform the same function, causing text to display as strikethrough or as underlined.

<del> </del> The deleted text element indicates (by a strikethrough) that the text has been deleted but left in the page.
<ins> </ins> The inserted text element is a logical element that indicates new text has been inserted since the document was written.

Create an HTML file like the one that follows and save it as del.htm. Then display it in your browser to see the <del> and <ins> elements in action. Your page should resemble the following illustration:

 <html>      <head>           <title>Deleted and Inserted Text</title>      </head>      <body> To identify text as <del>deleted</del> or <ins>inserted</ins> use the deleted and inserted text elements.      </body> </html>

click to expand

Retain Text Formatting with <pre>

If you try converting large blocks of text from a word processor into HTML, you will notice that all formatting, spacing, line, and paragraph divisions are lost in the process of conversion. As you’ll learn in the next chapter, style sheets will enable you to re-create that formatting. However, HTML does provide an element that preserves line breaks, spacing, and white space. Using the preformatted text element, <pre>, you can instruct a browser to display your text exactly as you enter it. Simply enclose the text between the <pre> </pre> tags, and the browser will leave it as is. The downside of this element is that the browser will also display the text in a typewriter-style or monospaced font. However, in the next chapter you’ll learn how to use style sheets to override this and instruct the browser to use a different font.

To see how <pre> works, create and save a page, naming it pre.htm. Then type in the following code. As you can see in the illustration that follows, the browser retains whatever spacing you gave the characters:

<html>      <head>           <title>Preformatted Text</title>      <head>      <body>    <pre>This is a sample of preformatted text: Thirty days hath September,      April, June, and November.           All the rest have thirty one, Save February and it has twenty eight.</pre>      </body> </html>

click to expand

The text elements give you limited influence over how your text is displayed. In the next chapter you will expand that influence. But before moving into that arena, it will be helpful for you to learn a simple way to structure the information you put on your Web pages.

Identify Text with Text Elements

Add Superscripts and Subscripts with <sup> and <sub>

Identify Deleted and Inserted Text with <del> and <ins>

Retain Text Formatting with <pre>