Lists

The purpose of this page is to demonstrate some of the features of HTML that you should be using in your work

Lists

• <ul> </ul> These are the opening and closing tags for an unordered list. It lists any number of items and uses a shape, such as a bullet to separate the items

  Within the opening and closing tags, list items are separated by an unpaired tag <li>. You use an unordered list when the items on the list have no particular order or sequence. The markup looks like this:

  <ul>
  <p>
  <li>Unordered list item #1</li>
  </p>
  <p>
  <li>Unordered list item #2</li>
  </p>
  <p>
  <li>Unordered list item #3</li>
  </p>
  </ul>

  And the list looks like this:

  • Unordered list item #1
  • Unordered list item #2
  • Unordered list item #3

  Although there is a default hierarchy of shapes, you can force the browser to display particular shapes using the type= attribute, which takes several shape value. You can define shape as a bullet (disc), a circle (round), and a box (square); this is also the order in which these shapes are displayed when you nest lists. The markup looks like this:

  <ul type="square">
  <p>
  <li>Unordered list item #1 with squares instead of bullets</li>
  </p>
  <p>
  <li>Unordered list item #2</li>
  </p>
  <p>
  <li>Unordered list item #3</li>
  </p>
  </ul>

  And the list looks like this:

  • Unordered list item #1 with squares instead of bullets
  • Unordered list item #2
  • Unordered list item #3

  It is also possible for you to use the type attribute to define the value for a single unordered list item, if you use it with the <li> tag. The values are the same as mentioned above. To mix them up in an unordered list you could use the following markup:

  <ul>
  <p>
  <li type="square">Unordered list item #1 with a square</li>
  </p>
  <p>
  <li type="disc">Unordered list item #2 with a disc</li>
  </p>
  <p>
  <li type="round">Unordered list item #3 with a circle</li>
  </p>
  </ul>

  And the list looks like this:

  • Unordered list item #1 with a squares
  • Unordered list item #2 with a disc
  • Unordered list item #3 with a circle

• <ol> </ol> These are the opening and closing tags for an ordered list. It lists any number of items and uses a number, such as a to separate the items

  Again, you use an unpaired tag <li> to separate list items. Ordered lists make sense when sequence matters. The markup looks like this:

  <ol>
  <p>
  <li>Ordered list item #1</li>
  </p>
  <p>
  <li>Ordered list item #2</li>
  </p>
  <p>
  <li>Ordered list item #3</li>
  </p>
  </ol>

  And the list looks like this:

  1. Ordered list item #1
  2. Ordered list item #2
  3. Ordered list item #3

  You can take advantage of the <start=> attribute, which will force the browser to begin numbering your ordered list with a number you select (instead of 1, which is the default). Some browsers, like Netscape and Internet Explorer, also allow you to change the type of value that will be used in the ordered list.

  Using the <type=> attribute, you can force the browser to display the following values:

  • Capital letters <type="A">
  • Lower case letters <type="a">
  • Capital Roman numerals <type="I">
  • Lowercase Roman numerals <type="i">
  • Arabic numerals <type="1"> (the default)

  For example, to create an ordered list using capital Roman numerals that starts with III, you would use the following markup:

  <ol start="3" type="I">
  <p>
  <li>Ordered list item #1 with capital Roman numerals</li>
  </p>
  <p>
  <li>Ordered list item #2</li>
  </p>
  <p>
  <li>Ordered list item #3</li>
  </p>
  </ol>

  And the list looks like this:

  3. Ordered list item #1 with capital Roman numerals
  4. Ordered list item #2
  5. Ordered list item #3

  Note that the <start=> and <type=> attributes work together, with the <start=> attribute telling the browser which value to display first and the <type=> attribute setting the actual numbering style. Order matters, and <start=> attribute comes first; it also takes an arabic numeral as its value

  As in the case of the unordered list, you can use the type=> attribute with the <li> tag to force the browser to display different types of values for each list item

  You can use any of the values mentioned above. If you want to skip a value in your ordered list, you use the value= attribute. So, to mix up the values in an ordered list and have the list skip some values, you could use the following markup:

  <ol>
  <p>
  <li type="I">Ordered list item #1 with a capital Roman numeral</li>
  </p>
  <p>
  <li type="a">Ordered list item #2 with a lower case letter</li>
  </p>
  <p>
  <li value="6" type="1">Ordered list item #3 with a number that skips 4 places</li>
  </p>
  <p>
  </ol>

  And the list looks like this:

  1. Ordered list item #1 with a capital Roman numeral
  2. Ordered list item #2 with a lower case letter
  6. Ordered list item #3 with a number that skips 4 places

• <dl> </dl> These are the opening and closing tags for an definition list. This list uses two unpaired tags:

  • The dictionary term <dt>, which is aligned with the left margin (but is indented if the dictionary list is nested)
  • The dictionary definition <dd>, which is indented to the right under the dictionary term

  The markup looks like this:

  <dl>
  <dt>Ordered list item #1</dt>
  <dd>Not much going on here</dd>
  <p>
  <dt>Ordered list item #2</dt>
  <dd>Nope. Nothing much here either</dd>
  </p>
  <p>
  <dt>Ordered list item #3</dt>
  <dd>Forget about this place!</dd>
  </p>
  </dl>

  And the list looks like this:

  Ordered list item #1

  Not much going on here

  Ordered list item #2

  Nope. Nothing much here either

  Ordered list item #3

  Forget about this place!

• Using the proper markup, it is possible for you to nest lists inside of each other. This is one way to get the effect of indenting, although you may have to experiment with list attributes to set the values that you want. This page is an example of nested lists. To nest an unordered list within another unordered list, you would use the following markup (note what happens to the values!)

  <ul>
  <p>
  <li>Unordered list item #1</li>
  </p>
  <p>
  <ul>
  <li>Nested unordered list item #1</li>
  </p>
  <p>
  <li>Nested unordered list item #2</li>
  </p>
  <p>
  <li>Nested unordered list item #3</li>
  </p>
  </ul>
  <p>
  <li>Unordered list item #2</li>
  </p>
  <p>
  <li>Unordered list item #3</li>
  </p>
  </ul>

  And the list looks like this:

  • Unordered list item #1
  • Nested unordered list item #1
  • Nested unordered list item #2
  • Nested unordered list item #3

  • Unordered list item #2
  • Unordered list item #3

  The same is possible with ordered lists, allowing you to create a rudimentary outline (if you use the type attribute). The markup would look like this:

  <ol type="A">
  <li>Learning HTML</li>
  </p>
  <p>
  <ol type="1">
  <li>Paired and unpaired tags</li>
  </p>
  <p>
  <li>Lists</li>
  </p>
  <ol type="a">
  <li>Unordered lists</li>
  </p>
  <p>
  <li>Ordered lists</li>
  </p>
  </ol>
  <p>
  <li>Links</li>
  </p>
  </ol>
  <p>
  <li>Designing your pages</li>
  </p>
  <p>
  <li>Advanced html</li>
  </p>
  </ol>

  And the list looks like this:

  1. Learning HTML

  1. Paired and unpaired tags
  2. Lists

  1. Unordered lists
  2. Ordered lists

  3. Links

  2. Designing your pages
  3. Advanced HTML

Now it's time to move on to other types of html tags, so let's check out a page which has some information about creating links