What is the difference between: em vs i, and strong vs bold

Often when working on multiple projects and in various frameworks I find that the <em> and <i> tags in addition to <strong> and <bold> are used interchangeably.  After much confusion I finally went and looked up why both of these tags exists. As it turns out the <i> and <b> tags were created to denote a span of text that should be italicized or bolded respectively. While the <em> and <strong> tag were created to place emphasis on the text.

Before CSS the browser (User Agent) was responsible for how <em> and <strong> tags where rendered and it was not always guaranteed that <em> would be italic which is why <i> existed, the same goes for <strong> and <b>.

In today’s browsers it is common that both <em> and <i> as well as <strong> and <b> get rendered the same way in a browser unless a Cascading Style Sheet (CSS) exists for the Web Page that overrides the default styling. To be consistent in your own projects it is good practice to use <em> and <strong> as it can be utilized more effectively by Voice Synthesizer applications used by the visually impaired.

// HTML/CSS //

Comments & Questions

Add Your Comment