Working with ordered Lists - HTML5 - page 112

TabLe 14-1: Ordered List Style Values

aTTribuTe VaLue descriPTion eXaMPLe

decimal (default)

numbers 1, 2, 3

lower-alpha

Lowercase letters a, b, c

upper-alpha

Uppercase letters A, B, C

lower-roman Lowercase Roman

numerals

i, ii, iii

upper-roman Uppercase Roman

numerals

I, II, III

coMbininG unordered and ordered LisTs

There's no reason to keep <ul> and <ol> tags isolated from each other. You can easily mix the two
in any desired sequence by nesting one (or more) within the other. This can be a very effective way
of conveying information while at the same time varying your design options.

Say you wanted to expand the computer installation list from the previous example. A solid candi-
date for a bulleted list nested in a numbered list is the level of monitor models: There's no reason for
one to be sequentially before another and an unordered list is just what the doctor ordered.
<ol>
<li>Installation
<ol>
<li>Computer set up</li>
<li>Monitor set up
<ul>
<li>Model XYZ</li>
<li>Model ABC</li>
</ul>
</li>
</ol>
</li>
<li>Maintenance</li>
<li>Use</li>
</ol>

Only the third-level <ol> tag was switched to a <ul> tag, but the effect is quite noticeable, as shown
in Figure 14-4. If this was your code, you should, of course, remove the CSS declaration that was
previously styled to be a decimal because it is no longer necessary.