Learn Scripting Languages from the Master!
PrintWorking with character tags
A tag that is applied to an individual character is known as a character tag. A character tag can be grouped into two categories: physical and logical. (Note: physical styles are associated with physical character tags; logical styles are associated with logical character tags.)
As you work with these tags to style your text in different ways, you will discover that there is not really big difference how the text is displayed on a browser. For instance, you can italicize your text using the <i> tag (a physical character tag) or <em> tag (a logical character tag). Why does that make any difference? It depends on whether you are using italics for the sake of using italics or whether you are using italics to convey some special meaning. While a physical character tag controls how to format the text, a logical character tag describes how the text is being used, without regard to how it should be formatted. Thus a logical style would be used to convey some meaning while a physical style would not.
Physical styles
As mentioned above, a physical character tag controls how the characters are formatted. For instance, you might display some characters as bold or italic. Listing 1 displays some common physical character tags.
| Listing 1 common physical character tags | ||
|---|---|---|
| Tag | Description | Renders as |
<b>
|
bold | displays text as bold |
<big>
|
big | displays text in a big font |
<i>
|
italics | displays text as italic |
<s> or <strike> *
|
strike | displays text with a line through it |
<small>
|
small | displays text in a small font |
<sub>
|
subscript | displays the text as subscript — text that displays below the baseline of the text |
<sup>
|
superscript | displays the text as superscript — text that has baseline above the baseline of the rest of the text |
<tt>
|
teletype | displays the text with fixed-width font |
<u>
|
underline | underlines the text |
|
* Both <s> and <strike> tags are deprecated in HTML 4.0 so instead use the <del> tag.
|
||
Listing 2 displays some examples of the common physical character tags.
| Listing 2 examples of common physical character tags | |
|---|---|
| HTML code | Output |
This is <b>bold</b>
|
This is bold |
This is <big>big font</big>
|
This is big font |
This is <i>italic</i>
|
This is italic |
Was <s>$50</s>; now $40
|
Was |
This is <small>small</small>
|
This is small |
H<sub>2</sub>O
|
H2O |
May 5<sup>th</sup> 2005
|
May 5th 2005 |
<tt>fixed-width font</tt>
|
fixed-width font |
This is <u>underlined</u>
|
This is underlined |
Logical styles
A logical character tag describes how the text is being used, not necessarily how it is formatted. Listing 3 displays common examples logical character tags.
| Listing 3 common logical character tags | ||
|---|---|---|
| Tag | Description | Renders as |
<cite>
|
citation | emphasizes the text in italics. |
<code>
|
code sample | Displays some characters as code usually in Courier font (i.e., fixed-width font) |
<del> |
deleted text | displays text with a line through it; renders differently in Netscape and Internet Explorer |
<dfn> |
definition | italics; renders differently in Netscape and Internet Explorer |
<em>
|
emphasis | emphasizes the text in some way usually as italic. |
<ins>
|
inserted text | underlined; renders differently in Netscape and Internet Explorer |
<kbd>
|
code sample | fixed-width font |
<samp>
|
code sample | fixed-width font |
<strong>
|
strong | Text is emphasized more strongly than usually as bold. |
<var>
|
program variable | italics |
Listing 4 provides examples of how logical tags may display on a browser.
| Listing 4 examples of logical tags | |
|---|---|
| HTML code | Output |
This is used for a short <cite>quote</cite>.
|
This is used for a short quote. |
<code>y = m * x + b</code>
|
y = m * x + b |
<del>Deleted</del> text
|
|
<dfn>definition</dfn> text
|
definition text |
This is <em> emphasized </em>.
|
This is emphasized . |
<ins>inserted</ins> text
|
inserted text |
<kbd>code</kbd> sample
|
code sample |
<samp>code</samp> sample
|
code sample |
This is <strong>strong</strong>.
|
This is strong. |
<var>program</var> variable
|
program variable |
Note that both logical and physical tags are two-sided tags (requiring an opening and closing tag). Also, the character tags can also be nested to format some text as
<b><i>this is bold and italicized</i></b>
which will result in :
this is bold and italicized
When you nest tags, make sure to closed them properly. Although the output of the following code is same, the tags are not closed properly:
<b><i>this is bold and italicized</b></i>
Do you notice why? Well, because the tags are overlapped: the <i> tag should be closed first because it was the last tag that was opened. The <b> tag should be closed last as it is the first tag that is opened. In general, a tag that is opened last, should be closed first. A tag that is opened first should be closed last.
In summary, use the characters tags to either format text with physical tags or to describe some text with predefined logical tags. Also, remember to properly close nested tags.