HTML Lists – Engineering Technology Services

Overview

HTML has a set of tags for the purpose of displaying lists. The use of these tags are essential to organizing information on you web site. In fact the list below uses the <dl> definition list tag to organize the information with nested unordered list tags.

One thing to keep in mind when using lists is that certain tags (the <li> tag for example) must be placed within another tag to be displayed correctly on your web site. If you are using an HTML editor, this should be automatically controlled by that program, but it is best to know the details of how lists are created in case you need to do more than just the basic layout of data. Also know that it is possible to use other tags (<p>, <br>, <strong>, etc) within each list item to assist with layout.

It is also possible to "nest" lists within each other as is shown below. Each nest will indent the the list to the right to show that it is a sub-list to the previous list item. To nest lists, you need to create another complete list structure within a list item as shown below. Notice how the new list structure (the <ol> and <li> tags) begins within the <li> tag for "list item two."

For example, a simple ordered list would look like this:

<ol>

	   <li>list item one</li>

	   <li>list item two</li>

	   <li>list item three</li> 

	</ol>

A nested list would look like this:

<ol>

	   <li>list item one</li>

	   <li>list item two

	     <ol>

	      <li>sub list one</li>

	      <li>sub list two</li>

	     </ol> 

	   </li>

	   <li>list item three</li>

	</ol>

The nested list above looks like this:

list item one
list item two
1. sub list one
2. sub list two
list item three

All of the tags below require an end tag unless otherwise specified.

<ol>

This tag is a container for an ordered list of items. An ordered list means that the list will be displayed with a sequence of numbers or letters (1, 2, 3, or a, b, c, etc). Each list item within the <ol> tag must be contained within a <li> tag.

Attributes for the <ol> tag:
- start - This assigns the starting number for the sequence to allow you to begin the list at any value you need.
- type - This changes how the sequence number is displayed on your page. The default is "arabic" or numerical. But you can also have the list display in alphabet or roman sequences.
  - type = "1" will display as "1,2,3,..."
  - type = "A" will display as "A,B,C,..."
  - type = "a" will display as "a,b,c,..."
  - type = "I" will display as "I,II,III,..."
  - type = "i" will display as "i,ii,iii,..."
Example: <ol start="12" type="I">This will display the ordered list on your page beginning with XII and continuing with XIII, XIV, etc. If the type attribute for the tag was "a" instead of "I", the list would begin at the letter "l" and continue with m, n, o, etc.

<ul>

This is an unordered list tag. Unordered means that the items within the list will not be displayed with a sequence of numbers or letters. Instead the list will be shown with "bullet" symbols. As you nest unordered lists, the bullet symbols will automatically change to better highlight the sub-lists. You can see an example of this in the list items on this web page. Each list item within the <ul> tag must be contained within a <li> tag.

Attributes for the <ul> tag:
- type - This allows you to specify what type of bullet symbol you want displayed in your unordered lists. The options are circle, disc and square. The default is disc.
Example: <ul type="square"> This tag will display list items with a square bullet instead of the normal disc symbol.

<dl>

This is a definition list. This is used to create a glossary-style listing of elements such as within a dictionary. It is similar to the <ul> tag except that the <li> tag is not used to mark the entries. This is because a definition list requires two items for every entry: a term to be defined and a definition of that term. The term is delineated by the <dt> tag and the definition is contained within the <dd> tag. Thus a simple definition list could look like this:

<dl> <dt>This is the term to be defined </dt> <dd>This is the definition of that term</dd> <dt>This is the second term to be defined </dt> <dd>This is the definition of that second term</dd> </dl>

In most browsers, the <dt> text is left-aligned and the <dd> text is indented. (Each of the HTML definitions on this page use the definition tags to format the text.) It is a common practice to make the text within the <dt> tags bold to highlight that text on the page.