HTML5 and CSS3 All-in-One For Dummies
Book image
Explore Book Buy On Amazon

Ordered lists in HTML5 are almost exactly like unordered lists. Ordered lists traditionally have numbers rather than bullets (although you can change this through CSS if you don’t want numbers).

How to view an ordered list

Here is a page with a basic ordered list — basicOL.html.

You can see a list where the items are numbered. When your data is a list of steps or information with some type of numerical values, an ordered list is a good choice.

image0.jpg

How to build the ordered list

The code for basicOL.html is remarkably similar to an unordered list:

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>basicOL.html</title>
</head>
<body>
 <h1>Basic Ordered List</h1>
 <h2 id="tab3" >Top ten dog names in the USA</h2>
 <ol>
  <li>Max</li>
  <li>Jake</li>
  <li>Buddy</li>
  <li>Maggie</li>
  <li>Bear</li>
  <li>Molly</li>
  <li>Bailey</li>
  <li>Shadow</li>
  <li>Sam</li>
  <li>Lady</li>
 </ol>
 <p>
  data from http://www.bowwow.com.au
 </p>
</body>
</html>

The only change is the list tag itself. Rather than the

    tag, the ordered list uses the
      indicator. The list items are the same
    1. pairs used in the unordered list.

      You don't indicate the item number anywhere; it generates automatically based on the position of each item within the list. Therefore, you can change the order of the items, and the numbers are still correct.

      This is where it's great that HTML is about meaning, not layout. If you specified the actual numbers, it'd be a mess to move things around. All that really matters is that the element is inside an ordered list.

About This Article

This article is from the book:

About the book author:

Andy Harris taught himself programming because it was fun. Today he teaches computer science, game development, and web programming at the university level; is a technology consultant for the state of Indiana; has helped people with disabilities to form their own web development companies; and works with families who wish to teach computing at home.

This article can be found in the category: