Patterns of Chaos
» HTML Tutorial » Lists
Logo

Lists

In the last lesson, we created a page about the solar system. While it worked well, it might have been better if we could have shown a list of all of the planets. Even the list of dwarf planets wasn't really set apart from the rest of the text.

HTML provides a way to make lists. There are two types of list: ordered and unordered. Ordered lists use numbers or letters to count the items in the list, in order. Unordered lists just use a mark to separate each item, but don't specify an order for them.

This is an ordered list:

  1. Item 1
  2. Item 2
  3. Item 3

An ordered list uses two tags: <ol> to define the entire list, and <li> to define each item. The code for the list above looks like this:

  <ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ol>

This is an unordered list:

  • An item
  • Something else
  • And another one

Notice how the unordered list uses round marks instead of numbers? These are called bullets - another name for unordered list is bulleted list, but that's a term that's usually used for print, and not for web pages.

The code for the unordered list this:

  <ul>
    <li>An item</li>
    <li>Something else</li>
    <li>And another one</li>
  </ul>

We can use these lists to present information in a neater format when we want to list things. Let's try changing our solar system page just a little, using lists:

<html>
  <h1>The Solar System</h1>
  <p>The Solar System consists of eight planets*. These planets all travel
    in circles around the sun. The four planets closest to the sun, known as
    the inner planets, all have hard surfaces and either no atmosphere or an
    atmosphere of relatively thin gasses. The four outer planets, because of
    their distance from the sun, have atmospheres made mostly of liquified
    gasses, and are known as gas giants</p>
  <p>The eight planets, in order of distance from the sun (closest to
    farthest) are:</p>
  <ol>
    <li>Mercury</li>
    <li>Venus</li>
    <li>Earth</li>
    <li>Mars</li>
    <li>Jupiter</li>
    <li>Saturn</li>
    <li>Uranus</li>
    <li>Neptune</li>
  </ol>
  <h2>The Inner Planets</h2>
  <p>The four inner planets are: Mercury, Venus, Earth, and Mars. They are
    all close enough to the sun to have gaseous atmospheres, although
    Mercury is so small that it has almost no atmosphere at all. All four of
    the inner planets have a solid, almost spherical crust.</p>
  <h2>The Outer Planets</h2>
  <p>By contrast, the outer planets have thick atmospheres of gasses such
    as Hydrogen, Helium, or Methane. These planets are so cold that these
    gasses are all in liquid form.</p>
  <hr>
  <h3>Notes:</h3>
  <p>* Pluto used to be considered the ninth planet, until the
    International Astronomical Union changed the definition of a planet in
    2006. Now, we have eight planets and three dwarf planets:<br>
  <ul>
    <li>Pluto</li>
    <li>Ceres</li>
    <li>Eris</li>
  </ul>
</html>

This page would look like this:


 
Contact