CPSCI 105: Explorations in Computer Science

Phrase Elements

In earlier versions of HTML (i.e., <4.0) these were called information type elements, the idea being that they can be used to describe the type of information conveyed by their contents.

These elements appear in section 9.2.1 of the HTML 4.01 Specification.

In the list below, examples of HTML code appear in buff-colored boxes while the results of this code when rendered by the browser appear in blue-colored boxes.

Examples

<em>

Provides emphasis to a phrase.

I wish to emphasize that <em>you should avoid using the &lt;i&gt; tag</em> when marking up documents for the web.

I wish to emphasize that you should avoid using the <i> tag when marking up documents for the web.

<strong>

Provides strong emphasis to a phrase.

I wish to emphasize in the strongest possible terms that <strong>you should avoid using the &lt;b&gt; tag</strong> when marking up documents for the web.

I wish to emphasize in the strongest possible terms that you should avoid using the <b> tag when marking up documents for the web.

<cite>

Contains a citation or reference to another source.

We are reading <cite>The Two-in-One</cite> in this course.

We are reading The Two-in-One in this course.

<abbr>

Indicates an abbreviation. The full text of what's abbreviated is included as the value of the tag's title attribute. (In most browsers—but not IE before version 7—the value of the title attribute is displayed as tool-tip text when the mouse cursor is halted above the content of this tag.)

It's fun and profitable to learn <abbr title="HyperText Markup Language">HTML</abbr>.

It's fun and profitable to learn HTML.

<acronym>

Like <abbr>, but is used to mark up an acronym, i.e., a linguistic unit that's formed by pronouncing the letters of the abbreviation as if it were a word. The full text of the acronym is included as the value of the tag's title attribute. (All modern browsers—even IE—implement this one.)

The Secretary of State met with the <acronym title="North Atlantic Treaty Organization">NATO</acronym> cyberterrorism working group.

The Secretary of State met with the NATO cyberterrorism working group.

<dfn>

Indicates the defining instance of a term. The term defined is the contents of the tag; the definition should occur in the same sentence in which the tag occurs.

This is a poorly designed tag for automatic information retrieval—it would make a lot more sense for the definition to be the contents of this element, and the term defined to be an attribute of the tag, along the lines of how the abbreviation and acronym elements are handled. Its primary use is to apply style to its contents so that the defined term stands out on a page.

According to the specification, a <dfn>phrase element</dfn> is an HTML construct that adds structural information to text fragments.

According to the specification, a phrase element is an HTML construct that adds structural information to text fragments.

<code>

Its contents should be a fragment of computer code.

Here's a common technique for exchanging the value
of two variables:
<code>
if (a != b) {
   temp = a;
   a = b;
   b = temp;
}
</code>

Here's a common technique for exchanging the value of two variables: if (a != b) { temp = a; a = b; b = temp; }

The <code> tag doesn't respect white space. This is a problem since modern coding practices utilize indentation and white space to enhance readability. Thus most people use the <pre> tag to enclose computer code. This, however, discards the information that the contents of the <pre> is computer code.

There's a way to get around this using stylesheets: you can define code { white‑space: pre } using CSS. Unfortunately, most contemporary browsers ignore this. So the quick fix (technically called a “kludge”) is to use <code> to preserve the information type and wrap it in a <pre> to get the desired formatting. Here's an example:

Here's a common technique for exchanging the value
of two variables:
<pre><code>if (a != b) {
   temp = a;
   a = b;
   b = temp;
}</code></pre>

Here's a common technique for exchanging the value of two variables:

if (a != b) {
   temp = a;
   a = b;
   b = temp;
}

<samp>

Marks up sample output from programs, scripts, etc.

After bash has loaded, it will respond with a prompt: <samp> [nestudent@warp&nbsp;nestudent]$ </samp>

After bash has loaded, it will respond with a prompt: [nestudent@warp nestudent]$

<kbd>

Indicates text to be entered by the user.

In order to see the permissions on your files, type <kbd>ls -l</kbd> at the bash prompt.

In order to see the permissions on your files, type ls -l at the bash prompt.

<var>

Used to mark up a variable or program argument.

Let <var>G</var> be a group.

Let G be a group.

<q>

Indicates a quotation. But don't we have quotation marks for that? Yes. But using a <q> tag allows you to say where the quote came from by using the cite attribute of the tag to supply a URI.

You can also specify the language of the quote—and you can use CSS to control what characters are placed around the text; you can even set it up so that the different symbols for nested quotes occur in the correct order (e.g., "He said, 'she sells C shells by the sea shore.'").

Well, in theory you can do this. By default, use of an unmodified <q> should give you plain old "straight quotes", but IE doesn't even do that. The Mozilla family handles the default <q> correctly, but whether it nests them properly or not depends upon the version of the browser. (Firefox version 1.5 does nest the quotes correctly, though earlier versions didn't.) You can try the examples below on other browsers to see what happens.

This example assumes that you have the following CSS styles defined (consult section 12.4 of the CSS2 specification):

q:lang(en) { quotes: "\201C" "\201D" "\2018" "\2019"}
q:lang(fr) { quotes: "\AB\2009" "\2009\BB" "\2039" "\203A" }
q:before { content: open-quote }
q:after { content: close-quote }

As Casey Stengel tells it, <q>Well, Yogi Berra once said to me, <q>When you come to a fork in the road, take it</q>.</q> Comme raconte Casey Stengel, <q lang="fr" xml:lang="fr">Mais, Yogi Berra me dit un fois, <q lang="fr" xml:lang="fr">Quand on arrive &agrave; une fourche &hellip;</q>.</q>

As Casey Stengel tells it, Well, Yogi Berra once said to me, When you come to a fork in the road, take it. Comme raconte Casey Stengel, Mais, Yogi Berra me dit un fois, Quand on arrive à une fourche ….

A final note …

The examples displayed above are styled according to the browser default (of whatever browser you're reading this in). But remember that the main point of HTML markup is to capture to the greatest extent possible the logical structure of your document. You can always apply your own custom styles to these elements to make them look (or sound) however you like. So if you'd prefer the <dfn> element to appear as bold italics, don't mark up its content as <em><strong>the content</strong></em>—use the <dfn> tag and use CSS to define it to display as bold italics.

[ Return to the CPSCI 105-01 homepage ]