What NBSP means and does

For such an easy to understand HTML entity, the non-breaking space (NBSP,  ) is being misused way too often.

Believe it or not, non-breaking spaces are just that — spaces where a line break will not occur. Meaning, you should not use them to add a bit of space between two words, sentences, or elements. Especially not elements.

What may at first glance seem like a meaningless issue can in fact contribute greatly to your site’s semantic and overall quality.

Besides piling up  ‘s to achieve what should be done using CSS and padding or margin, you can also sometimes see people using  ‘s to add an extra space between sentences. While it does increase readability in some cases and is especially effective for people with reading disabilities, using a space plus   to achieve double spacing is wrong. An example follows:

Lorem ipsum.  Dolor sit amet.

Which of course results in:

Lorem ipsum.  Dolor sit amet.

Notice the extra space between the sentences?

Instead of this, consider using other entities, as explained in Richard Rutter’s article Use a single word space between sentences. Bear in mind that, while some people prefer a bit of extra space between sentences, others will find it irritating. It creates a large gap, which a lot of people are not at all used to.

One of the main reasons perhaps, why people use non-breaking spaces the way they shouldn’t, is the popular W3Schools, where you can read the following:

Normally HTML will truncate spaces in your text. If you write 10 spaces in your text HTML will remove 9 of them. To add spaces to your text, use the   character entity.

Yup, that’s wrong. Ten spaces will become one, but you shouldn’t use the   to get around that. Here’s an example where you should use a non-breaking space:

Mr. Smith

Which basically means a space will occur, but a line break will not, between words “Mr.” and “Smith”.

To expand a tiny bit more on the issue of writing, I urge you to pay more attention to punctuation. You web site will seem far, far less professional if your punctuation is not up to par.

Next Post:
Previous Post: