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 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:
<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>The URL for that page is <samp>http://www.cern.ch/ </samp></p>
<p>Type the following command: <kbd>find . -name "prune" -print</kbd></p>
<p><code>chown</code> <var>your_name for the_file </var></p>
<p>Styles that are named after how they are actually used are called <dfn>logical styles</dfn></p>
<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:
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>http://www.cern.ch/</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.
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:
HTML 3.2 defined several additional physical style tags, including the following:
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.