Create a Free Website

HTML Code Tutorial

You can Test the simple list Codes online in this: HTML editor

Lists

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>

Create a FREE Website


NO CODING!!

Create beautiful, professional websites
WITHOUT Learning to Code!!

19 Million+ Amazing FLASH websites
created by people just like you,
with no knowledge of HTML coding.

Create Free Websites


Start Your FREE Website Now!



Unordered Lists

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 unordered list
  • The ordered list
  • The definition 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 unordered list
  • The ordered list
  • The definition list


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

You can Test the simple list Codes online in this: HTML editor



Ordered Lists

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:
  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:
  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 can restart the lettering or numbering in a nested list using the value attribute in the list item tag as shown above.

You can Test the simple list Codes online in this: HTML editor

Definition Lists

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

You can Test Code in this HTML editor.

Nesting Lists

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

  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

Tricks With Lists and CSS

Lists can be used to create menus or text site maps for your website.

You could use a list of simple headings and hyperlinks and set them in a structure similar to one of those shown above. Or you could use a combination of hyperlinks and images.

Table of Contents:



The Style Sheets:
#links ul li a{ font-family: Arial;font-style : normal ;font-size : 12pt; font-weight :bold;text-decoration : none; color :#000000}
#links ul li a:hover{ font-family: Arial;font-style : normal ;font-size : 12pt; font-weight :bold;text-decoration : none; color :#ff0000}


The code:
<div ID="links" STYLE=";border: solid #000 2px; width :250px"> <p STYLE="font-family: Arial;font-style : italic ;font-size : 14pt; font-weight :bold;text-align : left; color :#0000FF">Table of Contents:
<ul style="list-style-image: url(images/heart.gif)">
<li><a href="#toppage">Unordered Lists</a></li>
<li><a href="#ordered">Ordered Lists</a></li>
<li><a href="#definition">Definition Lists</a></li>
<li><a href="#tricks">Tricks With Lists</a></li>
</ul>
</div>



Hover Property

IE7 and Mozilla browsers accept the CSS hover property for list items. This allows you to create some interesting effects when building menus and navigational links.



If you are using an IE7 or Mozilla browser, the buttons on the left will change color when you hold the mouse cursor over them.

The effect is created by using 2 different buttons.

The second button of a different color is displayed when the hover property is accessed for the list item. There is no confusing javascript - just 2 lines in the style sheet.

The HTML code:
<td id="buttons" width="190" align="center" style="background-color: #0060ff; border-right: solid #000000 2px; border-bottom: solid #000000 2px; border-left : solid #97BCF9 1px; border-top : solid #97BCF9 1px"><br>
<!--Edit Links Here-->
<ul>
<li><a href="#toppage">Page Number Two</a></li>
<li><a href="#toppage">Page Number Three</a></li>
<li><a href="#toppage">Page Number Four</a></li>
</ul><br>
</td>

The CSS code:
#buttons ul {list-style: none; text-indent: 0px; margin: 0px; padding: 0px }
#buttons li {background-image : URL(images/button15.png); background-repeat : no-repeat; width:181px; height:41px; text-align: center; padding-top: 8px}
#buttons li:hover {background-image : URL(images/button16.png); background-repeat : no-repeat; width:181px; height:41px; text-align: center; padding-top: 8px}
#buttons a { font-family:arial,serif; font-style: normal; font-weight: bold; font-size:8pt;text-decoration:none;color: #ff9900; margin: 0px; padding : 0px}
#buttons a:hover { font-family:arial,serif; font-style: normal; font-weight: bold; font-size:8pt;text-decoration:none;color: #0060ff ; margin: 0px; padding : 0px}

Copy these buttons to make it work on your web page:  
Best when placed on background color #0060ff

Note: If the list item hover property doesn't work in your IE7 browser try changing the Doctype at the top of your web page to:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

You can Test the simple list Codes online in this: HTML editor

Take a quiz. Take a Quiz on this Information.

Check out our Free Frames Template Kit or try our Free Frames Kit Demo