Lesson 1: Thinking HTML5 semantics CHAPTER 5 217
display on one line, but the keepWhiteSpace class preserves the white space by using the fol-
lowing style rule.
.keepWhiteSpace {
white-space: pre;
}This style rule is not compatible with all browsers, so you might want to use the <pre> ele-
ment to prevent white space normalization, as described next.Displaying preformatted content by using the <pre> element
The browser typically normalizes the HTML content by removing extra white space, line feeds,
and paragraphs from the rendered page. You will often need to provide blocks of text where
you want to maintain the existing format when it’s rendered. Use the <pre> element to pre-
vent the normalization of the HTML document, as shown in the following example.
<pre>
<code>
sayHello('Mom');
function sayHello(name)
{
alert('Hello ' + name + '!');
}
</code>
</pre>In this example, the <code> element provides semantic meaning to the content, and the
<pre> element prevents white-space normalization.Using the <var> element
The <var> element denotes a variable in a mathematical equation, as shown in the following
example.
<p>
The resistance <var>r</var> of a piece of wire is equal to the voltage <var>v</var>
divided by the current <var>i</var>.
</p>Using the <br /> and <wbr /> elements
The <br /> and <wbr /> elements are void elements, meaning that they cannot have any con-
tent and provide only a line break in your HTML document.
The <br /> element provides an immediate line break, which continues the document flow
on the next line of the browser.
The <wbr /> element, which is a word break, provides an indication to the browser that it
may insert a line break at this location. The browser decides whether to insert the break.