Validation and Promotion

What's the Difference?

 

There is a difference between using what are referred to as logical tags and tags that primarily affect visual layout.

If you use a <b> tag to make the text bold it does look bold.

If you use a <strong> tag to make the text bold it also looks bold in most browsers.

Stripped down to emphasize the important tags, the code for the two sentences above looks like this, with the significant tags in bright green:

If you use a <b><b></b> tag to make the text <b>bold</b> it does look <b>bold</b>.

If you use a <strong><strong></strong> tag to make the text <strong>bold</strong> it also looks <strong>bold</strong> in most browsers.

Similarly, if you use the <i> tag to make text italic, it does look italic. And if you use the <em> tag to make text italic, it does look italic in most browsers.

So why use <strong> instead of <b> to get the same effect when it takes longer to type? Why use <em> instead of <i> when they usually look the same?

The <strong> and <em> tags are "logical" tags. This means that they are used deliberately when the designer wants to add emphasis to particular words or phrases. Some screen readers may use a different inflection when they come across these tags to communicate the emphasis. The <b> and <i> tags are primarily for visual effect on a page when designing layout.

Does this mean you should always use the <strong> and <em> tags instead of the <b> and <i> tags? No, some browsers such as Lynx may ignore the logical emphasis tags anyway. And just imagine how annoying it would be to hear an entire bold-faced paragraph like this read loudly with emphasis!

You can also use the <cite> tag at the beginning and end of a phrase. This is appropriate when citing a source without linking to it. Do not use it simply to make somethign look italic. Not all browsers render this material in italic text. It is more useful for browsers that are logically looking through your document to index references.<cite> Raggett on HTML 4, page 71</cite>

Use the <strong> and <em> tags when the content of your page requires that certain words or phrases be stressed. Use them sparingly or your page, much as you would use exclamation points ( ! ! ! ). If you are only highlighting words for a visual effect to assist in navigation use the <b> and <i> tags.

Other comment notes for this unit:
paragraphs and headers | lists

 

Return to
Unit 4

 
Readings
Resources
<head>
<p> etc.
<b> etc.
<li> etc.
<a href>
<img src>
Access
<table>
<frame>
<style>
<form>
<script>
<object>
validate
Valid HTML 4.0!