Web Design Made Simple Web Design Made Simple

debbie T Designs - Web Design Made Simple

Introducing em & strong Tags

Certain words in your text may need a little help to make them stand out. To give a word or phrase emphasis use the <em> tag. Surround the text with opening <em> and closing </em> tags. Most browsers will render this emphasized text as italic.

For words that need even stronger emphasis, use the <strong> tag. Surround the text with opening <strong> and closing </strong> tags. Most browsers render this text as bold.

Some facts on <em> and <strong>

  • The <em> and <strong> tags are inline/text-level tags, as opposed to the h1 and p tags, which are block-level tags. Inline tags can be nested in any block-level tags, but not vice-verse. Do not nest a <p> or <h1> tag in a <em> or <strong> tag.
  • Be aware that if you nest the <strong> tag in a <h1> tag, you will not see the text display any bolder, since browsers already render <h1> text as bold. Eventually, you will learn how to use CSS to change the rules of how these tags will be displayed.
  • Do not use the <em> and <strong> tags to format your text. If you want italic or bold text, it is best to format with (CSS) Cascading Style Sheets instead. Use <em> and <strong> only for emphasis and strong emphasis.

Experiment with the em and strong tags in your web page file. Pick out a word or two in each paragraph and add some emphasis. Use the <em> tag for emphasis and <strong> for very strong emphasis.

(To save space, I am only showing a section of the full code in the example below)

<body>
<h1>Debbie's Favorite Foods</h1>
<p>I would like to share my <em>favorite foods</em> with you.</p>
<h2>Italian Dishes Rock My World</h2>
<p>This might be my favorite food of all time. Scrumptious meatballs and chicken parmesan are <strong>yummy</strong> main dishes. I just love pasta. Give me red tomato sauce, pesto sauce, or garlic and oil. <strong>I love it all!</strong></p>

Make sure to view the revised file in your web browser to see the changes.

What About the <i> and <b> Tags?

For those that have previous HTML experience, you may be accustomed to using <i> and <b> to indicate italic and bold text. If you only want to format a word cosmetically, either of these tags will do. They are basically used for "highlighting" with bold or italic.

But most times, the text you are formatting needs emphasis, and <b> and <i> should not be used for emphasis. Use <em> and <strong> instead.

If you would like to read more on the differences of <b> vs. <strong> and <i> vs. <em>, here is a link that might help:

http://lists.w3.org/Archives/Public/w3c-wai-ig/2001JanMar/0214.html

The bottom line is that all of your formatting can be accomplished using (CSS) Cascading Style Sheets, giving you so much more control over how these tags will be displayed.

comments are closed