HTML Lists
We are all familiar with bulleted and numbered lists as used in wordprocessors. The HTML equivalents are known as unordered and ordered lists. The code for specifying both types of list is similar
<?l>
<li>List text</li>
...
<li>List text</li>
</?l>where ? is
- u for an unordered list - i.e. a bullet list
- o for an ordered list - i.e., a numbered list
It is possible to nest lists inside one another. While all browsers make a very good job of interpreting incorrect nesting syntax, it is nevertheless advisable - in the interests of strict XHTML compliance - to use the correct syntax which requires that each nested list be wrapped in an <li>..</li> tag pair owned by the parent list. It is worth noting that browsers don't respond well to having bullet lists nested inside a number list item. On the other hand, number lists inside bullet list items work just fine.
HTML lists are amenable to CSS styling. In addition to the common styling attributes discussed here there are two attributes specific to lists
- list-style-type:This attribute determines the nature of the bullet that precedes the list. The always safe assignments for this attribute are: disc, circle, square, decimal, decimal-leading-zero, lower-alpha, upper-alpha, lower-roman, upper-roman, lower-greek and none. The default setting is
list-style-type:discfor bullet lists andlist-style-type:decimalfor number lists. It is best to allow for current and future browser idiosyncracies by explicitly defining the bullet style. What happens when a setting of lower/upper-alpha is used and the number of list items exceed 26? No default behavior is specified by the standards so it all depends on the vagaries of the browser. - list-style-image:Specifying this attribute causes the bullet to be replaced by an image. This works equally well for bullet lists and number lists. There would normally be no reason to assign a bullet image for number lists. The code for specifying this attribute bears the form:
list-style-image:url('image_path')
