Logical tags

What are logical tags?

Text formatting can be done in two ways: using logical tags, and using physical tags.

Logical tags are used to describe text by its logical or structural function or purpose, as opposed to physical tags, which are used to describe text by its physical appearance only.

The heading tags we learned last week (for example, H1) are logical tags. When you use an H1 tag, all you are saying is "this is a level one heading." You are not saying "this is big text" or "this is bold-faced text," even though most browsers do display headings that way. All you are telling the browser to do is to display the text so that it will be clear to the reader that it is a level one heading, and it doesn't matter what it looks like as long as the message is clear -- "this is a level one heading."

The reason this is important is that not all browsers and systems have the same capabilities. Some systems can't display text in multiple sizes, so instead of making an H1 heading big and bold, they might make an H1 all caps and centered. A text reading browser for the blind obviously can't show bold text or different text sizes, so instead it might read the text in a different tone of voice to make it clear that it is a heading.

If you use physical tags to define logical structures (for example, making text bold to show it is a heading), then when the page is viewed in a browser that can't display that physical characteristic, the characteristic will be completely ignored -- and then the user may be unable to see the logical structure at all.

On the other hand, if you use a logical tag to define that structure, the browser will find some way to make the structure apparent to the user, even though the methods used may vary from browser to browser.

This makes your pages more platform-independent, and more accessible by a variety of browsers with a variety of capabilities, from Netscape and Internet Explorer to Palm Pilot browsers, web-ready cell phones, web browsers for the blind, and other, even more esoteric browsers.

Basically, you use logical tags when it's more important that the browser display the logical function (that is, make it clear exactly what the text is) than that it look any particular way.

Some examples

Emphasis

The emphasis tag, EM, is used to show that text is emphasized. For example, in the sentence:

It is very important not to put metal in the microwave!

...you can see that the word "very" is emphasized. In most browsers this text will be italicized, but some browsers might display it differently.

Here's an example of the code for the emphasis tag.

It is <EM>very</EM> important not to put metal in the microwave!

Strong emphasis

The strong emphasis tag, STRONG, is used to show that text is emphasized even more strongly than with the emphasis tag, such as in the following sentence:

Stop! Don't turn the page!

Here's an example of the code for the strong emphasis tag.

<STRONG>Stop!</STRONG> Don't turn the page!

Code

The code tag, CODE, is used to show that text is computer or HTML code, such as in the following sentence:

You can make a link to Yahoo! by using A HREF="http://www.yahoo.com/"

Here's an example of the code for the code tag.

You can make a link to Yahoo! by using
<CODE>A HREF="http://www.yahoo.com/"</CODE>

Address

The address tag, ADDRESS, is used to give authorship or contact information for a page, for example:

This page is by Wendi Dunlap, wd@slumberland.org.

Here's an example of the code for the address tag.

<ADDRESS>This page is by Wendi Dunlap, 
<A HREF="mailto:wd@slumberland.org">wd@slumberland.org</A>.
</ADDRESS>

Keyboard

The keyboard tag, KBD, is used display text that the user is meant to type on the keyboard, for example:

Please type Chapter One at the top of the page.

Here's an example of the code for the keyboard tag.

Please type <KBD>Chapter One</KBD> 
at the top of the page.

Your browser may or may not display keyboard text differently from other text. It depends on the browser.

Citations

The citation tag, CITE, is used to cite sources for the information on a page, for example:

Seattle Times, January 2, 2000, page one, "Schnell: I am not a wuss"

Here's an example of the code for the citation tag.

<CITE>Seattle Times, January 2, 2000, page one, 
"Schnell: I am not a wuss"</CITE>

There are a few other logical tags, but they were designed for specialized academic and scientific use, and are rarely seen.

<<-------- p r e v // a i w e b // n e x t -------->>