In praise of the <B> tag

HTML & CSS
1

(…and I suppose the <i> tag too).

With all the clamor for deprecating the <b> tag and officially replacing it with the CSS {font-weight:bold;} attribute I thought I would chime in and collect a few opinions on the subject while I’m at it. Not counting the fact that sometimes <B> and <I> can be used as semantically neutral hooks ( to avoid the longer <span class=“whatever”>), I am personally inclined to believe that semantically neutral bold or italic content is both useful and necessary.

For example: the other day I was coding a page that contained a simple login form and noticed I that instinctively I used <b> tags around the words: “password” and “login”. I knew I would apply styles both to match the look of the rest of the page, but also felt that both of these words should stand out even if CSS was turned off. I mean, it makes sense even a pure text document, where to log in should be made easy to spot for users. I needed the extra tag anyway, to complete the sliding door effect I was going for, at the same I could hear the voices of code critics saying… “you should use a span” or “the <b> and <i> tags are on their way out”… it really made no sense to use a <strong> tag… I mean really… in a label a password/ log in field? So I make the case that sometimes semantically neutral, CSS independent , tags which allow for basic visual distinction of content ( such as bold and italic) are a good thing.

Opinions, comments, dissents or support?

2

there’s nothing wrong with using B or I if what you want is a tag to show a different font style in a situation where emphasis not appropriate

sure, SPAN works for that purpose, but B and I have, as you say, the additional benefit that they will “work” without css

of course, if emphasis or emphasis is appropriate, then go ahead and use STRONG or EM

3

Although I don’t think you should be using <b> for this particular task, I most definitely don’t think you should be using a span. Why not use the <label> that the “login” and “password” text is wrapped in?? “label { font-weight: bold; }”.

I don’t know about people saying <b> and <i> are on their way out, but those people are wrong. HTML5 has even given <b> and <i> added semantics. <b> is for stylistically offset text at the paragraph level, which qualifies as a legitimate typographical convention. <i> is for marking up text which is to be read in an alternate mood, and this is essentially what italic text meant all along, in any piece of writing - however, this is beside the point now. For example, a browser could default to rendering <i> with an underline instead of italics if it wanted to.

Personally, I don’t think that sacrificing your semantics just to ensure that a label stays bold, even when styles are disabled, is worth it.

4

Your question might have some legitimity. I’ve recently seen an example (http://www.sitepoint.com/forums/showthread.php?t=724222) by Rayzur where he uses (and defends the use of) b, which, quite frankly, surprised me.

b:Bold and i:Italic are 100% pure presentational in nature, having no semantic meaning at all. This is to say they are not semantically neutral at all, even as empty elements. They are just not semantic. A reson for which “all the clamor for deprecating”.

As it was pointed out before, strong and em are semantic and also work w/o CSS.

But… I also don’t see your example being a good one. Those username and password elements aren’t the ones that suppose to stand out. Login, as a title for a subsection, as a caption for a group of elements, now that’s a word worth focusing on making it more visible w/o CSS. With CSS, you can play all you want.

Spacing elements, proper content grouping and separation, these are the ways to make that content accessible. Making words bold will not be the way. You should be asking about br and hr rather then about b and i.

I also don’t think Ijj get it when you said you want an effect even in the absence of CSS. Also, he sounds a bit confusing: first, he defends b and i as semantic, w/ html5 making them evem more semantic, then he goes and says you should not use them since they will break your semantic…?

5

I am personally inclined to believe that semantically neutral bold or italic content is both useful and necessary.

Correct, especially typographic reasons. Typography of certain types of words do NOT fall under presentation. They are part of the document that way. This is why in school we were pestered so much to “style” the bibliography/sources pages of our papers correctly while nothing was said about any “styles” of the rest of the paper.

As has been stated in numerous threads around here, book titles, names of ships, foreign words, Latin species names, and the like should not be represented with styled span tags. <b> and <i> are NOT deprecated precisely for this reason.

No comment necessary for sandbags: empty b and i elements not only say nothing, they say nothing. Lawlz. Great for holding background images, less typing than span.

I also don’t think Ijj get it when you said you want an effect even in the absence of CSS.

Mostly that if you are indeed writing for all user agents, you think whether you are relying on CSS to convey meaning (though, yeah, styles always are able to affect meaning in some way). This gets into the realm of the semantic br element.

But… I also don’t see your example being a good one.

Agreed. I’d do the above-mentioned bold-styles label tags. Especially since the reason is to “match the rest of the page”. I’ve started boldening labels more often based on usability studies, but the wide range of user agents and user-made stylesheets means I’m not going to worry about that “extra” usability push not being translatable without (my) CSS.

You should be asking about br and hr rather then about b and i.

Yes, those are also interesting tags, and deserve the same discussion… but I think they get less attention because rumours of their deprecation aren’t circulating : )

6 
<span lang="ro"><strong>Îmi place</strong> de aceast&#259; <em>pisic&#259;</em> istea&#355;&#259; (<span lang="nl"><strong>Stomme poes</strong></span>), dar uneori nu prea avem acelea&#351;i p&#259;reri!</span>

I’m not a lazzy person. I can prove it. I like to use empty <h1> as semantically neutral elements :wink:

7

[ot]

I like to use empty <h1> as semantically neutral elements

I propose empty <blockquote> elements! Time to roll up the sleeves, comrade!![/ot]

8
Off Topic:

^ <pre> is as far as I will go! I’m not that diligent either! :lol:

