Lesson 8: Ordered Lists

Overview

In this HTML lesson, we show how to create ordered lists. We begin with a simple example of the ten commandments that demonstrates how ordered lists differ from unordered lists. Then we change the markers to Roman numerals to demonstrate the "type" attribute. After that, we break the list into two to give an example of how we can change the start attribute. Next, we explain how the reversed attribute works. Finally, we demonstrate the remaining list types and summarize our results.

An Ordered List

Our first example demonstrates a simple ordered list. This list contains the Ten Commandments. The ordered list is exactly like an unordered list, except that the ul tags are replaced by ul tags. As the output of this example shows, the markers are replaced by decimal numbers.

Example1.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <ol>
      <li>I am the LORD your God: you shall not have strange Gods before me.</li>
      <li>You shall not take the name of the LORD your God in vain.</li>
      <li>Remember to keep holy the LORD'S Day.</li>
      <li>Honor your father and your mother.</li>
      <li>You shall not kill.</li>
      <li>You shall not commit adultery.</li>
      <li>You shall not steal.</li>
      <li>You shall not bear false witness against your neighbor.</li>
      <li>You shall not covet your neighbor's wife.</li>
      <li>You shall not covet your neighbor's goods.</li>
    </ol>
  </body>
</html>

Output

The Type Attribute

In this example, we show that we can change the markers from decimal digits to Roman numerals. We can choose to show Roman numerals by setting the value of the type attribute to "I".

Example2.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <ol type="I">
      <li>I am the LORD your God: you shall not have strange Gods before me.</li>
      <li>You shall not take the name of the LORD your God in vain.</li>
      <li>Remember to keep holy the LORD'S Day.</li>
      <li>Honor your father and your mother.</li>
      <li>You shall not kill.</li>
      <li>You shall not commit adultery.</li>
      <li>You shall not steal.</li>
      <li>You shall not bear false witness against your neighbor.</li>
      <li>You shall not covet your neighbor's wife.</li>
      <li>You shall not covet your neighbor's goods.</li>
    </ol>
  </body>
</html>

Output

The Start Attribute

We can split the list of the Ten Commandments into two lists, where the first list contains the first three commandments that pertain to God and the second list contains the remaining seven commandments that pertain to our neighbors. To do this, we insert an unordered list end tag after the third commentment followed directly by a start tag. Inside the start tag, we include the start attribute with the value 4.

Example3.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <ol type="I">
      <li>I am the LORD your God: you shall not have strange Gods before me.</li>
      <li>You shall not take the name of the LORD your God in vain.</li>
      <li>Remember to keep holy the LORD'S Day.</li>
    </ol>
    <ol type="I" start="4">
      <li>Honor your father and your mother.</li>
      <li>You shall not kill.</li>
      <li>You shall not commit adultery.</li>
      <li>You shall not steal.</li>
      <li>You shall not bear false witness against your neighbor.</li>
      <li>You shall not covet your neighbor's wife.</li>
      <li>You shall not covet your neighbor's goods.</li>
    </ol>
  </body>
</html>

Output

The Reversed Attribute

We can add in the reversed attribute to reverse the order of the list markers and make them count down. in this case, the list counts down to 1, by default. The reversed attribute is different in that no value is specified. Instead, the presence of the reversed attribute is sufficient. If the start value is specified, the list markers start at that value and count downward from it.

Example4.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <ol type="A" start="20" reversed>
      <li>Introit</li>
      <li>Kyrie</li>
      <li>Gloria</li>
      <li>Epistle</li>
      <li>Gradual</li>
      <li>Alleluia</li>
      <li>Sequence</li>
      <li>Gospel</li>
      <li>Credo</li>
      <li>Offertory</li>
    </ol>
  </body>
</html>

Output

More Markers

Our last example demonstrates another set of markers: lowercase Roman numerals. These are designated by setting the value of the type attribute to lowercase i.

