Difference between Bold and Strong tag of HTML

[Computer Master]

Hi everyone,

plz tell me the
Difference between Bold and Strong tag of HTML

Thanks

[AutisticCuckoo]

The b and i element types indicate that the content should be boldfaced or italicised, respectively, normally to adhere to some typographic convention. They don't imply any sort of emphasis, only a presentational change.

The em and strong element types indicate that the content should be emphasised or strongly emphasised, respectively. They don't imply any specific presentation, although all contemporary browsers render em in italics and strong in bold by default.

Thus, b and i are presentational, while em and strong are semantic.

[felgall]

Perhaps an easy way to consider the difference is to think about how a web reader will speak the content based on the surrounding tags. With <em> and <strong> the reader can apply emphasis and strong emphasis to the content in the way that it says it. The web reader cannot speak in italic or bold and so there is no obvious way that the web reader should handle those tags - it would all depend on what you had in the style sheet to define how those thags should affect the way their content is spoken.

[cooper.semantics]

Being that they are two totally different tags, it is like comparing <font size="6">..</font> to a h1 tag.

If you want an element bold, use css to handle the styling. I really wish that the strong tag was not set to bold by default. I think it really confuses a lot of developers.

Listen to Tommy and Stephen.

[C. Ankerstjerne]

I to some extent disagree with the B and I tags being purely presentational. There are cases where it is semantically required for text to be italiced (and probably boldfaced as well). In these cases, it would be wrong to use CSS to add the effect.

[cooper.semantics]

http://htmldog.com/guides/htmlintermediate/badtags/

[cooper.semantics]

@C. Ankerstjerne - Could you show an example of when it is 'proper' to use a b or i tag?

[oddz]

Yeah… its never appropriate to use b or i in place or strong of em. Bold and italic describe presentation while em and strong outline hierarchy.

[AutisticCuckoo]

There are cases where it is semantically required for text to be italiced (and probably boldfaced as well).

Can you give an example? If you're thinking about typographic conventions, then it doesn't have to do with semantics. The semantic way to mark up the name of a ship would be <ship>Titanic</ship>, but HTML doesn't have that semantic richness. Since ship names are traditionally italicised, the correct way to mark it up in HTML would be <i>Titanic</i>.

Yeah… its never appropriate to use b or i in place or strong of em.

I'm sorry, but that's plain wrong. Em and strong denote emphasis. Thus <em>Titanic</em> would be wrong unless you really mean to emphasise the name, whereas <i>Titanic</i> is semantically neutral and only denotes italics. You could use <span class="ship">Titanic</span> and use CSS to make it italic, but you'd gain nothing.

Bold and italic describe presentation while em and strong outline hierarchy.

Hierarchy? How so? They denote semantic emphasis, that's all.

[C. Ankerstjerne]

My favorite example is book titles in bibliographical references. As per ISO 690, these has to be italicised, so using CSS would not convey the full meaning.

[cooper.semantics]

@C. Ankerstjerne

You might be correct but, would 'emphasizing' a title be incorrect?

Could you not replace the <i> with an <em> and actually convey meaning?

[logic_earth]

@C. Ankerstjerne

You might be correct but, would 'emphasizing' a title be incorrect?

Could you not replace the <i> with an <em> and actually convey meaning?

Only if you are emphasizing the title of the book. You are not emphasizing a book title in bibliographical references.

[C. Ankerstjerne]

As logic_earth says, it isn't emphasised, only italicised. ISO 690 doesn't mention anything about emphasis.

[AutisticCuckoo]

My favorite example is book titles in bibliographical references. As per ISO 690, these has to be italicised, so using CSS would not convey the full meaning.

If it's a reference, then it should be marked up with <cite>, which – coincidentally – is rendered in italics by default.

[C. Ankerstjerne]

CITE refers to the entire bibliographical reference, not just the title. Marked up properly, it would be styled as such:

<cite>
  LOMINADZE, DG.
  <i>Cyclotron waves in plasma</i>.
  Translated by AN Dellis; edited by SM Hamberger.
  1st ed. Oxford : Pergamon Press, 1981.
  206 p.
  International series in natural philosophy.
  Translation of : Ciklotronnye volny v plazme.
  0-08-021680-3
</cite>

This can be extended with my proposed microformat:

