Using lists in HTML
There are two types of lists in HTML: bullet (unordered) and numbered (ordered). In this tutorial we will see both types and nesting of lists.
- Bullet lists
- uses the pair < UL > and < /UL > to start and end the list.
- the items are entered between these two tags, with a < LI > typed before each one of them.
- the browsers display each item of the list, indented and with a bullet in front of the text.
- modern browsers extensions:
- the basic bulleted list has a default progression of bullet types that changes as you move through indented levels. From a solid disc, to a circle to a square.
- a TYPE tag was added to the UL element so no matter the indent level you can specify whether you want a TYPE=disc, TYPE=circle, or TYPE=square as your bullet.
- Example: <UL TYPE=disc>
- Numbered lists
- uses the pair < OL > and < /OL > to start and end the list.
- the < LI > tag is used in the same way as bullet lists.
- the browsers, however, display numbers instead of bullets before each list item.
- modern browsers extensions:
- regular numbered lists counts 1, 2, 3, ... etc.
- the TYPE tag was added to this element to allow authors to specify whether they want their list items marked with: capital letters (TYPE=A), small letters (TYPE=a), large roman numerals (TYPE=I), small roman numerals (TYPE=i), or the default numbers (TYPE=1).
- For lists that wish to start at values other than 1 we have the new tag START. START is always specified in the default numbers, and will be converted based on TYPE before display. Thus START=5 would display either an 'E', 'e', 'V', 'v', or '5' based on the TYPE tag.
- Example: <OL TYPE=A START=3>
- Extensions for the <LI> tag
- to give even more flexibility to lists, the author can change the list type, and for ordered lists the list count index as they progress.
- to this end the TYPE tag was added to the LI element as well.
- it takes the same values as either UL or OL depending on the type of list you are in, and it changes the list type for that item, and all subsequent items.
- for ordered lists the VALUE element was also added so you can change the count, for that list item and all subsequent.
- Nesting lists
- be careful to open and close each pair UL ... /UL and OL ... /OL.
- be careful to close lower level lists before you close, higher level lists.
- In modern browsers, adjust the bullet type and/or numbering type, with the TYPE tag to create a visual effect of the logical hierarchy of your lists.
- preview frequently your nesting using an editor that can do so, or see it in Netscape, Internet Explorer and Lynx.
- sacrifice beauty for interoperability: either create two versions of your page, or try to make your lists readable by at least Firefox and Internet Explorer.
This page is maintained by Al Bento
who can be reached at abento@ubalt.edu. This page was last updated on May 16, 2007. Although we will attempt to keep this information accurate, we can not guarantee the accuracy of the information provided.