Is there any real difference between using <strong>
and <em>
instead of the CSS properties:
font-weight: bold;
font-style: italic;
Also, what is really the reason that both options exist? I could be wrong but didn't <strong>
and <em>
came on the scene quite a while after font-weight
and font-style
became standard CSS properties? If so, there must be some reason for them.
Best Answer
HTML represents meaning; CSS represents appearance. How you mark up text in a document is not determined by how that text appears on screen, but simply what it means. As another example, some other HTML elements, like headings, are styled
font-weight: bold
by default, but they are marked up using<h1>
–<h6>
, not<strong>
or<b>
.In HTML5, you use
<strong>
to indicate important parts of a sentence, for example:And you use
<em>
to indicate linguistic stress, for example:These elements are semantic elements that just happen to have bold and italic representations by default, but you can style them however you like. For example, in the
<em>
sample above (dialogue from the opening scene of BioShock Infinite), you could represent stress emphasis in uppercase instead of italics, but the functional purpose of the<em>
element remains the same — to change the context of a sentence by emphasizing specific words or phrases over others:Note that the original answer from 2011 (below) applied to HTML standards prior to HTML5, in which
<strong>
and<em>
had somewhat different meanings,<b>
and<i>
were purely presentational and had no semantic meaning whatsoever. Like<strong>
and<em>
respectively, they have similar presentational defaults but may be styled differently.You use
<strong>
and<em>
to indicate intense emphasis and normal emphasis respectively.Or think of it this way:
font-weight: bold
is closer to<b>
than<strong>
, andfont-style: italic
is closer to<i>
than<em>
. These visual styles are purely visual: tools like screen readers aren't going to understand what bold and italic mean, but some screen readers are able to read<strong>
and<em>
text in a more emphasized tone.