Foundation HTML5 with CSS3

Chapter 4

Required Attributes

The bdi element doesn’t require any attributes. The bdo element requires a dir attribute:

 dir: The direction in which the enclosed text should be read: either ltr or rtl

Optional Attributes

The bdo and bdi elements don’t have any optional attributes.

Line breaks: br and wbr

Long lines of text on a web page wrap naturally to a new line when they reach the edge of their container,

with the break occurring in the space between two words. However, you may sometimes need to force text

to wrap to a new line at a specific point. The br element creates a line break for just such occasions. It’s a

void element, so it has no text content and consists of a single tag, which you can optionally close with a

trailing slash (<br/>), XHTML-style.

You saw some line breaks when you read about the address element earlier in this chapter. Listing 4-42

shows another address, and this time its contents are all on a single line with brs inserted at strategic

points.

Listing 4-42. Contact information with inserted line breaks

<address>

Jon Hicks <br>Illustrator, cheese enthusiast <br>hicksdesign.co.uk

</address>

Browsers ignore carriage returns in markup, but will forcefully break a line of text where directed, as you

see in Figure 4-30.

Figure 4-30. The text wraps to a new line at the specified points

In the past, line breaks were often misused by stacking several in a row to increase white space between

elements on the rendered page, to form lists by breaking between items, and to simulate the appearance

of paragraphs by forcing line breaks between blocks of text. Don’t commit these presentational hacks. Use

CSS margins, padding, and positioning to add space, and mark up lists and paragraphs as lists and

paragraphs. You should use the br element sparingly and only when the text requires it.

The wbr element represents a line break opportunity, a point in an otherwise continuous word where

browsers may wrap it to a new line if necessary, to aid readability or prevent text from overflowing its

containing element on the rendered page. It’s a new element in HTML5 so older browsers don’t support it,

but most current browsers do. This is also a void element that can’t hold any contents and has no end tag.