Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

<strong> vs. font-weight:bold & <em> vs. font-style:italic

Tags:

html

css

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.

like image 407
Jake Wilson Avatar asked Feb 08 '11 23:02

Jake Wilson


People also ask

Should I use bold or strong?

If you want to highlight a text section as important in terms of content, you should always use strong. You should only use bold if you intend to draw attention to a section.

What is the difference between strong text and bold text?

The text written under <b> tag makes the text bold presentationally to draw attention. The main difference between these two tag is that the strong tag semantically emphasizes on the important word or section of words while the bold tag is just offset text conventionally styled in bold.

What font-weight value is equivalent to bold?

Bold: This property value helps define a bold font. The numeric equivalent for this property is 700. Lighter: This property value is associated with the parent class's font-weight.


1 Answers

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:

<p><strong>Do not touch.</strong> Contains <strong>hazardous</strong> materials. 

And you use <em> to indicate linguistic stress, for example:

<p>A Gentleman: I suppose he does. But there's no point in asking. <p>A Lady: Why not? <p>A Gentleman: Because he doesn't row. <p>A Lady: He doesn't <em>row</em>? <p>A Gentleman: No. He <em>doesn't</em> row. <p>A Lady: Ah. I see what you mean. 

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:

em {     font-style: normal;     text-transform: uppercase; } 

em {     font-style: normal;     text-transform: uppercase; }  p {     line-height: 1.5;     margin: 0; }
<p>A Gentleman: I suppose he does. But there's no point in asking. <p>A Lady: Why not? <p>A Gentleman: Because he doesn't row. <p>A Lady: He doesn't <em>row</em>? <p>A Gentleman: No. He <em>doesn't</em> row. <p>A Lady: Ah. I see what you mean.

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>, and font-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.

like image 81
BoltClock Avatar answered Sep 19 '22 15:09

BoltClock