<cite>
  <span class="primary_responsibility">LOMINADZE, DG</span>.
  <i><span class="title">Cyclotron waves in plasma</span></i>.
  <span class="subordinate_responsibility">
    <span class="translator">Translated by AN Dellis</span>;
    <span class="editor">edited by SM Hamberger</span>.
  </span>
  <span class="edition">1st ed.</span>
  <span class="publication">
    <span class="city">Oxford</span> : 
    <span class="publisher">Pergamon Press</span>,
    <span class="year">1981</span>
  </span>.
  <span class="extent">206 p.</span>
  <span class="series">International series in natural philosophy</span>.
  <span class="notes">Translation of : Ciklotronnye volny v plazme</span>.
  <span class="standard_number">
    <span class="isbn">0-08-021680-3</span>
  </span>
</cite>

[cooper.semantics]

Your example, by default would make the entire block of text italic. So the <i> tag is kind of useless, since the whole debate is probably with styles turned off. Otherwise, you would use css to style the entire thing correct?

Also, this would not validate unless you wrapped a block level element around the cite tag.

[C. Ankerstjerne]

That the entire block is italicised by default is an unfortunate consequence of using the proper semantics. The CITE element isn't the only case where this is true. Semantics always comes before presentation, and since it is easily corrected with CSS, I don't consider it a significant concern.

It is true that the CITE element has to be a descendant of a block-level element, but I didn't want to include this in the example, to avoid cluttering it. Usually, I would place each CITE within an LI of an OL or UL, depending on the type of reference used.

[oddz]

Autistic Cuckoo wrote:

Hierarchy? How so? They denote semantic emphasis, that's all.

Contrast leads to hierarchy and emphasis is a form of contrast.

[AutisticCuckoo]

Contrast leads to hierarchy and emphasis is a form of contrast.

How does contrast lead to hierarchy?

[logic_earth]

A hierarchy (in Greek: Ἱεραρχία, derived from ἱερός — hieros, 'sacred', and ἄρχω — arkho, 'rule') is a system of ranking and organizing things or people, where each element of the system (except for the top element) is a subordinate to a single other element.

emphasis does not create a hierarchy what it does is gives more weight to a word or parse.
Headers and list create a hierarchy.

[oddz]

incorrect

Contrast is to be different. A h1 only creates a hierarchy because it is different not because it is a h1. Than again I guess I'm speaking visually so never mind.

[logic_earth]

You are almost funny when you make up these wild conclusions.
I'm guessing you never wrote an outline for an article?
Or taken a class on English?

Giving something emphasis gives it more weight, we do it all the time when we speak.
For example telling jokes, we give the punch line more emphasis.

It does not define a hierarchy, if it did it would be included in an outline.

[AutisticCuckoo]

Than again I guess I'm speaking visually so never mind.

An HTML document has a structural hierarchy and a logical hierarchy. HTML has nothing to do with visuals, with the exception of some presentational element types (most of which are deprecated).

The structural hierarchy is made up from the nesting of elements. The root is the html element which has two children: head and body. These, in turn, have other children nested in a hierarchical structure.

The logical hierarchy is made up from headings, corresponding to the 'outline' that logic_earth speaks of. It describes the logical disposition of the content. And it's the heading levels that make up this logical hierarchy; not their appearance, which is undefined by HTML anyway.

I'm afraid I still fail to see the 'visual' hierarchy and how emphasis would affect it.

[oddz]

Like I said – logical hierarchy yes – visual hierarchy no.

Contrast is just to be different.

A heading with a larger point size than the surrounding text is typographic contrast. This typographic contrast visually communicates to the viewer that the larger item is more dominate than the surrounding text. That's just a simple example, but it all comes down to contrast in line,color,shape,texture or value. If the majority of elements on a page are similar and there is one contrasting item visually the eye will go there first. The eye tends to follow a path from more to less greater areas of contrast.

Giving something emphasis gives it more weight, we do it all the time when we speak.
For example telling jokes, we give the punch line more emphasis.

EXACTLY, so through contrast you can visually communicate emphasis.

When people emphasis something when they speak their voice changes which is contrast. The listener than identifies it as more important because of that break from the normal speech pattern.

Again… I'm not arguing logical hierarchy, but visual.

I'm sure if you read this post before reading it your eyes went to the bold areas. This is because they contrast everything else in visual weight. If they did not have a contrasting visual weight your eyes wouldn't have immediately identified them as areas of emphasis.

[AutisticCuckoo]

A heading with a larger point size than the surrounding text is typographic contrast.

But this has nothing whatsoever to do with HTML. HTML doesn't define the point size for headings. That's a job for CSS.

HTML defines the logical hierarchy based on heading levels.

I'm sure if you read this post before reading it your eyes went to the bold areas.

Actually, no. I'm a very linear reader.