Foundation HTML5 with CSS3

(Steven Felgate) #1
Constructing Content

<li>Bake for 30 to 40 minutes in the preheated oven. Cake is done
when it springs back to the touch.</li>
</ol>
As you can see in Figure 4-9, each item in an ordered list is displayed with a number beside it, with those
numbers created automatically by the browser. By default, the ol element displays as block-level with
some padding on the left side (or right side, in right-to-left languages) to make space for the numbering.

Figure 4-13. The web browser numbers the list items automatically.
Like unordered lists, the ol element is flow content, requires an end tag, and can only have lis as
children.

Required Attributes


There are no attributes required for the ol element.

Optional Attributes


 type: indicates the marker to use when rendering the list. Possible values are 1 (decimal, the
default, shows Arabic numerals), a (lowercase English alphabet), A (uppercase English alphabet),
i (lowercase Roman numerals), and I (uppercase Roman numerals). All of these have CSS
equivalents using the list-style-type property, but sometimes the type of list is essential to
the meaning of the content—an alphabetical list of names, for instance—and in those cases it
might be preferable to declare the list type in the markup rather than in a presentational style
sheet.
 start: a numeral indicating the number from which the list should start counting. The value of
this attribute must be a whole integer. A list of five items with the attribute start="3" would be
numbered from 3 to 7 when the list is rendered.
 reversed: a Boolean attribute that, when present, reverses the numbering order of the list. For
example, a list of five items would be numbered from 5 to 1 when a browser renders it. This is a
new attribute in HTML5 so not all browsers support it yet. One possible real-world application for
the reversed attribute would be a list that allows a user to sort its items by ascending or
descending order; a few lines of JavaScript could simply toggle the reversed attribute rather
than rewriting the entire list. If your list should only ever be read in reverse order, you should
probably just put the items in that order to begin with.
Free download pdf