Italic & Bold or Strong & Emphasize

I have previously pointed out, that HTML should not be used to affect the look and feel of you web page. Just as you can make words or sentences bold or italic in Word, you can do so using HTML. Up until now, the <b> element, the <i> element, the <em> element, and the <strong> have been purely presentational, but with HTML5, a semantic meaning have been added to these four elements.

Below are some examples of how the different formatting tags are to be used - click on the "Try this example" to see how the different tags are formatted.

<!DOCTYPE html>
A foreign word, <i>smuk</i>, means beautiful in Danish <br /><br />
The phrase <b>semantinc meaning</b> might be keywords in this document<br /><br />
Alternate accentuation? Use the <em>em</em>, not the italic element.<br /><br />
If you want to write semantic code <strong>it is important that you understand the differences</strong>!
</html>

Example

In the following example, a passage from Shakepeare’s MacBeth, the <i> element is used to imply stage directions whereas the <b> element is used to indicate to which character the line belongs:

Enter MACBETH and BANQUO

MACBETH So foul and fair a day I have not seen.

BANQUO How far is't call'd to Forres? What are these
So wither'd and so wild in their attire,
That look not like the inhabitants o' the earth,
And yet are on't? Live you? or are you aught
That man may question? You seem to understand me,
By each at once her chappy finger laying
Upon her skinny lips: you should be women,
And yet your beards forbid me to interpret
That you are so.

MACBETH Speak, if you can: what are you?

First Witch All hail, Macbeth! Hail to thee, thane of Glamis!

Second Witch - All hail, Macbeth, Hail to thee, thane of Cawdor!

Third Witch All hail, Macbeth, thou shalt be king hereafter!

Using the <i> and the <b> element in this does create one problem – what if you suddenly decide that you want it to look differently? This is where CSS styling comes in handy. By adding a class-attribute to each <i> or <b> element, you can make use of the semantic properties of the elements but still have full control over their look. The stage direction class could be abbreviated to stg-direc and the character class could be abbreviated to char, and then the markup would look like this:

<p>
<i class="stg-direc">Enter MACBETH and BANQUO</i>
<b class="char">MACBETH</b> So foul and fair a day I have not seen.
<b class="char">BANQUO</b>How far is't call'd to Forres? What are these
…
</p>

What you have learned