Example5.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <ol type="i">
      <li>In the beginning God created the heavens and the earth. The earth was without form and
      void, and darkness was upon the face of the deep; and the Spirit of God was moving over the
      face of the waters. And God said, "Let there be light"; and there was light. And God saw that
      the light was good; and God separated the light from the darkness. God called the light Day,
      and the darkness he called Night. And there was evening and there was morning, one day.</li>
      <li>And God said, "Let there be a firmament in the midst of the waters, and let it separate
      the waters from the waters." And God made the firmament and separated the waters which were
      under the firmament from the waters which were above the firmament. And it was so. And God
      called the firmament Heaven. And there was evening and there was morning, a second day.</li>
      <li>And God said, "Let the waters under the heavens be gathered together into one place, and
      let the dry land appear." And it was so. God called the dry land Earth, and the waters that
      were gathered together he called Seas. And God saw that it was good. And God said, "Let the
      earth put forth vegetation, plants yielding seed, and fruit trees bearing fruit in which is
      their seed, each according to its kind, upon the earth." And it was so. The earth brought
      forth vegetation, plants yielding seed according to their own kinds, and trees bearing fruit
      in which is their seed, each according to its kind. And God saw that it was good. And there
      was evening and there was morning, a third day.</li>
      <li>And God said, "Let there be lights in the firmament of the heavens to separate the day
      from the night; and let them be for signs and for seasons and for days and years, and let them
      be lights in the firmament of the heavens to give light upon the earth." And it was so. And
      God made the two great lights, the greater light to rule the day, and the lesser light to rule
      the night; he made the stars also. And God set them in the firmament of the heavens to give
      light upon the earth, to rule over the day and over the night, and to separate the light from
      the darkness. And God saw that it was good. And there was evening and there was morning, a
      fourth day.</li>
      <li>And God said, "Let the waters bring forth swarms of living creatures, and let birds fly
      above the earth across the firmament of the heavens." So God created the great sea monsters
      and every living creature that moves, with which the waters swarm, according to their kinds,
      and every winged bird according to its kind. And God saw that it was good. And God blessed
      them, saying, "Be fruitful and multiply and fill the waters in the seas, and let birds
      multiply on the earth." And there was evening and there was morning, a fifth day.</li>
      <li>And God said, "Let the earth bring forth living creatures according to their kinds: cattle
      and creeping things and beasts of the earth according to their kinds." And it was so. And God
      made the beasts of the earth according to their kinds and the cattle according to their kinds,
      and everything that creeps upon the ground according to its kind. And God saw that it was
      good. Then God said, "Let us make man in our image, after our likeness; and let them have
      dominion over the fish of the sea, and over the birds of the air, and over the cattle, and
      over all the earth, and over every creeping thing that creeps upon the earth." So God created
      man in his own image, in the image of God he created him; male and female he created them. And
      God blessed them, and God said to them, "Be fruitful and multiply, and fill the earth and
      subdue it; and have dominion over the fish of the sea and over the birds of the air and over
      every living thing that moves upon the earth." And God said, "Behold, I have given you every
      plant yielding seed which is upon the face of all the earth, and every tree with seed in its
      fruit; you shall have them for food. And to every beast of the earth, and to every bird of the
      air, and to everything that creeps on the earth, everything that has the breath of life, I
      have given every green plant for food." And it was so. And God saw everything that he had made,
      and behold, it was very good. And there was evening and there was morning, a sixth day.</li>
    </ol>
  </body>
</html>

Output

Summary

The ordered list has three attributes: type, start, and reversed. Reversed allows us to reverse the order of the markers for the list. By default the markers count down to the first marker (e.g. 1), unless the start attribute is specified. In that case, it counts down from the start. The start attribute value is always specified as a decimal number. For example, 20 corresponds to the letter T because T is the 20th letter of the alphabet. The type attribute can take on 5 different values: 1, I, i, A, and a. The value "1" indicates the use of decimal numbers and it is the default value. The values I and i set the markers to uppercase of lowercase Roman numerals, respectively. The values A and a are used to set the markers to uppercase and lowercase letters, respectively.