<Strong> VS. Font-Weight:Bold & <Em> VS. Font-Style:Italic

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

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.

What's the difference between b and strong, i and em?

They have the same effect on normal web browser rendering engines, but there is a fundamental difference between them.

As the author writes in a discussion list post:

Think of three different situations:

• web browsers
• blind people
• mobile phones

"Bold" is a style - when you say "bold a word", people basically know that
it means to add more, let's say "ink", around the letters until they stand out
more amongst the rest of the letters.

That, unfortunately, means nothing to a blind person. On mobile phones
and other PDAs, text is already bold because screen resolution is very small. You can't bold a bold without screwing something up.

<b> is a style - we know what "bold" is supposed to look like.

<strong> however is an indication of how something should be understood. "Strong" could (and often does) mean "bold" in a browser, but it could also mean a lower tone for a speaking program like Jaws (for blind people) or be represented by an underline (since you can't bold a bold) on a Palm Pilot.

HTML was never meant to be about styles. Do some searches for "Tim Berners-Lee" and "the semantic web." <strong> is semantic—it describes the text it surrounds (e.g., "this text should be stronger than the rest of the text you've displayed") as opposed to describing how the text it surrounds should be displayed (e.g., "this text should be bold").

Why do we need Italic/Bold Font Files? What is the difference between HTML Italic/Strong tag and a Font?

1. The end-user's browser may not have the font installed. Remember, the content is being rendered client-side, not server-side.
2. There may be something about your content that requires some aspect of the specific typeface (odd kerning, specific sizes available, special characters, etc.) for best readability.
3. The <i>, <em>, etc, HTML tags don't do anything to the typeface at all -- they tell the client how they should be rendered, and the client chooses the appropriate typeface.
4. You can use CSS to tell the rendering engine to use a particular typeface for italics, like i, em { font-family: Caslon; }'. This is discouraged, though, because you're taking choice away from the reader -- who may not like your typeface choice.

What's the difference between an HTML i tag and css font-style:italic?

Pre-HTML5, there was no difference, neither in visuals nor semantics; i, like b, s and u, was a presentational element. This is in contrast to em, strong, del and ins respectively.

In HTML5, the i element has a specific meaning that happens to be represented visually as italicized text. It should not be used to represent just any text that happens to be in italics. In particular, it distinguishes itself from the em element, which represents stress emphasis (and, unlike i, doesn't necessarily have to be represented with italics). span remains a generic phrasing element that carries no meaning whatsoever.

Normally I would quote the spec here but I think MDN's summary is easier to understand:

The HTML <i> element represents a range of text that is set off from the normal text for some reason. Some examples include technical terms, foreign language phrases, or fictional character thoughts. It is typically displayed in italic type.

The spec still offers better examples though:

The examples below show uses of the i element:

<p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p><p>The term <i>prose content</i> is defined above.</p><p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>

How to combine bold and italic in CSS?

You were close.

italic is used with font-style whereas bold is used with font-weight.

Use:

font-weight: bold;
font-style: italic;

Which is more appropriate for marking up the property in a property/value pair: strong or font-weight:bold?

Instead of <span>, use a definition list!

Then you can style the <dt>s with font-weight: bold if they're not already.

Here's a sample of how it's used (thanks to the others who posted it!):

<dl>
    <dt>Setting</dt>
    <dd>Suburban</dd>
</dl>

Italic is rendering in bold?

Actual link/code: https://fonts.googleapis.com/css?family=Open+Sans:800italic,400

on your page...

You have just font-weight:800, for italic.

Change it with:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,800italic,400italic,300,300italic,600,600italic,700,700italic,800' rel='stylesheet' type='text/css'>

so you have all possible variations... P.S. Specify then font-weight in CSS, and rendering can be more consistent, in all browsers.

---

Related Topics

<Header> VS. <Head>

How to Preload Images Without JavaScript

Multiple Distinct Pages in One HTML File

Center a Div Horizontally and Vertically and Keep Centered When Resizing The Parent

Why Does 'Transform' Break 'Position: Fixed'

HTML5 Getusermedia Record Webcam, Both Audio and Video

Preventing Canvas Clear When Resizing Window

How Are 'Display: Table-Cell' Widths Calculated

Closing Svg Tags, Explicit or Self Closing

CSS Divide Width 100% to 3 Column

Exclude Element with Fixed Positioning from Justify-Content in Flex Layout

Difference Between "Visibility:Collapse" and "Display:None"

Why Is Box-Sizing Acting Different on Table Vs Div

How to Apply Font Anti-Alias Effects in CSS

How to Specify Model to a Nginclude Directive in Angularjs

HTML Parsing in Perl

Removing Unwanted Table Cell Borders with CSS

Transparent Scrollbar with CSS