Kevin Montgomery R.G.D.

Be Strong With Emphasis: Semantics

Home > Design > Be Strong With Emphasis: Semantics

There are advantages of using <strong> over <b>, and <em> (as in emphasis) over <i>. I’ll try to explain the differences of these semantics as simply as possible.

In HTML, <b> tells the browser to display type as bold, and <i> tells the browser to display type in italics. The problem with this is that these terms are only applicable to visual display, and become problematic when you are trying to make your site compatible for accessibility devices.

Enter <strong> and <em>. While in a browser display they might look no different to their <b> and <i> counterparts, they can semantically have meaning for accessibility devices such as screen readers, and can be rendered accordingly for the device a website visitor is using.

There are additional arguments also about separating style from the document structure. This is called Semantic HTML. In this case, bold and italic styles should be contained within the CSS of your site, rather than in the HTML using <b> and <i> tags. What’s interesting about this is that <strong> and <em> does not have to mean “make bold” or “make italic” if you decide to redefine it’s style to simply a change of color.

Leave a Reply