Is using <strong> messing up with separating style from content?

[PowerUp]

The purpose of CSS is to seperate style from content.
If in my html file..

<p>I sell <strong>widgets</strong>.</p>

.. does this mean I have mixed style (for strong) with the content?

Should I instead use..

<p>I sell <span class="strong">widgets</span>.</p>

?

[Robin_reala]

Ah, the age-old question :)

In HTML3 you didn’t have strong. If you wanted to bold a piece of text you used <b>...</b>. This works, but semantically just means “I want the enclosed text to be bold”, not “the enclosed text in important enough to warrant a strong emphasis”. Step forward to HTML4 and the W3C introduce the <em> and <strong> elements. This have the same visual effect as <i> and <b> in browsers but have to more semantic meaning of describing the emphasis, not the visual look.

So, the question you have to ask your self is “Do I want bold text, or am I trying to emphasise it?”. If you are trying to emphasise it then carry on using <strong> by all means - it’s the right thing to do. Remember that from a styling point of view it’s just another element, so it’s not tied to being bold. It’s just there to indicate a strong emphasis.

[sonjay]

In theory, strong contains innate semantic meaning. In theory, a screen reader would emphasize strong, but would ignore b, which is strictly presentational. Thus, in theory, strong should fall within the guidelines of separating style from content.

I don't know that there's a definitive conclusion on strong vs a css class that specifies font-weight bold. I sometimes use one, sometimes the other.

P.S. I hate to disagree with a moderator, but strong and em were indeed part of the HTML3 specs.

[PowerUp]

“Do I want bold text, or am I trying to emphasise it?”

hmmm... I think I know what you want to get at. Thanks Robin, Sonjay.

[Robin_reala]

Sonjay - disagree with me all you want if you’re right! :) As per usual it’s a constant learning process.

[mattur]

It's impossible to entirely separate formatting from content structure.

<p>I sell <strong>widgets</strong>.</p>

<p>I sell <b>widgets</b>.</p>

are both fine, and to all intents and purposes interchangeable. Screen readers do not treat them differently.

<strong> and <em> first appeared shortly after "HTML1" and were documented in HTML2 in 1995 (rfc1866). The debate over whether to use the more "semantic" names has been going on ever since, but it's down to personal choice really; no one will be affected by your decision either way.

<p>I sell <span class="strong">widgets</span>.</p>

Is pure lunacy ;) Clearly there is no difference in styling/content separation, all you've done is make the formatted span non-standard rather than using a standard inline element. Don't do this, in the same way you wouldn't do this, either:

<span class="paragraph">I sell widgets.</span>

The main accessibility advantage of using a bold/strong or italic/em element over a custom span is that some screen readers can scan by formatting code - it provides a hook: eg find next bold/strong text. It's also shorter.

[PowerUp]

Hi Mattur, I was using <strong> to bold and also emphasise my text... until a light bulb suddenly light up and that's why I came running to this forum to ask for opinion.

I don't want to screw up search engine ranking by wrongly emphasising words I just wanted bold.

For example, in my previous HTML...

"<p><strong>Example 1.</strong><br />
John Doe buys a <strong>widget</strong>.</p>"

Now, in my HTML...
"<p><span class="bold">Example 1.</span><br />
John Doe buys a <strong>widget</strong>.</p>"

Search engines will see that I emphasise only widgets whereas previously it'll see me as emphasising "Example 1." and "widgets"

At least, from the SEO articles i read,... i think my approach is better right?

But I do agree with you that it is longer to type, and sometimes it is a very fine line to differentiate whether I wanted to just bold the text or emphasise the text.

Anyone here who disagrees or agrees, just comment. I learn better when I can see pros and cons from both sides of the fence.

[penders]

On the historical debate...

"In HTML3 you didn’t have strong...."
"...but strong and em were indeed part of the HTML3 specs."
"<strong> and <em> first appeared shortly after "HTML1" and were documented in HTML2 in 1995 (rfc1866)."

<strong> and <em> do seem to have been part of the working draft for HTML1 in June 1993...
[w3.org...]

And for the record are supported by Netscape 4.08 (1998)

[Robin_reala]

In your sample code, wouldn’t “Example 1.” be a heading for the following text?

[Ingolemo]

PowerUp, given the HTML you posted, it seems to me that your code would be more semantic in this instance if you used either a definition list:

<dl><dt>Example 1.</dt>
<dd>John Doe buys a <strong>widget</strong>.</dd></dl>

Or some sort of header construction:

<hn>Example 1.</hn>
<p>John Doe buys a <strong>widget</strong>.</p>

(As a side effect, both these examples are trivial to style.)

[PowerUp]

PowerUp, given the HTML you posted, it seems to me that your code would be more semantic in this instance if you used either a definition list:
<dl><dt>Example 1.</dt>
<dd>John Doe buys a <strong>widget</strong>.</dd></dl>

Or some sort of header construction:
<hn>Example 1.</hn>
<p>John Doe buys a <strong>widget</strong>.</p>

