HTML Lists

Lists are used to order things or objects of the same category. They are used to number these objects according to a number. The most common types of lists are ordered list and unordered list.

Ordered List

The <ol> tag is used to denote an ordered lists. The ordered lists can be numerical or alphabetical in order.

Ordered lists can be denoted in the following types:

• 1 - Represented in numerical order
• A - Represented in uppercase alphabetical order
• a - Represented in lowercase alphabetical order
• I - Represented in uppercase roman numerals
• i - Represented in lowercase roman numerals

For example:

<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>

Unordered List

The <ul> tag is used to denote an unordered lists. The unordered lists are bulleted in order.

Unordered lists can be denoted in the following types:

• disc - Represented in disc shape
• square - Represented in square shape
• circle - Represented in circle shape

For example:

<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>

List Item

The <li> tag is used to denote a list item. List items are used in ordered list, unordered list and menu list.

For example:

<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>

<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>

Definition List

A definition list is a list of terms with a description of each term. The <dl> tag is used to denote a definition list. The <dl> tag is used in conjunction with the <dt> tag (Definition Term) and the <dd> tag (Definition Data). The <dt> tag is used to define a term name in the definition list and the <dd> tag is used to describe the term name in the definition list.

For example:

<dl>
<dt>HTML</dt>
<dd>Used to describe web pages.</dd>
<dt>CSS</dt>
<dd>Used to style web pages.</dd>
</dl>

Menu List

The <menu> tag denotes a menu list. The menu list is used to define a list of commands. It is also used for context menus, toolbar and for listing forming controls and commands. In fact, menu element is not supported in any browser at the present.

For example:

<menu type="web">
<li>
<button type="button" onclick="file_new()">New</button>
<button type="button" onclick="file_open()">Open</button>
<button type="button" onclick="file_save()">Save</button>
</li>
</menu>

The <menuitem> Tag

The <menuitem> tag defines a menu that the user can invoke from a pop-up menu. Currently, this function is supported in Firefox only.

For example:

<menu type="context" id="mymenu">
<menuitem label="Refresh" onclick="windows.location.reload()" 
 icon="ico_reload.png">
</menuitem>
</menu>