Help Desk Central
hdc.tamu.edu Texas A&M University primary mark

Help documents have moved to ITselfservice.tamu.edu. Find the new location of specific documents using this transition map.

Web Page Creation: Part 4, Using HTML to Create Lists

Document ID 154


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

The figure below shows an example of HTML code used to implement unordered lists [fig. 01]:

fig1.jpg

[fig. 01 - Source Code #1]

 

The figure below shows how source code #1 looks when viewed with a Web browser [fig. 02]:

fig2.jpg

[fig. 02 - 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:

AttributeDescription
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

The figure below shows an example of HTML code used to implement ordered lists [fig. 03]:

fig3.jpg

[fig. 03 - Source Code #2]

 

The figure below shows an image of source code #2 when viewed with a Web browser [fig. 04]:

Note: In the figure below, 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.

fig4.jpg

[fig. 04 - Source Code #2 Displayed on a Web Browser]


If you have any further questions, please email helpdesk@tamu.edu or call us at 979.845.8300.


Document ID 154
June 28, 2014
Jump to document:

Contact Us 24/7/365

979.845.8300

helpdesk@tamu.edu

In person: 8 a.m. to midnight at the Computing Services Center/Teague Building Room 1112 (view map)

Like us on Facebook Follow us on Twitter