The community is working on translating this tutorial into Ukrainian, but it seems that no one has started the translation process for this article yet. If you can help us, then please click "More info".
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.
- The <i> element was for italic text, now it is also for alternate text, such as foreign words, technical terms, or inline stage directions
- The <b> element was for bold text, now it is also used as a stylistic offset such as keywords in a document of product names
- The <em> was for emphasis, now it is used for words or sentences you would pronounce differently
- Lastly, the <strong> element is for something with strong emphasis, it represents importance
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
- If you don’t use CSS to style your elements, the content in <em> and <i> elements will look the same
- If you don’t use CSS to style your elements, the content in <strong> and <b> elements will look the same
- The <em> and the <strong> elements should be preferred to the <i> and the <b> elements
- These elements should not be used for citations and pullquotes, instead you should use the <blockquote> and the <aside> element
- You are incited to use classes in combination with these elements which gives you the opportunity to change the look of the elements and hereby use the elements semantically instead of visually
