Basic HTML
Computing Resources >> Tutorials >> Web Development >> Basic HTML 

What is HTML?

Basic Tags

Text Formatting Tags

Links & Images

Additional Resources

Evaluate this Tutorial

 

Lists

Lists in HTML can be a very easy way to format text without using <br> tags. Some things simply lend themselves to being put into a list...ordered or unordered. You can make the call as to whether or not something should just be made into a list. If you find yourself pining over how to format something and are using <br> tags, consider using a list instead. Here's how they work.

Ordered Lists

There two main types of lists you use: ordered and unordered lists. An ordered list will be numbered or alphabetized. An unordered list will simply be bulleted (hence, unordered). To begin an ordered list, you use the <ol> tag (ol stands for ordered list...can you guess what the tag for an unordered list is?). Within a list, you will need place list items...these are the actual contents of the list. You enclose them in <li> tags. Take a look at the following ordered list:

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

That code would produce the following ordered list:

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

There are different ways to format ordered lists. All you need to do is append a "type" attribute to the <ol> tag so that you can create different ordering types, like so:

<ol type="1">
   <li type="A"> makes uppercase letters (A, B, C)
   <li type="a"> makes lowercase letters (a, b, c)
   <li type="I"> makes uppercase Roman numerals (I, II, III)
   <li type="i"> makes lowercase Roman numerals (i, ii, iii)
</ol>

So <ol type="A"> would result in an ordered list like this:

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

Unordered Lists

What about unordered lists? The code is almost identical, except you use an <ul> tag instead of an <ol> tag (It's easy to remember...<ol> vs. <ul>...<ol> stands for ordered list and <ul> stands for unordered list). Take a look at the following code...it will look remarkably familiar:

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>

That code would produce the following unordered list:

  • Item 1
  • Item 2
  • Item 3
  • Item 4

next section >


screenshot

© 2004 Chad Hutchens & Libby Peterek | iSchool | UT Austin | webmaster