Logical Tags
Logical tags are now often referred to as semantic tags, and the number of html tags with semantic meaning has been greatly expanded in HTML5. See semantic markup and HTML document structure to learn more.
What’s so Logical about Logical Tags?
The original intent of HTML was to mark up text to indicate the purpose of each part of the document. Text within the <H1 ...> is a heading, text within <CODE> is code from a program, and so forth.
Although logical tags, (also called Idiomatic Elements), indicate different types of information, most of them are usually rendered in one of just a few ways: italics, bold, or monospace (all characters the same width). For example:
<em>This is emphasized text</em>
<cite>This is cited text</cite>
<strong>This is strong text</strong>
<samp>This is sample text</samp>
<code>This is code text</code>
<kbd>This is keyboard text</kbd>
Here’s how those different types of elements are rendered:
This is cited text
This is strong text
This is sample text
This is code textThis is keyboard text
So if logical tags just look like bold or italics, why use them at all? Why not just use <B> when you want bold? Logical tags have lost favor to “formatting” tags, which indicate the physical appearance of the document (for example <B> for BOLD). This loss of popularity is unfortunate because logical tags still serve some important purposes:
Logical tags allow the browser to render that information in the manner most appropriate for that browser. Text that should be emphasized (<EM>) may be best emphasized in Windows with italics, and bold in Unix.
Logical tags help you, the author, keep track of what you are saying, without the distraction of presentation. If you need to indicate someone’s address, use <ADDRESS>, knowing it will be presented in an appropriate manner.
