I have previously pointed out, that HThttps://pennedweb.com/html-elements/ML should not be used to affect the look and feel of you web page. Just as you can make words or sentences bold 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.
<i>element was for italic text, now it is also for alternate text, such as foreign words, technical terms, or inline stage directions
<b>element was for bold text, now it is also used as a stylistic offset such as keywords in a document of product names
<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 the importance Bold Italic
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.
Example Bold Italic Strong Emphasize
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? Bold Italic or are you aught
That man may question? You seem to understand me,
By each at once her chappy Bold Italic 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, Bold Italic 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:
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
- You can copy and paste this text into an email or use it in your Facebook and Twitter status updates, YouTube comments, etc. Bold and italics are often used to emphasize a point. Bold text can also be used to help structure larger bodies of text, for example, to denote a subject, heading, or title.
I have previously pointed out, bold italic that HTML should not be used to affect the look and feel of you web page. Just as you can make words or sentence