ORGANIZING A PAGE - HTML5 - page 94

< ul >
< li > Spain </ li >
< li > Netherlands </ li >
< li > Germany </ li >
< li > Uruguay </ li >
</ ul >
< h3 > End </ h3 >
< ol >
< li > Spain </ li >
< li > Netherlands </ li >
< li > Germany </ li >
< li > Uruguay </ li >
</ ol >
</ body >
</ html >
As you can see in Figure 5-7, the meaning of the group at the beginning of the World Cup has
no hierarchy — the list is just four teams at the World Cup. However, at the end, the order
means everything, so the ordered list element is more appropriate.
98
Figure 5-7: Ordered and unordered lists convey different meanings.
You may also note that the two dif erent kinds of lists have dif erent background colors added
with CSS3. So when using grouping elements, you might also want to further group the
content using color, as shown in both Figures 5-6 and 5-7.