HTML Tip:
Add Emphasis With Structural Tags

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

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:

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

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:

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!