CODEWITHSUNDEEP
csshtml
rlbond
rlbond

Reputation: 67779

Is there any difference between <span> and <b> with a well-specified CSS class?

Essentially, my question is, what is the difference between the two lines in the body of this HTML document?

<html>
<head>
 <style>
  .test {color:green; font-weight:normal}
 </style>
</head>
<body>

<b class="test">Test with b tag</b><br />
<span class="test">Test with span tag</span><br />


</body>
</html>

Upvotes: 0

Views: 3274

Answers (4)

ThiefMaster
ThiefMaster

Reputation: 318518

<b> and <strong> have the semantic meaning "should be displayed in bold" while <span> is a general-purpose inline element.

But from a technical point of view there are no real differences between those elements if the proper CSS is applied.

Upvotes: 2

sandeep
sandeep

Reputation: 92793

As per there functionally there is no such difference but there are some differences like this <b> use to generally bold the text without define font-weight:bold in css.It's easily print text in bold. But for <span> you have to define CSS.

Now the question which one is good. My answer is span because span was created for multiply styling but other tags like <b>, <strong>, <i>, <em> etc are created for represent attribute without using style. So, for an systematic mark if you only want to bold the text then <b> is good but if you want other properties like bold, italic,color etc. Then it's better to use .

As per W3C

The b element represents a span of text offset from its surrounding content without conveying any extra emphasis or importance, and for which the conventional typographic presentation is bold text; for example, keywords in a document abstract, or product names in a review.

Upvotes: 2

nycynik
nycynik

Reputation: 7541

They might look different, because they have default styles applied to them. Since your not removing all the styles before adding your styles, they will look different. And might also look different between browsers.

Upvotes: 0

JJJ
JJJ

Reputation: 33163

The <b> (or even better <strong>) contains semantic information that the text should be highlighted (printed in bold). <span> doesn't have the same connotation to it. If you disable the CSS styles from the document you'll see the <b> text still in bold, but the <span> in normal text.

The distinction is important especially to screen readers that (often) can convey the information to the user. Using spans with classes carry no such information through.

This doesn't mean that you should always use <strong> or <em>: if the purpose is purely stylistic and you're not emphasizing text, it's better to use classes.

Upvotes: 4

Related Questions