Improve Site Performance Increase Site Traffic Monitor Site Uptime Webmaster Resources NetMechanic Home Looking For Help? Partner Programs Privacy Policy Contact Us Press Room
NetMechanic Home LOGIN | HELP | ABOUT US | PRODUCTS | SITE MAP
NetMechanic Menu
Over 52 Million Web Pages Tested!     
 
usable web page tips.
search engine optimization story search.
Search for:


Your Email:

I would like to receive my newsletter in:
HTML format
Text format


usability testing.
Volume 8 (2005)
   September
   June
   April
   March
   January

Volume 7 (2004)
   November
   September
   July
   June
   May
   April
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 6 (2003)
   December
   November (Part 2)
   November
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 5 (2002)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 4 (2001)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 3 (2000)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June
   May
   April
   March
   February
   January

Volume 2 (1999)
   December
   November
   October
   September
   July
   June
   May
   April
   March
   February
   January

Volume 1 (1998)
   December
   November
   October
   September

 

HTML Tip:
Add Emphasis With Structural Tags

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

  
June 2003 (Part 2)
Vol. 6, No. 12
 • HTML Tip
 • Promotion Tip
 • JavaScript Tip
  

Many webmasters use bold <b> or italics <i> tags to stress certain words and phrases. That does create the desired visual effect, but at a cost. With HTML formatting tags, you lose structural cues, promotional benefits, and decrease the page's overall accessibility. Use the structural tags <strong> and <em> instead. They look just the same, but work much better.

HTML And CSS Formatting

Most webmasters use these deprecated HTML formatting tags to emphasize text like this:

<b>This text is important</b>
<i>This text needs some emphasis</i>

You can also create similar effects using Cascading Style Sheets (CSS) using these style properties:

font-weight:bold
font-style: italics

Overall, CSS is the preferred way to format page content because it helps you separate a page's structural elements from the presentation. It's easier to change the page display if the formatting instructions aren't wrapped up inside the page's HTML code.

But still, these tags define formatting, not structure.

Same Look, Different Purpose

But sometimes, a page element needs to be emphasized because it's an important part of the page's content - like one of your important keywords or topics. That's where the STRONG and EM tags come in handy.

Bold and italic (<b> and <i>) tags are HTML formatting tags, while STRONG and EM are structural tags. Both change the look of text. Remember how the browser chooses different default sizes for header tags? Browsers have default presentations for STRONG and EM tags too.

Here's an example. Note that STRONG and EM are both container tags, meaning they require a closing and tag at the end of the emphasized text.

This text is bold, while this text is strong. Which do you prefer? Text in italics or text with emphasis?

Here's the source code. You'll probably have to look it to tell which text uses which formatting method.

<b>This text is bold,</b> while <strong>this text is strong.</strong> Which do you prefer? Text in <i>italics</i> or text with <em>emphasis</em>?

But remember, even though the tags may look the same on the Web page, they really are different.

Why Change Your Code?

There's no reason to automatically change all your bold and italics tags to STRONG and EM, but sometimes the change is appropriate. Consider these three questions:

  1. Why are you adding emphasis to the text?
  2. Is important information is contained in the text?
  3. How would you want the text to sound if someone read it aloud?

Let's discuss each question individually.

Structure Indicates Importance

First, STRONG and EM are structural tags used to convey information about the most important text on the page. They're rather like header tags except that they're inline instead of block-level tags. The browser automatically places extra space above and below header tags and uses a distinct font size (unless you use CSS to create custom headers).

Since STRONG and EM are inline tags, you can use them inside header text, paragraphs, lists, blockquotes, and wherever you have important text that requires special emphasis.

Spiders Look For Important Text

Header tags are one of the best, most overlooked, ways to increase your search engine rank. Because they're important structural tags, many search engine algorithms give keywords contained inside headers a higher relevancy score.

Of course, you want to include keywords elsewhere on your page and have them also score well. That's how STRONG and EM tags can help. Search engine algorithms won't pay much attention if you emphasize this important keyword phrase using a bold tag. However, this same important keyword phrase emphasized using a STRONG tag would receive special attention from the spider even though the two appear to be identical when rendered by the browser.

Always remember that a search engine spider is basically a simple text browser. It looks at your code and not at the page like a human visitor does. A spider needs all the help it can get to identify and rank your important content!

Page Primer, part of Search Engine Power Pack, gives you even more helpful tips about what specific search engines look for when they evaluate and rank Web pages. Learn how to select keywords and write HTML code to boost your site rank in Google and other top engines.

Speech-friendly Pages

Think about how you'd read your Web page aloud. You'd likely add a special vocal inflection, pitch, or emphasis to text that's bold or italics, right? That's because the emphasized text is somehow different from the surrounding text.

Screen readers are designed to do just that. They give more spoken emphasis to content contained inside STRONG and EM tags. Adding them to your page gives the visitors an experience that's more like listening to a real person talk.

These tags are the preferred way to add emphasis according to Web Accessibility guidelines issued by the W3C. They help you communicate more effectively with the greatest number of Web site visitors:

"The proper HTML elements should be used to mark up emphasis: EM and STRONG. The B and I elements should not be used; they are used to create a visual presentation effect. The EM and STRONG elements were designed to indicate structural emphasis that may be rendered in a variety of ways (font style changes, speech inflection changes, etc.) "

Because so many webmasters use formatting tags instead of STRONG and EM tags, most screen readers give similar emphasis to bold and italics tags. Even so, it's a better idea to use the correct tags. The Web is for communication and these structural tags help you communicate better than formatting tags!

Learn more about Web accessibility at our Accessibility Resource Center.

If you think that increasing page accessibility and boosting promotion efforts means you have to suffer through huge design changes and coding adjustments, you're wrong. This is a simple change that helps you meet both goals.

Truly, the STRONG and EM tags are some of the Web's best-kept secrets!



Rate This Tip:
Not Useful Useful Very Useful   
 
NetMechanic Tools
HTML Toolbox
Browser Photo
Server Check
Search Engine Starter
Search Engine Tools
GIFBot
Newsletter
HTML Tutorial and Tips
Search Engine Tutorial
Accessibility Information
Browser Problem Tutorial

Company Info
Products
About Us
Contact
Advertise
Link To Us
Jobs
Privacy Policy
Partner Programs
Press Room
RSS Feed
Support
 



Powered by Overture!

 
     
 
   
 
     


Keynote Home
Copyright © 1996-2010,
Keynote NetMechanic
All rights reserved.