Constructing Content - HTML5 with CSS3 - page 122

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 br s 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.