HTML Lists
HTML Lists Tutorial and Information

• HTML Basics

HTML Tutorial - HTML Lists

Some web designers are still using the <br> or <br /> tag to create their lists. Here is the right way to create a correct list. With HTML you can create ordered lists, unordered lists, definition lists, and you can even create lists within lists, also known as nested list.

How To Create An Unordered List

By default, an unordered list is indicated by small round black bullets (see CSS). In this case we have specified the bullets to be square. With an unordered list there is no consecutive numbering of the items. An unordered list starts with the <ul> tag and must be closed. Each item starts with the <li> tag, which must be closed as well. Here is an example of an unordered list:

<ul>
<li>Unordered List Item 1</li>
<li>Unordered List Item 2</li>
<li>Unordered List Item 3</li>
</ul>

• Unordered List Item 1
• Unordered List Item 2
• Unordered List Item 3

How To Create A Ordered List

By default, an ordered list is indicated by consecutive numbering. But ordered lists can have numbers, letters, or roman numbers; lowercase and uppercase. An ordered list starts with the <ol> tag and must be closed. Each item starts with the <li> tag, which must be closed as well. Here is an example of an ordered list:

<ol>
<li>Ordered List Item 1</li>
<li>Ordered List Item 2</li>
<li>Ordered List Item 3</li>
</ol>

1. Ordered List Item 1
2. Ordered List Item 2
3. Ordered List Item 3

Add the type attribute to an ordered list element to further specify list numbering:

<ol type="A"> Uppercase A stands for uppercase letters A. B. C. D.
<ol type="a"> Lowercase a stands for lowercase letters a. b. c. d.
<ol type="I"> Uppercase I stands for roman uppercase letters I. II. III. IV.
<ol type="i"> Lowercase i stands for roman lowercase letters i. ii. iii. iv. 

How To Create A Nested List

A nested list is a list within a list. Here is an example for a nested list using the type attribute with the value "A" for upper case letters, and the value "i" for lower case roman letters.

<ol type="A">
<li>Ordered List Item 1</li>
<li>Orders List item</li>
<li>Ordered List Item 2
   <ol type="i">
   <li>Ordered List Item 3</li>
   <li>Ordered List Item 1</li>
   <li>Orders List item</li>
   <li>Orders List item</li>
   </ol>
   </li>
<li>Orders List item</li>
<li>Orders List item</li>
</ol>

Here is what this ordered nested list looks like in a web browser:

1. Ordered List Item 1
2. Orders List item
3. Ordered List Item 2
   1. Ordered List Item 3
   2. Ordered List Item 1
   3. Orders List item
   4. Orders List item
4. Orders List item
5. Orders List item

How To Create A Definition List

A definition list is a list of terms with a short description or explanation of the terms. Something like you would see in a dictionary or glossary of terms. A definition lists starts with the <dl> tag. The terms start with the <dt> tag. The description or explanation of terms starts with <dd>

<dl>
  <dt>Term One</dt>
    <dd>Description of term one</dd>
  <dt>Term Two</dt>
    <dd>Description of term two</dd>
  <dt>Term Three</dt>
    <dd>Description of term three</dd>
</dl> 

Here is what the definition list looks like in a browser window:

Term One

Description of term one

Term Two

Description of term two

Term Three

Description of term three

---

Note: The elements <dir> and <menu> are deprecated in HTML and should no longer be used to create lists. These elements are not recommended by the W3C. Use unordered lists or ordered lists instead!

• Back
• Next

---

HTML Related Links

• How to Get a Web Site or Online Business Started
• CMS - Content Management System
• How to Choose and Register the Right Domain Name
• Making Revenue - How to Make Money With a Website
• Server and Hosting

© This Article is Copyrighted by WebmasterSeminar.com

Please do not copy or reproduce this article in whole or part, in any form, without mentioning the source and including a live link back to WebmasterSeminar.com - Thank You!

LINK TO THIS TUTORIAL:

Copy the code below and paste into your web page

<a href="http://www.webmasterseminar.com/htmllists.php">
Webmaster Seminar</a><br />
HTML Lists - Free Information, Tutorials and HTML Resources