Character-Level Elements

When you use HTML tags for paragraphs, headings, or lists, those tags affect that block of text as a wholechanging the font, changing the spacing above and below the line, or adding characters (in the case of bulleted lists). They're referred to as block-level elements.

Character-level elements are tags that affect words or characters within other HTML entities and change the appearance of that text so that it's somehow different from the surrounding textmaking it bold or underlined, for example.

To change the appearance of a set of characters within text, you can use one of two kinds of tags: logical styles or physical styles.

Logical Styles

Logical style tags describe the meaning of the text within the tag, not how it should be presented. They're similar to the common element tags for paragraphs or headings. For example, logical style tags might indicate a definition, a snippet of code, or an emphasized word. This can be a bit confusing because there are de facto standards that correlate each of these tags with a certain visual style. In other words, even though a tag like <strong> would mean different things to different people, in web browsers it means boldface.

Using logical style tags, the browser determines the actual presentation of the text, whether it's bold, italic, or any other change in appearance. You cannot guarantee that text that's highlighted using these tags will always be bold or italic, so you shouldn't depend on it. These days, browser makers have pretty much agreed on how each of these logical tags are rendered, but it's still important to understand that the logical tags convey more meaning than just the physical styles that they apply.

Each character style tag has both opening and closing sides and affects the text within those two tags. The following are the eight logical style tags:


This tag indicates that the characters are to be emphasized in some way; that is, they're formatted differently from the rest of the text. In graphical browsers, typically <em> italicizes the text. For example:

<p>The anteater is the <em>strangest</em> looking animal, isn't it?</p>


With this tag, the characters are to be more strongly emphasized than with <em>usually in boldface. Consider the following:

<p>Take a <strong>left turn</strong> at <strong>Dee's Hop Stop</strong></p>


This tag indicates that the text inside is a code sample and displays it in a fixed-width font such as Courier. For example:

<p><code>#include "trans.h"</code></p>


This tag indicates sample text and is generally presented in a fixed-width font, like <code>. An example of its usage follows:

<p>The URL for that page is <samp> </samp></p>


This tag indicates text that's intended to be typed by a user. It's also presented in a fixed-width font. Consider the following:

<p>Type the following command: <kbd>find . -name "prune" -print</kbd></p>


This tag indicates the name of a variable, or some entity to be replaced with an actual value. Often it's displayed as italic or underline, and is used as follows:

<p><code>chown</code> <var>your_name for the_file </var></p>


This tag indicates a definition. <dfn> is used to highlight a word (usually in italics) that will be defined or has just been defined, as in the following example:

<p>Styles that are named after how they are actually used are called <dfn>logical styles</dfn></p>


This tag indicates a short quote or citation, as in the following:

<p>Eggplant has been known to cause nausea in some people<cite> (Lemay, 1994)</cite></p>


Of the tags in this list, all except <dfn> are part of the official HTML 2.0 recommendation. <dfn> was added in the HTML 3.2 recommendation. They're all still valid in the XHTML 1.0 recommendation.

HTML 4.01 introduced two additional logical style tags that are most useful for audio browsers. A graphical browser, such as Netscape or Internet Explorer, won't display them any differently. When an audio browser reads content included within one of these tags, however, each letter is spoken individually. For example, fox is pronounced F-O-X rather than fox.

These tags also use opening and closing sides and affect the text within. The following are new tags:


This tag indicates the abbreviation of a word, as in the following:

<p>Use the standard two-letter state abbreviation (such as <abbr>CA</abbr> for California)</p>


Similar to the <abbr> tag, <acronym> designates a word formed by combining the initial letters of several words, as in the following example:

[View full width]

<p>Jonathan learned his great problem-handling skills from <acronym>STEPS</acronym> (Simply Tackle Each Problem Seriously)</p>

Got all these tags memorized now? Good! There will be a pop quiz at the end of the day. The following code snippets demonstrate each of the logical style tags, and Figure 6.1 illustrates how all the tags are displayed.


<p>The anteater is the <em>strangest</em> looking animal, isn't it?</p> <p>Take a <strong>left turn</strong> at <strong>Dee's Hop Stop </strong></p> <p><code>#include "trans.h"</code></p> <p>The URL for that page is <samp></samp></p> <p>Type the following command: <kbd>find . -name "prune" -print</kbd></p> <p><code>chown </code><var>your_name the_file</var></p> <p>Styles that are named after how they are used are called <dfn>logical styles</dfn></p> <p>Eggplant has been known to cause nausea in some people<cite> (Lemay, 1994)</cite></p> <p>Use the standard two-letter state abbreviation (such as <abbr>CA</abbr> for California)</p> <p>Jonathan learned his great problem-handling skills from <acronym>STEPS</acronym> (Simply Tackle Each Problem Seriously)


Figure 6.1. Various logical styles displayed in a browser.

Physical Styles

In addition to these style tags, you can use a set of physical style tags to change the actual presentation style of the textbold, italic, or monospace.

Like the character style tags, each formatting tag has a beginning and ending tag. Standard HTML 2.0 defined three physical style tags:






Monospaced typewriter font

HTML 3.2 defined several additional physical style tags, including the following:


Underline (deprecated in HTML 4.0)


Strikethrough (deprecated in HTML 4.0)


Bigger print than the surrounding text


Smaller print






Text-based browsers, such as Lynx and those associated with wireless devices, can't render bold, italic, or other styled text. They generally highlight the text in some way, but the method varies depending on the browser and platform.

You can nest character tagsfor example, using both bold and italic for a set of charactersas follows:

<b><i>Text that is both bold and italic</i></b>

However, the result on the screen is browser-dependent, like all HTML tags. You won't necessarily end up with text that's both bold and italic. You might end up with one style or the other:


<p>In Dante's <i>Inferno</i>, malaboge was the eighth circle of hell, and held the malicious and fraudulent.</p> <p>All entries must be received by <b>September 26, 1999</b>.</p> <p>Type <tt>lpr -Pbirch myfile.txt</tt> to print that file.</p> <p>Sign your name in the spot marked <u>Sign Here</u>:</p> <p>People who wear orange shirts and plaid pants <s>have no taste</s> are fashion-challenged.</p> <p>RCP floor mats give you <big>big</big> savings over the competition!</p> <p>Then, from the corner of the room, he heard a <small>tiny voice </small>.</p> <p>In heavy trading today. Consolidated Orange Trucking rose <sup>1</sup>/<sub>4</sub> points on volume of 1,457,900 shares.</p>

Figure 6.2 shows some of the physical tags and how they appear.


Figure 6.2. Physical styles displayed in a browser.

Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day
Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition)
ISBN: 0672328860
EAN: 2147483647
Year: 2007
Pages: 305

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: