Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

Lesson 1: Thinking HTML5 semantics CHAPTER 5 221

Use the <ruby> element to place a notation above or to the right of characters. Use the

<rt> and <rp> elements with the <ruby> element to place the notation or to place parenthe-

ses around the ruby. Use the <bdo> element to define the text direction and use the <bdi>

element to isolate a block of text to set the text direction.

Working with lists

HTML5 defines various semantic elements that can be used to create ordered, unordered, and

descriptive lists. All lists have list items, which are implemented by using the <li> element. All

lists support nesting of lists. This section describes each of these lists.

Ordered lists

An ordered list is a numbered list. Use the <ol> element when you want auto-numbering of

the list items. The following example shows three favorite fruits.

<h3>Favorite Fruit</h3>

<ol>

<li>Apples</li>

<li>Oranges</li>

<li>Grapes</li>

</ol>

This list is automatically rendered with numbers beside each fruit list item, as shown in

Figure 5-5.

FIGURE 5-5 he ordered list numbering its items automaticallyT

The <ol> element supports the following attributes.

■■reversed Reverses the number order to be descending instead of ascending

■■start Sets the starting number

■■type Sets the list type; can be “1”, “A”, “a”, or “I”

The reversed attribute currently does not work in most browsers, but you might find

JavaScript libraries, such as modernizr.js, that emulate that functionality until the feature is

implemented by the browser manufacturer. Even if you set the type to a value such as “A”,

Key
Te rms