A list is simply an organization of elements. HTML has a default way of displaying list data, but you are not bound to that; you can use CSS styles to make lists appear exactly as you wish. Lists begin and end with list tags, and each element has its own tag.
The most common list looks like this:
<ul> <li>alpha</li> <li>beta</li> <li>charlie</li> <li>delta</li> </ul>
The code above displays like this:
The <ul></ul> pair designates an unordered list. (Get it? ul - for unordered list!) In the absence of any other information, the browser will format this list as a bulleted list. Of course you can use CSS to alter the bullets and make them many other standard elements as well as using custom graphics. See the list style type and custom bullets section of this document for information on how to do this.
Inside the list, each element is enclosed inside <li></li> tags. Programmers typically indent each list item.
You can also create an ordered (or numbered) list using the <ol></ol> tags instead of the <ul> tags. Such a list would like this in the code:
<ol> <li>alpha</li> <li>beta</li> <li>charlie</li> <li>delta</li> </ol>
The code above displays like this:
As with the unordered list, you can use CSS styles to dramatically change the type of numbers used.
If you find yourself writing outlines or other structured documents, you'll frequently encounter lists nested inside each other. It's possible to make nested loops that still validate, but you must do so carefully. Consider the following example:
A list cannot simply happen inside another list. Instead, it must be placed inside one of the list items. If you think about this logically, it makes sense. The term "uno" is related to the term "Spanish". At one level, there is a list item containing the term "Spanish." That element contains that term and a new list showing several numbers written in Spanish. The code for producing the list above is reproduced here:
<ul>
<li>English
<ol>
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
</li>
<li>Japanese
<ol>
<li>ichi</li>
<li>nii</li>
<li>san</li>
</ol>
</li>
<li>Spanish
<ol>
<li>uno</li>
<li>dos</li>
<li>tres</li>
</ol>
</li>
</ul>
Notice how the list item for Spanish does not end directly after the word "Spanish." Instead, the new list of Spanish numbers is embedded into the list item. After this new list is finished with </ol>, the list item containing both the word "Spanish" and the inner list is completed. Proper indentation makes it much easier to avoid mistakes. Each ending element should line up exactly with the element that started it.
You can specify a specific style bullet. Here are a few commonly used variations:
Note that you can mix up the styles as I did in this list, and you can even use numeric styles (like decimal) in an unordered list. In fact, the only difference between ol and ul in XHTML is the default style type.
One more specialty list is quite handy even though it is not used that often. It's called the "definition list." Here's how it looks:
Here's the code that creates the previous list:
<dl> <dt>HTML</dt> <dd>Old-school way of thinking. Combines content and design</dd> <dt>XHTML</dt> <dd>Stricter technique, but leads to more power when combined with CSS</dd> </dl>
The definition list contains the following tags (cleverly described with a definition list):
Definition lists are useful when you want a list marked by phrases rather than symbols. As you learn more CSS, you'll be able to change how all lists are viewed. You aren't tied to the default positioning or layout, but you should start there.
You can also specify an image to use as a custom bullet for ol or ul lists. Use the list-style-image to specify a custom bullet image. (you may need to wait until you've learned more about graphics to use this fully)