START A COURSE

The HTML and CSS Blog:

What You will Learn in this HTML5 Lesson

This is the third-in-a-series of lessons on new HTML5 tags. This lesson will teach you how to make your text more readable by controlling how long words break.

Optional word break

Optional Word Break

<wbr>

The new <wbr> tag is a Optional Word Break. This is a conditional word break; it is only used when the word doesn’t fit into one line. It’s useful in cases where you want want to indicate, “only break it if you have to, and when you do, break it here”.

The <wbr> element tells a browser it may (but is not required to) break a word into two lines here if it needs somewhere to break a line.

wbr tag

Word Break

Examples of Using Optional Word Breaks

You can improve the readability of your text by controlling where long words may hyphenate. For example, in a hyphenated phrase like “twenty-first century” you’d want to make sure the phrase didn’t break in an awkward location.

twent-
y-first century

Or:

twenty-first cent-
ury

So, you could place the <wbr> tag in the spot you’d like it to break (when it has to).

You can add the word break tag in your preferred break location:

twenty-<wbr>first century

And now the browser will break the word like this:

twenty-
first century

wbr word break tag

Soft Hyphen Special Character

&shy;

There is a special character code for a “soft hyphen” which only places the hyphen if it appears at the end of a line. This could be used with the preferred word break tag, so that long words break in comfortable spots, and also show a hyphen. Notice that just using the word break tag <wbr>  doesn’t cause a hyphen to appear. That may be good in some cases. For example, to indicate a preferred break location in a long web address, the word break tag <wbr>  would be ideal—you wouldn’t want an extra hyphen added to a web address.

But, if you would like to use the word break tag <wbr>  to break a really long word, you could also add the soft hyphen special character code and the hyphen would appear as needed, only if the word broke at the end of the line.

superextra <wbr>&shy; califragalisticexpadotious

 

The Easiest Way to Learn HTML and CSS
Hi! I'm Diane. I'm an experienced web design teacher in San Francisco. I produce music videos to help new coders learn HTML. I'm dedicated to helping you learn to code, with tons of songs, videos, tutorials and activities. All our tutorials are free and we're adding new lessons every day. Subscribe to get the latest post in your inbox.

HTML Lessons

©2013 Diane Presler. All rights reserved.