Why is the <nobr> deprecated?

Question

I understand that this tag could easily be replaced with <span class="nowrap"> and a little bit of CSS, but in real life markup I often find that <nobr> tag is more appropriate. It's not about style, it's about content. <nobr>V. V. Putin</nobr> for example (in russian typography last name and first name shouldn't be line breaked, I think similar rules apply to other languages).

I guess that deprecation means there's something better but I don't see how styling is better than separate tag. Of course there are places where CSS should be used. Do I miss something?

Heldentenor

My understanding has been that HTML tags are for semantics. Having a tag that does a nowrap effect when we already have CSS to do that doesn't really provide any semantic benefit. – Pulchi

Your example is the definition of style; russian typographical rules are rules of style. – Copter

you could assign a class .nobr { white-space:nowrap; } – Pelias

The worst part of this is probably that MDN is filled with incorrect info on nobr. Browsers support it fine, but in my case, angulars template engine will not accept the tag. Oh well :( – Dorchester

Definitely a style thing. You should use a custom tag (support coming I've heard) or class to indicate the semantic meaning (i.e. <name> or <span class="name">), then have a russian_typography.css sheet that applies the style rules from Russian typography to your semantic elements. – Correct

Note that the answer suggested by @Pelias is no better than using the nobr tag. It still embeds style-content where you should only have semantic content. Using a nobr mixin in LESS or SASS does make a lot of sense. Then just apply it to all elements (or elements with semantic classes) that the style (e.g. russian typography) says shouldn't break. – Correct

The why is explained, but if you need to you can just keep using it. Add nobr {white-space:nowrap;} to your css and you're good to go. (for upward compatibility reasons html allows styling of unknow elements, so even if the browser doesn't know nobr, you can still style it to behave as such). Note: there's no dot before nobr so you can just use <nobr> like before. Also: never use <span class="nobr"> because nobr does not describe the content, it only describes lay-out-behavior. You'd be better off with somehing like <a class="textbutton">. – Unshapen

Answer 1

It isn't deprecated because it was never standard in the first place.

HTML is (in theory) a semantic markup language. It describes the structure and semantics of a document along with relationships to other resources.

HTML is not supposed to describe presentation. A bunch of presentational features were added during the browser wars. Some of these became standardised. Most of them were subsequently deprecated when CSS came along.

CSS is a language for describing presentation. When you have a chunk of text that shouldn't have a line break in it, that is usually a matter of presentation so CSS is the right place to do it.

The exceptions are usually handled by non-breaking spaces ( ).

Blume

@Exsanguinate — Yes, you can: jsbin.com/legamedaxe/1/edit?html,css,output – Blume

@ Quentin — well, 99.99% percent of people on the Earth use simple dash on their keyboard, they do not know anything about typographics and non-breaking hypen :) Also, I'm not sure all fonts has this type of hypen. – Exsanguinate

It's worth noting that while Quentin says that nobr "isn't deprecated", the WhatWG and W3 HTML specs both list it in their "Obsolete features" section (see html.spec.whatwg.org/multipage/obsolete.html#nobr) and state that it "must not be used by authors". I guess that's not a "deprecation" in the sense usually used by programmers (where a "deprecated" feature is one that you are officially advised not to use but which is still guaranteed to work), but it is a deprecation in the sense in which that word is used in plain English and in all fields besides programming. – Gurtner

The "semantic" stuff is great in theory, but in practice, visual formatting matters, and any semantic engine powerful enough to "self format" properly would have a giant learning curve that would make rocket science look like child's play. I don't mean to rant, but the standards committee needs to get out of their ivory tower sometimes. This isn't the only pet peeve; I gotta list of practicality faux-pas's. – Undervest

Answer 2

You may use the obsolete/non-standard <nobr> HTML tag — if you define it in CSS.

It's virtually guaranteed that this element name will never be repurposed for any task other than its original behavior, and this name is descriptive of the action you'll define in CSS, making it intuitive for people reviewing your HTML.

 Warning: Custom/obsolete elements will make your code fail to validate as strict HTML.

Your CSS will need to look like this:

nobr  {  white-space: nowrap;  hyphens: none;  }

This defines the white-space as nowrap, which suppresses line breaks within white space and the hyphens as none, which prevents breaking within words (including ignoring characters within words that "suggest line break points").

You may or may not want (or need) the hyphens: none; part, but I have added it for completeness since it appears some implementations of <nobr> (used to?) also suppress hyphenation while white-space: nowrap; does not do that.

Allaround

Nice idea, but its mostly pointless because nearly all browsers support this tag, even internet explorer 4 does ;) – Malliemallin

As I noted in my answer, browsers aren't consistent with how they treat hyphens within <nobr> tags, so I do think this is still helpful. Adding white-space: nowrap is just being thorough and explicit, but I agree that it's not currently needed (though that may change in the ~distant future). – Allaround

Adam, are you sure? In what way are browsers inconsistent with how they treat hyphens within <nobr> tags? I've never noticed any differences between browsers in that respect. – Aurilia

@DaveBurton – I am not 100% sure because I haven't used <nobr> in ~20y. I'm also not sure how this is implemented in modern browsers. If memory serves, some browsers would break words with hyphens in this tag while others would not. – Allaround

Answer 3

Foolishness. That's the only reason.

<nobr> is universally supported, because it is needed, to convey the fact that the enclosed content is semantically a single unit, so it should not be split across multiple lines.

Aurilia

If it is semantically a single unit, then use a span. If you just want it to not be broken, use   – Tigges

The purpose of <span> is to provide a way to reference a section of text without implying semantics, e.g. for specifying style (presentation). <span> and <div> do not convey semantic info (though in html5 we have <article> etc. for that).   is handy in some specific cases, but it is not a general solution, for several reasons: 1. because there's no &nbyhphen; (there is ‑ but that's obviously awful); 2. it doesn't work for user-entered text; 3. It has undesirable side-effects, e.g., it subtly alters what is copied/pasted. – Aurilia

Sure, span itself has no semantic meaning, but if you apply classes or attributes to it then you're defining its semantics. As to your points against  , number 2 is not true (you can replace characters before printing), and number 3 is false too (it does not alter it, the non-breaking space gets actually copied, which is correct). I'm not sure about number 1, but I'll take your word for it. – Tigges

Can you give me an example of something that should semantically never be broken? What if my style guide says it should be broken? This is the point of the separation of style from content. If you have semantic elements that shouldn't be broken according to your style guide (full-name, line-of-code, etc, etc.), you should target those elements in the CSS implementation of your style guide and apply the appropriate non-breaking styles to them. – Correct

A common example of an entity which should never be broken, because breaking it into pieces also breaks it functionally, is a URL. A URL which is broken into pieces won't work anymore. That's a semantic change, not a mere syntax or style change. Another example would be a passphrase, in a system in which line breaks are not ignored. If "abc/def" is not equivalent to "abc/<br>def" then you MUST prevent the string from being broken into parts. That's a semantic requirement, not a mere matter of style. – Aurilia

A simple example of text that should not NEVER be broken automatically is several sorts of commandline script code. e.g. in windows batchfile code it would make a uge difference if you wrap commands in "IF" and "FOR" on the next lines – Malliemallin

The presumption that white space has a fixed semantic meaning is common in English and modern programming languages. The further away you get from English Text, the less likely that presumption is to be universally true. – Sarto

Answer 4

I found this interesting and very explaining comment on a w3c mailing list:

<NOBR> cannot be deprecated as it has never been part of even transitional W3C HTML versions; it is purely proprietory.

Yep. So it never was and never will be part of the spec. Just something 'missing' added using CSS.

Capias

Answer 5

The proper way to achieve what you want is to declare that "V. V. Putin" is a proper noun, and define in CSS that such a proper noun should not be line breaked.

<span class="propernoun">V. V. Putin</span>

and in CSS you would define

.propernoun {
  white-space: nowrap;
}

Since... HTML is not about style, it is about content. Basically, this is the same as what the OP suggested, but the nowrap in class="nowrap" describes a presentational property in html which should be in the stylesheet.

Ivar

Hyphens are not white space. The fact specifying a CSS style attribute for "white-space" also affects hyphens is another bug in the spec. – Aurilia

This should be the accepted answer. Nice job @vortex! – Correct

Answer 6

That's because a proper tag should be semantically useful, when <nobr> doesn't have any semantics apart from its style. I guess that's the same reason why <center> and similar styling tags were deprecated.

Adria

I agree. Style values should only be done by CSS. HTML is all about symantics. The tag needs to contain meaningful information about the content – Kolosick

I disagree. nobr is not mere style, it conveys semantic information, indicating that the enclosed content is semantically a single unit, and for that reason it should not be broken across a line boundary. – Aurilia

@DaveBurton And what are the semantics of a "single unit"? What if someone else's style guide says that "single units" should be broken? This is, of course, the point of separating style from content. Worse, what you're implying semantically is that anything wrapped in nobr is "the same thing", despite the fact that you will obviously use nobr for vastly "different things" (i.e. things with different semantics). – Correct

Consider your sentence above modified slightly: "center is not mere style, it conveys semantic information, indicating that the enclosed content is semantically a centered object". Just throwing in the word "semantically" doesn't change that we're talking about style rather than use. Good semantic design is a lot like duck-typing: what can this be used for, not how should this look when it's used (that's applied through the style-sheet). – Correct

Or more generally, you can think of style as the "the material element rendered in context" and semantics as the "platonic form" of the object. Your html should be the form, then you can instantiate with many different styles (look at all the different styles of dog!). – Correct

center doesn't convey semantic information, it just says where to display something. "Semantically a centered object" is an oxymoron, like "linguistically an electronic device." It makes no sense. ‍‍‍‍‍‍ ‍‍ nobr, in contrast, says that the text within it is a single, indivisible whole. I often wrap URLs in nobr blocks, to prevent them from being displayed in pieces. If a URL is broken into pieces, then it is wrong, and it won't work. That's semantics, not mere syntax. ‍‍‍‍‍‍ ‍‍ A nobr block prevents the browser from changing something correct into something wrong, when displaying it. – Aurilia

Answer 7

As said, names shall not be breaked, due Russian typography: Thus there is some semantics. So as You said Yourself, instead of marking the name by <nobr>..</nobr> formatting tags, let's use meaningful <person>..</person> tags. And voilà, you can style the name as needed, i.e. by white-space: nowrap; rule for all pages, or for just the Russian localization.

Manriquez