Lists

There are two types of lists you should be aware of in HTML: unordered lists and ordered lists.

An unordered list has some features
 * a bullet at the start of each line
 * an indentation for each element
 * the list is a block element - it has a line break before it.

An ordered list has features, too.
 * 1) It is numbered (or lettered)
 * 2) It also has an indentation for each element
 * 3) the list is a block element - it has a line break before it.
 * 4) The list does not have to start at one (or A).

Both of these lists have the same structure as each other. There is a tag (... or ...) to indicate the start and end of the list, and then content enclosed in ... tags for each item in the list. Any content for the list must be inside ... if it is inside the ... tags (or ... tags). Here is what the HTML code first list would look like: code format="html4strict"  a bullet at the start of each line an indentation for each element</li> the list is a block element - it has a line break before it</li> </ul> code Notice that the computer puts the bullets in for you. I happened to indent my ...</li> tags, but the computer routinely ignores such indentation. However, regardless of how I indent my code, the computer will indent the list items. Here's the ordered list: code format="html4strict"  It is numbered (or lettered)</li> It also has an indentation for each element</li> The list is a block element - it has a line break before it.</li> The list does not have to start at one (or A).</li> </ol> code Notice, too, that the numbers are automatically added by the browser when you view the list. Also, nothing goes inside the list that isn't in ...</li> tags. We can also "nest" lists, putting one list inside another. This adds another level of indents, and the computer will try to give the unordered list different bullets, by default. code format="html4strict"  It is numbered (or lettered)</li> It also has an indentation for each element</li> The list is a block element - it has a line break before it.</li> The list does not have to start at one (or A).  1,2,3</li> i,ii,iii</li> <li>I,II,III</li> <li>A,B,C</li> <li>a,b,c</li> </ul> </li> </ol> code In this case, the unordered list was contained in one of the list elements of the ordered list.

You can start a list with something other than 1, if you wish. The <ol> tag has an attribute called "start" which can be used to say what the list starts with. code format="html4strict" code This will create a list that starts at 5 and goes up from there.

There are some CSS codes that work specifically with lists:
 * Works with tag || Attribute || Possible values ||
 * <ol>,<ul> || list-style-type || {disc,circle,square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none} ||
 * <ol>,<ul>,<li> || list-style-image || {none, url(//insert URL here//) --- this should be a small graphic. Big ones will look funny. ||
 * <ol>,<ul>,<li> || list-style-position || {outside, inside} - used to define how the text wraps to the next line - does it wrap to where the bullet was ("inside") or where the first line of text started ("outline")? By default, this choice is set to "outside." ||

So, for instance, you might have several lists on your page, but want one to look special: code format="html4strict" <style type="text/css"> ul.finger {list-style-image: url("finger.gif");}

... and then in the body:

<li>Be sure you wash your hands.</li> <li>Use warm water.</li> </ul> code And this particular list would have finger-pictures instead of bullets.