<b> tag verses <strong>

[ChrisBradley]

Does it matter which tag i use for bolding? And is one better than the other for SEO purposes?

Thanks in advance,

Chris Bradley

[Wertigon]

Yes. The first one is for bolding text, the second one is for putting a strong emphasis on a (few) word(s).

So, if you want to strongly point something out in your text ("You <strong>don't</strong> want to write 'format c:' in a DOS box unless you know what you're doing") use strong, if it's just for visual appearance, use CSS instead. ;)

[Purple Martin]

One way of working out what is semantically most appropriate is to imagine what a screen reader would do. It will read a <b> tag in a normal voice, but it will emphasise a <strong> tag with a "bigger" voice. So now we know what each tag means.... of course, as was said above, it's a good idea to use CSS to bold a whole chunk of text.

The same principles apply to <i> and <em> tags. They look the same, but they sound different in a screen reader (<i> is a normal voice, <em> is emphasised).

Here is an example: The Australian government organisation HealthConnect uses italics for the second half of the name (don't ask me why, it's just their branding decision). The correct way to mark this up is to use <i> tags for the Connect part of HealthConnect, because we want it to look different but we don't want it to sound different.

[Hester]

The problem is that the browser does style <strong> as bold text, and <em> as italics. So to the user, there is no difference between <b> and <strong> and <i> and <em>.

One point against using <strong> is that it uses more characters, so will add weight to your document if you use a lot of bold tags.

[BlobFisk]

As Purple Martin says there is a difference between <strong> and <b> and <em> and <i>. Not only are they semantically different, but screen readers use <strong> and <em> to add enunciation to the text.

From the W3C:

The presentation of phrase elements depends on the user agent. Generally, visual user agents present EM text in italics and STRONG text in bold font. Speech synthesizer user agents may change the synthesis parameters, such as volume, pitch and rate accordingly.

Here [w3.org] we are told:

I: Renders as italic text style.
B: Renders as bold text style.

And here [w3.org] we are told:

EM: Indicates emphasis.
STRONG: Indicates stronger emphasis.

So there is a semantic difference, even if most visual browsers render <em> and <i> and <strong> and <b> identically.

HTH

[Hester]

Here is an example: The Australian government organisation HealthConnect uses italics for the second half of the name (don't ask me why, it's just their branding decision). The correct way to mark this up is to use <i> tags for the Connect part of HealthConnect, because we want it to look different but we don't want it to sound different.

But I thought <i> and <b> were deprecated. In which case I'd suggest the correct way to mark up the name would be this:

Health<span id="word2">Connect</span>

That way you could also add colour or change the font etc.

[Gusgsm]

I have a doubt about this:

Besides what has been told, there are at least two traditional usages for italics:

1. Words (not quotes) in a different language, specially if they are the translation of the preceding/following word; ie: In Spain, <i>toros</i> (bulls) are usually black.

2. Words used in a meaning slightly different from standard usage or used in a twisted sense; ie: this kind of <i>humour</i> was felt to be odd.

My question is: Which one would be the best way to convey both usages in html/xhtml?

[BlobFisk]

But I thought <i> and <b> were deprecated.

The W3C doesn't seem to say that they are. U and STRIKE are deprecated (among a lot more). See here:

[w3.org...]

HTH

[DrOliver]

One way of working out what is semantically most appropriate is to imagine what a screen reader would do. It will read a <b> tag in a normal voice, but it will emphasise a <strong> tag with a "bigger" voice.

I've seen, err, I've heard screen readers say:

New line of text, bold, 12 pixel font-size

So that gives an idea to blind readers what the paragraph is supposed to look like, or by speaking out how the text is styled, one might come to a conclusion that otherwise can only be drawn when semantically correct markup is being used.

Does that make sense? Man, I am not used to write English anymore when I am that tired :-)

Anyhow, I'd go with semantically correct markup whenever possible (err, always), and try to avoid stuff like

<b>

or

<i>

.

I just wanted to share my experiences with screen readers. Some of them are capable of telling the blind reader how the text looks like. It seems to be in the settings though, so screen reader users can enable or disable these functions.

[Hester]

For quotes, we can use <cite> and for definitions we can use <dfn>. Perhaps there are other tags to work with the examples Gusgsm gives? For foreign words, I thought you just wrapped them in a span and declared the language. Eg:

In Spain, <span lang="es">toros</span> (bulls) are usually black.

[Gusgsm]

I was wondering how a screen reader would read or understand something marked like an special-meaning italic...

Perhaphs like Mike Myers when (disguised as Doctor Evil) he makes the absurd "insert here quotes" movements with the fingers? ("he's <i>baaad</i>").

[ProfMoriarty]

Does it really make sense to introduce a class "bold" with font-weight: bold; if <b> is not deprecated at all?

There are situations where you may need bold text without the meaning of <strong> (maybe to highlight some passages in a long text on a screen), so the intention is just to use <b> in a visual way. So why not use it?

[encyclo]

ProfMoriarty, there is some sense in making a "bold" class when you want to avoid hardcoding a particular style into the HTML, as whilst with CSS you could always do a

b {font-weight:normal;}

later, for non-CSS user agents, the bold will always show.

However, that is not always a problem, so in those cases, using

<b></b>

is a good idea rather than

<span class="bold"></span>

.

One other advantage of

<b>

and

<i>

are that, because they are semantically meaningless, you can use them as replacements for

<span>

whilst still making that style distinction for non-CSS user agents. Here's a (rather poor) example:

<h1>My title</h1>
<h2>My subtitle</h2>
<p>Date of publication: <b class="date">January 1st, 2005</b></p>

and with the CSS:

b.date {
font-weight:normal;
color:red;
}

As your date is not important, you don't want to use a hx heading, but if you used a

<span>

, it would remain indistinguishable from a normal paragraph in a non-CSS environment.

[Purple Martin]

But I thought <i> and <b> were deprecated.

No, they're not. They are still valid and still have a purpose.

Later versions of some editors (e.g. Dreamweaver and Homesite) use <em> and <strong> by default when you highlight some text and press CTRL+I or CTRL+B, which gives the misleading impression that <i> and <b> have been replaced by <em> and <strong>. This is not true: they have not been replaced, they do different things and should therefore be used differently. The differences have already been well explained throughout this topic.

[Hester]

Except that they are presentational and therefore a bad idea. I thought we were all moving towards a separation of style (presentation) and content. I'm sure I read it somewhere that <b> and <i> were deprecated. They aren't present in the XHTML 2.0 spec for a start - only <em> and <strong> are listed. Can anyone clarify this with respect to XHTML 1? I couldn't find anything about them in the spec for that.

[Farix]

They aren't present in the XHTML 2.0 spec for a start

The W3C docs [ftp.ics.uci.edu] will disagree with you on that point.

5.7.2.1. Bold: B

The <B> element indicates bold text. Where bold typography is
unavailable, an alternative representation may be used.

5.7.2.2. Italic: I

The <I> element indicates italic text. Where italic typography is
unavailable, an alternative representation may be used.

[Gusgsm]

I have validated pages with <b> and <i> tags as xhtml 1.1 at the W3C validator.

So, they must be still valid marks in xhtml 1.1

[Hester]

Farix, that document relates to HTML 2.0 dated 1995! Take a look at the XHTML 2.0 doc and you will see bold and italic aren't listed.

[w3.org...]