Home : Basic HTML/CSS tutorial : Text expression : Emphasis
Introduction
Emphasis
Bullet-point lists
Within-page linking
Example
Summary
< Previous: Introduction

Emphasis

Two types of emphasis - normal emphasis <em> and strong emphasis <strong> - are available within web pages. Normal emphasis is equivalent to italics; strong emphasis should be used less frequently, but is equivalent to boldface text.

Normal emphasis

You can apply normal emphasis to a word or phrase by enclosing that word or phrase in <em> ... </em> tags. Normal emphasis is equivalent to italicising a word in printed text.

Emphasis is used within paragraphs: it doesn't replace the <p> tag. For example:

<p>This paragraph <em>emphasises</em> my point.</p>

The <em> tag usually displays as italic. Speech browsers will give emphasis to the words.

Strong emphasis

Strong emphasis works much the same way: enclose the word or phrase in <strong> ... </strong> tags. For example:

<p>This paragraph contains <strong>strong words!</strong></p>

Strong emphasis, which normally displays as boldface text, should be used very sparingly. It's only appropriate when the relevant text should really jump out at the user. For example, it would be appropriate for a very important warning in a set of instructions, or for highlighting items within text that users are expected to see before reading the rest (as we saw earlier with film titles).

Display control

I've mentioned that these tags "normally display" in a particular way. As with the other tags we've seen, this appearance can be customised using stylesheets, which will be discussed in a future class. When writing text, you should choose either <em> or <strong> as appropriate for the meaning you require, regardless of how you plan to display them.