HTML and CSS Reference
Text set apart: i and b
The i and b elements historically are for the presentation of bold and italicized text and
in practice will, without additional styling, appear visually indistinquishable from the
em and strong elements in a web browser. So, why in HTML5 have they not been
thrown into the obsolete bin? Each actually differs in subtle, semantic (meaning) ways
that have been codified in HTML5. Although the em element is for emphasis, the i ele-
ment is for offsetting text from other text so that when read, it may appear as being in a
different voice or mood. What does that mean? Well, take the following text excerpt:
Simon smirked, “Yes, I'm happy to take the garbage out.” “Ugh, I
really don't want to!” he thought as he picked up the garbage bag.
The second piece of speech is Simon's internal dialog, so it would be read in a differ-
ent voice than what was actually spoken. The HTML for this text might look like:
<p>Simon smirked, “Yes, I'm happy to take the garbage out.”
“<i>Ugh, I <em>really</em> don't
want to!</i>,” he thought as he picked up the garbage
Notice an em has been thrown in there so you can see the difference in meaning
between the two elements.
The i element may also be used when the content is a technical term or taxonomic
designation or is a phrase in a foreign language. The City Press web page includes the
French phrase “Oh là là,” a good candidate for the i element! The HTML looks like
<i lang="fr">Oh là là!</i>
Note the use of the lang attribute to specify that this text is in the French language.
Using the lang attribute has implications on how the browser handles text, because dif-
ferent languages can use different glyphs for quoted text, for instance.
The b element is for separating text without conveying any extra importance (in con-
trast to the strong element) or alternative voice or mood (in contrast to the i element).
For example, product names in a product review might be set apart from the accompa-
nying text using b . Or it could be used for ingredients in a recipe:
<p>After bringing <b>water</b> to a boil, add <b>pota-
toes</b> and <b>carrots</b></p>
Another use is in the lede (pronounced “lead”) of an article or story. This is the first
paragraph, which draws the reader in. It's not more important than the rest of the text,