CreateaFreeWebsite
with Responsive Web Design

web Hosting
Menu

List Tag - UL, OL, DL

Lists can be great tools for presenting data on a webpage.

Their various types can be used separately or they can be nested within each other to present complicated data displays in an organized manner.

Lists can be used for other purposes like creating drop down menus like the one used on the top of this page.

There are 3 different kinds of lists which can be displayed using HTML.

They are:
Unordered,
Ordered
and Definition lists.

Most inline attributes for setting list types are deprecated in the latest version of HTML4.

Use style sheets to set types and attributes.

Note: Items in a list do require a closing tag for w3c compliance. </li>

Unordered Lists - UL

List items in an unordered list are preceded by a bullet.

To designate the bullet selection of DISC, SQUARE or CIRCLE use style sheets.
Example: list-style : disc or list-style-type : disc.

To eliminate the bullet use the style sheet code:
list-style : none or list-style-type : none.

 

Unordered list:


The Code:
<ul style="list-style: disc">
<li>The unordered list</li>
<li>The ordered list</li>
<li>The definition list</li>
</ul>

Unordered list:


The Code:
<ul style="list-style: square">
<li>The unordered list</li>
<li>The ordered list</li>
<li>The definition list</li>
</ul>

 

Ordered Lists - OL

Ordered List Types: The items of an ordered list are preceded by letters or numbers instead of bullets. The choices are integers as 1,2,3....., letters as upper or lower case A,B,C... a,b,c.... and Roman Numerals upper or lower case as I,II,III... i,ii,iii....

Types of ordered lists are set using style sheets.
Example: list-style : lower-alpha or list-style-type : integer
Choices are: integer, lower-alpha, upper-alpha, lower-roman, upper-roman.

 

Ordered list (Integer):

  1. Business Plan
  2. Obtain Licensing
  3. Obtain Financing


The Code:
<ol style="list-style-type: integer">
<li value="5">Business Plan</li>
<li>Obtain Licensing</li>
<li>Obtain Financing</li>
</ol>

Ordered list (Lower alpha):

  1. Business Plan
  2. Obtain Licensing
  3. Obtain Financing

The Code:
<ol style="list-style-type: lower-alpha">
<li value="5">Business Plan</li>
<li>Obtain Licensing</li>
<li>Obtain Financing</li>
</ol>

 

The Start attribute used in earlier versions of HTML is Deprecated.

You designate the starting letter or number in an ordered list using the value attribute in the list item tag as shown above.

 

Definition Lists - DL

The definition list is handy for displaying a list of terms and their definitions. The definition <dd> is automatically indented below its associated term <dt>.

 

Definition list:

Aardvark
An anteater. Animal with a very long snout.
Orangutan
A monkey with very long arms.
Zebra
A pony with stripes.

The Code:
<dl>
<dt>Aardvark
<dd>An anteater. Animal with a very long snout.</dd>
<dt>Orangutan
<dd>A monkey with very long arms.</dd>
<dt>Zebra
<dd>A pony with stripes.</dd>
</dl>

 

An easy way to remember which tag goes where: <dt> = Define Term
<dd> = Define Definition

 

Nesting Lists

Different types of lists can be nested or placed within each other to create sophisticated hierarchical structures.

Nested lists are often used to make drop down menus using CSS.

 

  1. Item Ordered List
  2. Item Ordered List
    • Sub Item Unordered List
      Term Definition List
      Definition
      Term Definition List
      Definition
    • Sub Item Unordered List
    • Sub Item Unordered List
  3. Item Ordered List
  4. Item Ordered List
Definition List Term
  • Items in Definition
  • Items in Definition
  • Items in Definition
  • Items in Definition
Definition List Term
  1. Ordered Items in Definition
  2. Ordered Items in Definition
  3. Ordered Items in Definition
  4. Ordered Items in Definition
Definition List Term
Definition Normal

 

 

Free Tools We Recommend

Free Logo Generator Turbologo.com
If you are building a website for business you need to begin thinking about creating a brand identity. An unforgettable logo could be just the start you need. You can create it free at Turbologo.com. They also provide generators for business cards and letterheads.
FREE HTML Editor (Windows): NoteTab Light
All the features of a commercial HTML editor.
FREE Apache Server (Windows): IndigoAmpp
Set up a real time server environment right on your PC. Test forms and scripts before uploading to your web space.
Linux Users
If like us, you've left the insane world of Microsoft Windows for the even worse experience of Linux, we recommend the BlueFish HTML editor. You'll find it in your software repository. It does have some QUIRKS, but it's FREE.
For image resizing we've found the easiest Linux tool to be Krita.