Bright Java Tutorial

is brought to you by DoITBright LLC

HTML

Ordered List

We have a set of words, phrases or topics and we wish to display it to our readers as a list. In HTML, to be able to accomplish such thing, we need to make use of the <ol>. The items inside are marked with <li> tag. For example, we have this kind of list...
  1. Dog
  2. Cat
  3. Fish
As you can see, by default, the list will make use of numbers to display each item in the list. Here is the HTML code for the ordered list above...

  <html>
    <head>
      <title>Ordered List in HTML</title>
    </head>
    <body>
      <ol>
        <li>Dog</li>
        <li>Cat</li>
        <li>Fish</li>
      </ol>
    </body>
  </html>
                           
Let us try the different ways to display the same ordered list above.

  <html>
    <head>
      <title>Ordered List in HTML</title>
    </head>
    <body>
      <ol type="A">
        <li>Dog</li>
        <li>Cat</li>
        <li>Fish</li>
      </ol>
    </body>
  </html>
                           
For the given HTML code above, our ordered list will use "A", "B", "C" and so on to display each item instead of "1", "2", "3" and so on. You can also try using the character "I" as the value for the "type" attribute. The ordered list will then use "I", "II", "III" and so on. Try doing small caps "i" or "a" instead of "I" and "A" as value for the "type" attribute. Let us have on more HTML code example for a ordered list with an ordered list inside it.

  <html>
    <head>
      <title>Ordered List in HTML</title>
    </head>
    <body>
      <ol type="1">
        <li>Dog
          <ol type="a">
            <li>Doberman</li>
            <li>Poodle</li>
          </ol>
        </li>
        <li>Cat</li>
        <li>Fish</li>
      </ol>
    </body>
  </html>
                           
Please take note that the order in which each item is displayed in the ordered list is in the same order as you have listed them using the <li> tag. It may have been called ordered list in HTML because we are using numbers or character sequence that are commonly associated to order.

Unordered List

The unordered list is very similar to the ordered list. The difference are, instead of using numbers or commonly used characters to indicate ordering, it makes use of symbols or shapes like circle, square, disc and even none. The attribute for the unordered list tag is "style". Let us look at an example.
  • Dog
    • Doberman
    • Poodle
  • Cat
  • Fish
Let us look at the HTML code for the unordered list above...
  <html>
    <head>
      <title>Unordered List in HTML</title>
    </head>
    <body>
      <ul>
        <li>Dog
          <ul>
            <li>Doberman</li>
            <li>Poodle</li>
          </ul>
        </li>
        <li>Cat</li>
        <li>Fish</li>
      </ul>
    </body>
  </html>
                           
You may have noticed that even without using the "style" attribute, the unordered list displayed the items using the disc and circle respectively. We may also use the following value for the "style" attribute of the <ul> tag... "list-style-type:disc", "list-style-type:circle", "list-style-type:square" and "list-style-type:none". Let us try one of the above possible value for the "style" attribute...
  <html>
    <head>
      <title>Unordered List in HTML</title>
    </head>
    <body>
      <ul style="list-style-type:square">
        <li>Dog
          <ul style="list-style-type:circle">
            <li>Doberman</li>
            <li>Poodle</li>
          </ul>
        </li>
        <li>Cat</li>
        <li>Fish</li>
      </ul>
    </body>
  </html>
                           



Back    Next