Archive for the ‘Accessiblity’ Category

How to correctly use i, em, b and strong

There is a subtle difference between the <b>, <strong>, <i> and <em> html tags: they are commonly misused when styling text as bold or italic.

The <b> and <i> tags are presentation elements and are to be used where there is no “semantic” meaning, for example in a site footer. The <strong> and <em> tags are used where emphasis is to be put on a word and there is semantic meaning, as above with “subtle”.

Semantic: “relating to meaning in language or logic.”
New Oxford American Dictionary

Why does this matter? The correct use of these tags help computers understand language. Currently,

“… web pages are designed to be read by people, not machines.”
Wikipedia

By correctly using these tags we help computers understand in what context we meant something we wrote. The most important use of these tags is for accessibility, em and strong tags are read with emphasis on a screen reader while i and b are read as normal text; since they’re designed for presentation use only.

By Ben McRedmond
May 13th, 2008