Document Actions
Web Page Creation: Part 4, Using HTML to Create Lists
Learn how to create different types of lists using HTML. This is the fourth of seven technical documents about how to create a Web page.
Bulleted or Unordered Lists
Bulleted lists are implemented by using the <UL></UL> tag. UL stands for Unordered List. To implement this, however, you need to use <LI></LI> (List Item) for each item you wish to place in the list. There is a TYPE attribute for each of these tags that allows you to change the shape of the bullet.
| Attribute | Description |
|---|---|
| TYPE="DISC" | Creates a list with solid circular bullets. This is the default. |
| TYPE="SQUARE" | Creates a list with solid square bullets. |
| TYPE ="CIRCLE" | Creates a list with hollow circular bullets. |
Example of Unordered Lists
Figure 1 shows an example of HTML code used to implement unordered lists:
Figure 1. Source code #1
Figure 2 shows how source code #1 looks when viewed with a Web browser.
Figure 2. Source code #1 displayed on a Web browser
Notice that the first list is really two lists. A list with square bullets is nested inside of a list with disc bullets. An infinite number of lists can be nested in this manner. The first two lists are implemented by changing the attributes of the <UL></UL> tag. The second list, however, is implemented by inserting the attributes in each of the two <LI></LI> tags. Thus, we can change the bullet styles of list items that are on the same level.
Numbered Lists
Numbered lists are implemented similarly to bulleted lists. The tag that is used to symbolize a numbered list is <OL></OL>. The <LI></LI> tag is used to signify a list item, just as in an unordered list. The TYPE attribute can be used with <OL>. Its possible values include the following:
| Attribute | Description |
|---|---|
| TYPE="1" | Creates a list ordered by digits (i.e., 1, 2, 3, 4). This is the default. |
| TYPE="A" | Creates a list ordered by capital letters (i.e., A, B, C, D). |
| TYPE="a" | Creates a list ordered by lower-case letters (i.e., a, b, c, d). |
| TYPE="I" | Creates a list ordered by capital roman numerals (i.e., I, II, III, IV). |
| TYPE="i" | Creates a list ordered by lower-case roman numerals (i.e., i, ii, iii, iv). |
Example of Numbered Lists
Figure 3 shows an example of HTML code used to implement ordered lists:
Figure 3. Source code #2
Figure 4 shows an image of source code #2 when viewed with a Web browser:
Figure 4. Source code #2 displayed on a Web browser
In Figure 4, notice that a list is nested within a list, which is nested within yet another list. Each level of the list uses a different numeral to order the list elements. This can be repeated many times, and you can put any of the five ordered list types on any of the levels.
If you would like to learn more about HTML, take a look at the other handouts in this series:
- Part 1, HTML Basics
- Part 2, Formatting Text
- Part 3, HTML and Images
- Part 4, Using HTML to Create Lists
- Part 5, Creating Links Using HTML
- Part 6, HTML and Tables
- Part 7, Web Directories and FTP Procedures
For More Help
If you need more assistance, please feel free to ask the CIS Support Staff in any Open Access Lab, or call Help Desk Central at (979) 845-8300.