9

The semantics HTML5 defines do not fit the situation he described, thus it would be semantically incorrect for him to use them. Furthermore, the other point I made was, given the fact that the semantics have been extended beyond simply, “italic” and “bold”, a user agent’s default stylesheet could begin to render these elements any way they wanted. So the justification of using <b> to guarantee that elements are bold even when styles are disabled doesn’t work.

10

Eric Meyer spoke about this a while ago and I tend to agree with him.:slight_smile:

11

There is a serious misunderstanding here.

http://www.w3.org/TR/html5-diff/

1.2. Backwards Compatible

HTML5 is defined in a way that it is backwards compatible with the way user agents handle deployed content. To keep the authoring language relatively simple for authors several elements and attributes are not included as outlined in the other sections of this document, such as presentational elements that are better dealt with using CSS.

User agents, however, will always have to support these older elements and attributes and this is why the HTML5 specification clearly separates requirements for authors and user agents. For instance, this means that authors cannot use the isindex or the plaintext element, but user agents are required to support them in a way that is compatible with how these elements need to behave for compatibility with deployed content.

Since HTML5 has separate conformance requirements for authors and user agents there is no longer a need for marking features “deprecated”.

http://www.w3.org/TR/html4/index/elements.html

B: bold text style
I: italic text style

Things are pretty clear for anyone who wants to see straight. IF you want to find an excuse for doing a thing because it fits with your need, nobody is to blame. But you should put the right tag on it.

This means that

BIG: large text style
SMALL: small text style
TT: teletype or monospaced text style

will never be tagged as deprecated by HTML5 as well.

As oppossed to the

EM: emphasis
STRONG: strong emphasis
for which we’ll never have grounds for deprecation.

One food for thought:

CENTER: shorthand for DIV align=center
was deprecated by html 4.01, while html5 introduces a series of these shorthand DIVs: nav, article, header, footer etcetera.

Also, Eric can be wrong too. And he’s the first to admit it. His biggest blunder is the CSS reset, by his own words.

So, a simple interpretation if often the correct one: text style elements are deprecated.

12

http://html5doctor.com/i-b-em-strong-element/

13

[ot]TARP has a new semantic meaning for AIG CEOs: The World Islands (Dubai) :wink:

Prisons have a new semantic meaning: rehabilitation programs :wink:

That’s pretending. I don’t pretend much this days. :)[/ot]

14

[ot]

That’s pretending.

I thought it was called “political correctness” [/ot]

15

The words ‘login’ and ‘password’ could have had logically emphasis not made pretty by slapping a decoration on them. They are probably FORM controls not visual rendering; B is a font/text style.

If you are using vanilla XHTML Basic 1.0 as default you cannot use B for obvious reasons, as it equates to { font-weight: bolder } which of course is considered a style. Though I don’t know where anybody got the idea they were being deprecated came from as that would be foolish and certainty with regards to the I element.

16

There’s a big difference there.

<div align=“center”> or <center> are purely presentational constructions, that say nothing about their contents, which is why they have no place in HTML and have been deprecated in favour of CSS.

Whereas <nav>, <article>, <header> and <footer> are not shorthand for a particular method of presentation - they are unlikely to even have a default presentation beyond {display:block;} - they are semantic elements that add additional meaning to the contents, and as such are absolutely right to be in the HTML. Additional styling can then be done by CSS.

17

It appears we agree at least on some points.

And will never be in html5.

http://www.w3.org/TR/html5-diff/

Since HTML5 has separate conformance requirements for authors and user agents there is no longer a need for marking features “deprecated”.

Since there are seperate conformance requirements for authors, they should, in fact, consider presentational elements deprecated. Which b and i certainly are, no matter what 10 step program they take to redoscover them self.

This is certainly arguable, both sides. The fact of the matter remains: <center> and <header> are divs used wrong. One for presentation (wait, div is suppossed to be a hook for presentation, right?; so <center> somewhat fits?), but only for technical/implementation resons, and one for being attributed semantic meaning, which goes against html 4.01 and xhtml 1.0 specs, but can also be challenged for technical/implementation resons. What’s so different between div align=“center” and div top=“0” or div bottom=“0” ? (What about div align=“top” or div align=“bottom” ? Semantics can be played with endlessly unless we cut to the chase.)

Which is worst? I vote for html5 specs which imposes instances of the semantic-less div as semantic, and by doing so, creates two opposing and competing standards for the div, that are to be used for at least a decade from now on. Never miond that <nav>, <header>, <footer> are WAYYYY to specific to fit in the html theory.

18

…what?

19

<header> is an instance of <div>, like how <b> is an instance of <strong>? Have you not known that?

Since <div> is semantic-less, so should <header> be.

<center> on the other hand, is completely semantic-less, it’s just <div> used as a hook for presentation. Only being so specific makes it too presentational.

And we’ll have web pages written in html 4.01 and xhtml 1.0 using <div> as it should be, and we’ll have html5’s special divs, like <header>, oppossing the html4/xhtml1 definitions of div, specific instances or not, by being semantic!

20

Please keep the discussion civil or it will result in and interesting thread being closed and infractions issued. (I have removed some posts already.)

You can argue your case as strongly as you like but refrain from personal insinuations.

If your comments are off topic then they are “Off Topic” and sticking them inside “Off topic” boxes doesn’t make them any better.

With a topic like this there will never be an outright winner/answer so respect the other person’s opinion please.