This chapter is from the book

This chapter is from the book

Other Elements

This section covers other elements that you can include within your text, but which typically have fewer occasions to be used or have limited browser support (or both).

The u element

Like b, i, s, and small, the u element has been redefined in HTML5 to disassociate it from its past as a non-semantic, presentational element. In those days, the u element was for underlining text. Now, it’s for unarticulated annotations (sounds a little befuddling, I know). HTML5 defines it thus:

The u element represents a span of text with an unarticulated, though explicitly rendered, non-textual annotation, such as labeling the text as being a proper name in Chinese text (a Chinese proper name mark), or labeling the text as being misspelt.

Here is an example of how you could use u to note misspelled words:

<p>When they <u class="spelling">
recieved</u> the package, they put
it with <u class="spelling">there
</u> other ones with the intention
of opening them all later.</p>

The class is entirely optional, and its value (which can be whatever you’d like) doesn’t render with the content to explicitly indicate a spelling error. But you could use it to style misspelled words differently (though u still renders as underlined text by default). Or you could add a title attribute with a note such as “[sic]”—a convention in some languages to indicate a misspelling.

Use u only when an element like cite, em, or mark doesn’t fit your desired semantics. Also, it’s best to change its styling if u text will be confused with linked text, which is also underlined by default .

Like links, u elements are underlined by default, which can cause confusion unless you change one or both with CSS.

The wbr element

HTML5 introduces a cousin of br named wbr. It represents “a line break opportunity.” Use it in between words or letters in a long, unbroken phrase (or, say, a URL) to indicate where it could wrap if necessary to fit the text in the available space in a readable fashion. So unlike br, wbr doesn’t force a wrap; it just lets the browser know where it can force a line break if needed.

Here are a couple of examples:

<p>They liked to say, "FriendlyFleas
andFireFlies<wbr/> FriendlyFleasandFireFlies<wbr />FriendlyFleasa
ndFireFlies<wbr />" as fast as they
could over and over.</p><p>His favorite site is this<wbr />
is<wbr />a<wbr />really<wbr />
really<wbr />longurl.com.</p>

You can type wbr as either <wbr /> or <wbr>. As you might have guessed, you won’t find many occasions to use wbr. Additionally, browser support is inconsistent as of this writing. Although wbr works in current versions of Chrome and Firefox, Internet Explorer and Opera simply ignore it.

The ruby, rp, and rt elements

A ruby annotation is a convention in East Asian languages, such as Chinese and Japanese, and is typically used to show the pronunciation of lesser-known characters. These small annotative characters appear either above or to the right of the characters they annotate. They are often called simply ruby or rubi, and the Japanese ruby characters are known as furigana.

The ruby element, as well as its rt and rp child elements, is HTML5’s mechanism for adding them to your content. rt specifies the ruby characters that annotate the base characters. The optional rp element allows you to display parentheses around the ruby text in browsers that don’t support ruby.

The following example demonstrates this structure with English placeholder copy to help you understand the arrangement of information both in the code and in supporting and non-supporting browsers. The area for ruby text is highlighted:

A supporting browser will display the ruby text above the base (or possibly on the side) without parentheses because it ignores the rp elements.

A non-supporting browser displays the rt con-tent in parentheses in the normal flow of content.

The bdi and bdo elements

If your HTML pages ever mix left-to-right characters (like Latin characters in most languages) and right-to-left characters (like characters in Arabic or Hebrew), the bdi and bdo elements may be of interest.

But first, a little backstory. The base directionality of your content defaults to left-to-right unless you set the dir attribute on the html element to rtl. For instance, <htmldir="rtl"lang="he"> specifies that the base directionality of your content is right-to-left and that the base language is Hebrew.

Just as I’ve done with lang in several examples throughout the book, you may also set dir on elements within the page when the content deviates from the page’s base setting. So if the base were set to English (<html lang="en">) and you wanted to include a paragraph in Hebrew, you’d mark it up as <p dir="rtl" lang="he">...</p>.

With those settings in place, the content will display in the desired directionality most of the time; Unicode’s bidirectional (“bidi”) algorithm takes care of figuring it out.

The bdo (“bidirectional override”) element is for those occasions when the algorithm doesn’t display the content as intended, and you need to override it. Typically, that’s the case when the content in the HTML source is in visual order instead of logical order.

Visual order is just what it sounds like—the HTML source code content is in the same order in which you want it displayed. Logical order is the opposite for a right-to-left language like Hebrew; the first character going right to left is typed first, then the second character (in other words, the one to the left of it), and so on.

In line with best practices, Unicode expects bidirectional text in logical order. So if it’s visual instead, the algorithm will still reverse the characters, displaying them opposite of what is intended. If you aren’t able to change the text in the HTML source to logical order (for instance, maybe it’s coming from a database or a feed), your only recourse is to wrap it in a bdo.

To use bdo, you must include the dir attribute and set it to either ltr (left-to-right) or rtl (right-to-left) to specify the direction you want. Continuing our earlier example of a Hebrew paragraph within an otherwise English page, you would type <p lang= "he"><bdo dir="rtl">...</bdo></p>. The bdo element is appropriate for phrases or sentences within a paragraph. You wouldn’t wrap it around several paragraphs.

The bdi element, new in HTML5, is for cases when the content’s directionality is unknown. You don’t have to include the dir attribute, because it’s set to auto by default. HTML5 provides the following example, which I’ve modified slightly:

This element is especially useful when embedding user-generated content with an unknown directionality.

In this example, usernames are shown along with the number of posts that the user has submitted. If the bdi element were not used, the username of the Arabic user would end up confusing the text (the bidirectional algorithm would put the colon and the number “3” next to the word “User” rather than next to the word “posts”).

If you want to learn more on the subject of incorporating right-to-left languages, I recommend reading the W3C’s article “Creating HTML Pages in Arabic, Hebrew, and Other Right-to-Left Scripts” (www.w3.org/International/tutorials/bidi-xhtml/).

The meter element

The meter element is another that is new thanks to HTML5. At first glance, it seems very similar to the progress element, covered next, which is for indicating “the completion progress of a task” (to quote the spec).

In contrast, you can use meter to indicate a fractional value or a measurement within a known range. In plain language, it’s the type of gauge you use for the likes of voting results (for example, “30% Smith, 37% Garcia, 33% Hawkins”), the number of tickets sold (for example, “811 out of 850”), a numerical test grade (for example, “91 out of 100”), and disk usage (for example, “74 GB out of 256 GB”).

HTML5 suggests (but doesn’t require) that browsers could render a meter not unlike a thermometer on its side—a horizontal bar with the measured value colored differently than the maximum value (unless they’re the same, of course). Firefox, one of the browsers that supports meter so far, does just that . For non-supporting browsers, you can style meter to some extent with CSS or enhance it further with JavaScript.

A browser, like Firefox, that supports meter displays the gauge automatically, coloring it based on the attribute values. It doesn’t display the text in between <meter> and </meter>. As seen in the last example, if you include title text, it displays when you hover over the meter.

Although it’s not required, it’s best to include text inside meter that reflects the current measurement for non-supporting browsers to display .

The meter element doesn’t have defined units of measure, but you can use the title attribute to specify text of your choosing, as in the last example. As is usual with title text, browsers display it as a tooltip .

TIP

meter supports several attributes. The value attribute is the only one that’s required. The min and max attributes default to 0 and 1.0, respectively, if omitted. The low, high, and optimum attributes work together to split the range into low, medium, and high segments. The number assigned to optimum indicates the optimum position within the range, such as “0 brake pad wear” in one of the examples. Set optimum in between if neither a low nor a high value is optimal.

TIP

At the time of this writing, browser support of meter is still evolving: It’s not supported by Internet Explorer, mobile Safari (iOS devices), or Android’s browser. This partially explains why you don’t yet see it much in the wild. Feel free to use it, but just understand that these browsers will render the meter text rather than the visual gauge by default . See http://caniuse.com/#feat=progressmeter for the latest browser support.

TIP

The style of the gauge that each supporting browser displays may vary.

TIP

Some people have experimented with styling meter CSS for both supporting and non-supporting browsers. Search online for “style HTML5 meter with CSS” to see some of the results (note that some use JavaScript).

TIP

The meter element is not for marking up general measurements—such as height, weight, distance, or circumference—that have no known range. For example, you cannot use it for the following because the number of miles walked isn’t gauged against a range: <p>I walked <meter value="4.5">4.5</meter> miles yesterday.</p>.

TIP

Be sure not to mix up your uses of the meter and progress elements.

The progress element

The progress element is yet another of the new elements in HTML5. As stated earlier, it indicates the completion progress of a task. Think of a progress bar, like the kind you might see in a web application to indicate progress while it is saving or loading a large amount of data.

As with meter, supporting browsers automatically display a progress bar based on the values of the attributes . And again like meter, it’s usually best to include text (for example, “0% saved,” as shown in the example) inside progress to reflect the current progress for older browsers to display , even though it’s not required.

A browser, like Firefox, that supports progress displays the progress bar automatically, coloring it based on the value. It doesn’t display the text in between <progress> and </progress>. The value attribute is set to 0 in this example, so the bar indicates no progress.

IE9 doesn’t support progress, so instead of a colored bar, it displays the text content inside the element. You can change the look with CSS.

A full discussion of progress is beyond the scope of this book, since typically you would dynamically update both the value attribute and the inner text with JavaScript as the task progresses (for example, to indicate that it’s 37% completed). The visual results are the same whether you do that with JavaScript or code it that way in the HTML initially; for example, <progress max="100" value="37">37% saved</progress>. Of course, non-supporting browsers would display it similarly to .

The progress bar in Firefox when the value attribute is set to 37 programmatically with JavaScript (or directly in the HTML), assuming max="100". The blue area reflects the amount of progress.

TIP

The progress element supports three attributes, all of which are optional: max, value, and form. The max attribute specifies the total amount of work for the task and must be greater than 0. The value attribute specifies the amount completed relative to the task. Assign the form attribute to the id of a form element on the page if you want to associate the progress element with a form it isn’t nested within.

TIP

Here’s a small taste of how to modify a progress element with JavaScript. Let’s assume that the element had been coded with an id of your choosing, like this:

<progress max="100" value="0" id=
"progressBar">0% saved</progress>

JavaScript such as the following would give you access to the element:

var bar = document.getElementById ('progressBar');

Then you could get or set the value via bar.value as needed. For example, bar.value = 37; would set it to 37, and the appearance of the progress element would change accordingly.

TIP

The progress element is supported by the most current version of all desktop browsers as of this writing. IE9 and prior, mobile Safari, and Android browsers don’t support it. See http://caniuse.com/#feat=progressmeter for the latest support information.

TIP

The style of the progress bar that each supporting browser displays may vary, though you can style it yourself to some extent with CSS.