I'll look up what's a definition list cos i dunno what that is. As for using header, wouldn't that put the word Example1 more weight compared with normal text? I only use <h> tags when the header is a title or it containers keywords. Since Example1 is not a keyword, so I don't use a header tag to contain it.

As for definition list, this is something new to me. What advantages does it have over what I am using now?

[ronin]

It's tempting but erroneous to consider the default presentation of semantic elements by the browsers as innate presentational attributes of those elements.

For instance:

The <b>quick</b> brown fox. (deprecated)

is presentationally the same as:

The <span style="font-weight:bold;">quick</span> brown fox.

But neither of these are the same as:

The <strong>quick</strong> brown fox.

unless the browser default style sheet specifically states:

strong {font-weight:bold;}

While it is true that in every contemporary browser this is in fact the case, the default style for <strong> could very well be anything the browser makers choose.

[Ingolemo]

A definition list is just that; a list of definitions. Its standard usage is for things like glossaries and dictionaries, but the specifications IMHO point at it being usable in places similar to unordered lists except where each list item has some sort of title (see the first section of this page: [w3.org...] ).

You should use header elements whenever you have some text that seems to define a whole section of your content. You shouldn't do it just to emphasise keywords (that incidentally, is what em and strong are for); the header elements have nothing to do with emphasis, they are there so that you can provide an outline of your document. In this case, it seems to me that "Example 1" might potentially be suitable for a header.

Which one should you pick? If the explanation for "Example 1" is a simple line of text as it is in your post then I would recommend the definition list. If, however, it consists of a couple of paragraphs or equivalent then the header element would seem more appropriate IMHO.

You should keep in mind that I'm only going on what you've given as your example. If you could give more of the context of what it is you're trying to do then I could be more confident in my recommendations.

[mattur]

"<p><strong>Example 1.</strong><br />
John Doe buys a <strong>widget</strong>.</p>"

Now, in my HTML...
"<p><span class="bold">Example 1.</span><br />
John Doe buys a <strong>widget</strong>.</p>"

...

At least, from the SEO articles i read,... i think my approach is better right?

I would expect this to have very little, if any, impact on the page's ranking. Forget about gaming search engines with minor structural changes and concentrate on good, user-focused content and marking up your page in the most logical way possible, using HTML elements appropriately. As others have noted, a heading is probably the appropriate markup to use in this example.

As for using header, wouldn't that put the word Example1 more weight compared with normal text

Yes, which suggests the content could be improved. Example:

<hn>Widget Purchase Example</hn>
<p>John Doe buys a <strong>widget</strong>.</p> 

[PowerUp]

If you could give more of the context of what it is you're trying to do then I could be more confident in my recommendations.

Ok, this is what my page looks like

Header 1

Paragraph1. Content intro, Content intro, Content intro, Content intro.

Header 2
Paragraph2. Content, content, Content,Content,Content,
Paragraph3. Content, Content, Content, Content,

Example1.
"Calculation example to illustrate the points in highlighted in content above"

Header 2
Paragraph3. Content, content, Content,Content,Content,
Paragraph4. Content, content, Content,Content,Content,

So, is it still appropriate to use header tag for example 1?

[Ingolemo]

Yes, I'd use a third-level header.

[edited by: Ingolemo at 6:24 pm (utc) on Mar. 19, 2007]

[johnnie]

So what's wrong with using a class on em instead? Strictly speaking, em is the only purely semantic element for emphasizing. At least, IMHO. I know class-soup should be avoided, but here useful semantic meaning is conveyed.

I'd use this:

I sell <em class="very-important">extremely cheap widgets</em>

Then in your CSS:

em.very-important {
font-style: normal;
font-weight: bold;
}

[Robin_reala]

Well, if it’s very important, then wouldn’t you want to use a <strong> instead (to donate a strong emphasis)?

[Marcia]

>>I would expect this to have very little, if any, impact on the page's ranking.

That's just about what Matt Cutts responded when someone asked him the difference between the two.

[johnnie]

>> Well, if it’s very important, then wouldn’t you want to use a <strong> instead (to donate a strong emphasis)?

I fear this discussion is endless. In my opinion, the element <strong> has less of a semantic and more of a presentational meaning.

[Setek]

Well, if it’s very important, then wouldn’t you want to use a <strong> instead (to donate a strong emphasis)?

I agree :) In typography, notes and headings that are deemed "more important text" than other bits are emphasised, or strongly emphasised.

I fear this discussion is endless. In my opinion, the element <strong> has less of a semantic and more of a presentational meaning.

Less of a semantic meaning?

<strong>

ly emphasise? As opposed to

<em>

phasise?

Both change the presentation in some way, by default.

For purely presentational changes, I use a class

faux-strong

or

faux-em

.

For words I want to stress, I use

<strong>

and

<em>

.

~ 2c

P.S.: Given the more important text that defines what is in the content below it:

Example 1
This is stuff to do with example 1.

I would use a definition list. Especially if there are multiple examples you're defining. Although, if it was one big example (not just one paragraph of explanation) per parent heading, I might be inclined to use a heading. Both are logical structures.