How to Use Emphasis and Strong Emphasis for HTML5 and CSS3 Programming

By Andy Harris

You may be shocked to know that HTML5 doesn’t allow italics or bold. Old-style HTML had the <i> tag for italics and the <b> tag for bold. These seem easy to use and understand.

Unfortunately, they can trap you. In your HTML5, you shouldn’t specify how something should be styled. You should specify instead the purpose of the styling. The <i> and <b> tags in XHTML Strict are removed in HTML5 and replaced with <em> and <strong>.

The tag means emphasized. By default, italicizes your text. The tag stands for strong emphasis. It defaults to bold.

image0.jpg

The code for the page is pretty straightforward. It has no CSS at all:

<!DOCTYPE html>
<html lang = "en-US">
 <head>
 <meta charset = "UTF-8">
 <title>emphasis.html</title>
 </head>
 <body>
 <h1>Emphasis and Strong Emphasis</h1>
 <p>
  This paragraph illustrates two main kinds of emphasis.
  <em>This sentence uses the em tag.</em>
  By default, emphasis is italic.
  <strong>This sentence uses strong emphasis.</strong>
  The default formatting of strong emphasis is bold.
 </p>
 <p>
  Of course you can change the formatting with CSS.
  This is a great example of <em>semantic</em> formatting.
  Rather than indicating the <strong>formatting</strong>
  of some text, you indicate <strong>how much it is emphasized.</strong>
 </p>
 <p>
  This way, you can go back and change things, like adding color
  to emphasized text without the formatting commands
  muddying your actual text.
 </p>
 </body>
</html>

It’d be improper to think that is just another way to say italic and is another way to say bold. In the old scheme, after you define something as italic, you’re pretty much stuck with that. The HTML way describes the meaning, and you can define it how you want.