TEXT TAGS AND A LITTLE CSS3 - HTML5 - page 42

A line break ( <br> ) forces a break in the lines of text. You can think of it as a single space
between lines, or if you're old school, a carriage return. HTML5 has added something new
called a line break opportunity. Sometimes you'll have a very long word, especially in URLs
and e-mail addresses. h e wbr element doesn't force a line break, but you can place the <wbr>
tag where you would like a word to break in case the page is compressed. h is consideration is
especially important for mobile devices because they have small screens. For example, suppose
you have a very long URL that is being shown as a non-linking description like,

www . eatatjoesfinerestaurant . com

If the link name is not broken up, and if the page is compressed, you'll see a big gap in the text
or the word broken where you don't want it to be. h e <wbr> tag helps you keep your text
broken where you want it. Consider the following script ( BasicBreaks.html in this
chapter's folder at www.wiley.com/go/smashinghtml5 ), which uses both of the
line-breaking tags:

<! DOCTYPE HTML >
< html >
< head >
< meta http - equiv = ”Content-Type” content = ”text/html; charset=UTF-8” >
< title > Adding ine Breaks and ine Break Opportunities </ title >
</ head >
< body >
< img src = ”logo.png” >< br >
This is text. You don't need a tag for Plain Old Text (POT). < br >
< br >
He said, “Sometimes you have extremely long words, and you want to make sure that
they break at appropriate places. For example, you have a long name for a URL like
www.eat < wbr > at < wbr > joes < wbr > fine < wbr > restaurant < wbr > .com, and if it has to break,
you want the break to appear in a particular place.” < br >< br >
He said, “Sometimes you have extremely long words, and you want to make sure that
they break at appropriate places. For example, you have a long name for a URL like
www.eatatjoesfinerestaurant.com, and if it has to break, you want the break to
appear in a particular place.” < br >< br >
< a href = ”anotherPage.html” > Click here for another page </ a >
</ body >
</ html >

46

By adding the two line-break tags, the page looks much better. h e paragraph that does not
use the <wbr> tag has a big gap in it where the long URL was not divided up into sensible
break points. Figure 3-2 shows how the page now appears.

Although it's still not perfect, it's a lot better than the original, even though two more para-
graphs were added. h e graphic is in the upper-let corner (as most logos are), the paragraphs
are separated by line breaks, and in the i rst paragraph using the long URL, the breaks are
where the <wbr> tag specii ed.