[warebiz] :: HTML Made Simple :: HTML Lists - Looking Sharp and Organized

You are here --> [HTML Lists - Looking Sharp and Organized] --> Jump To Article

HTML Made Simple
Author: Mike Ware
Website: [warebiz] :: "The Programmer's Domain" - http://warebiz.tripod.com/
Email: warebiz@yahoo.com
Copyright © 2002 Michael Shawn Ware, All Rights Reserved.

TABLE OF CONTENTS
***************************************************************************************
 --> Getting Started with HTML - First Things First
 --> Ground Zero - Where Do I Begin?
 --> HTML Tags - It's All About Tags
 --> Character Formatting - How to Spice Up Text
 --> [HTML Lists - Looking Sharp and Organized]
 --> Hyperlinks - Getting Out and Around
 --> HTML Tables - Far From Picnic Tables
 --> Displaying Images - Adding Life to Your Pages
 --> HTML Forms - Forming What?
 --> Image Mapping and Editing - Importance of Being Unique
 --> Frames - Structuring Static Document Layout

***************************************************************************************

HTML Lists - Looking Sharp and Organized

There may be times when web designers need to organize information or images in a neat, list format. HTML supports the following three block-level list types: unnumbered ( ul ), numbered ( ol ), and definition lists ( dl ).

Unumbered or unordered lists are usually displayed with bullets, which depict each new line of information to be displayed in the list structure. Unordered lists should be used when needing to display a related group of data not necessarily in any particular order. The following are the steps needed to create an unnumbered list:

 1 - Start with the opening unnumbered list tag <ul>.
 2 - Enter the list item tag <li> followed by the item to be listed.
 3 - Continue to list items using the list item tag.
 4 - End the unnumbered list by using the closing tag </ul>.

NOTE: The type="" attribute can be used in the opening <ul> tag to specify a square, circle, or disc shaped bullet. If no bullet is specified, the default solid disk shape is used. Also note that the closing </li> tag is optional when entering list <li> items.

The following code illustrates an example of an unnumbered list:

Example 1: Unumbered/Unordered list

<html>
<head><title>Unordered List Example</title></head>
<body>

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

</body>
</html>

The above HTML code would produce the following results in a web browser:

List Item 1
List Item 2
List Item 3
List Item 4

Numbered lists are coded identical to an unnumbered list except for the opening and closing tag, which are: <ol> </ol>. Numbered lists should be used when needing to display data in steps or numerical sequential order.

NOTE: The type="" attribute can be used in the opening <ol> tag to specify different types of numbering styles. If no value is specified, the default Arabic numbering style is used. Also note that the closing </li> tag is optional when entering list <li> items. The following is a listing of the possible numbering styles to specify using the type="" attribute:


    VALUE           MEANING
    1               Arabic (1, 2, 3, ...) [default]
    A               Alphabetic uppercase
    a               Alphabetic lowercase
    I               Roman numeral uppercase
    i               Roman numeral lowercase

The following code illustrates an example of a numbered list:

Example 2: Numbered/Ordered list

<html>
<head><title>Numbered List Example</title></head>
<body>

<ol type="A">
<li>List Item 1
<li>List Item 2
<li>List Item 3
<li>List Item 4
</ol>

</body>
</html>

The above code would produce the following results:

List Item 1
List Item 2
List Item 3
List Item 4

Definition lists can be used for two purposes. If needing to list terms and definitions, designers can use alternating definition tags <dt> and definition data tags <dd>. Note that using closing tags when using the <dt> and <dd> tags is optional. Designers can also use a definition list when using a custom bullet to represent each new list content line. If using a custom bullet, only <dd> opening and closing tags should be used to list the bullet images and items of choice. To begin and end a definition list, use the <dl></dl> start and closing tags.

The following examples illustrate the two types of definition lists:

Example 3: Definition list - terms and definitions

<html>
<head><title>Definition List Example</title></head>
<body>

<dl>
<dt>Word 1</dt><dd>This corresponds to the meaning of word 1.</dd> 
<dt>Word 2</dt><dd>This corresponds to the meaning of word 2.</dd> 
<dt>Word 3</dt><dd>This corresponds to the meaning of word 3.</dd> 
<dt>Word 4</dt><dd>This corresponds to the meaning of word 4.</dd> 
</dl>

</body>
</html>

The above HTML code would produce the following results in a web browser:

Word 1: This corresponds to the meaning of word 1.
Word 2: This corresponds to the meaning of word 2.
Word 3: This corresponds to the meaning of word 3.
Word 4: This corresponds to the meaning of word 4.

Example 4: Definition list - custom bulletted list

<html>
<head><title>Definition List Example</title></head>
<body>

<dl>
<dd><img src="imgarrow.gif"> List item 1</dd> 
<dd><img src="imgarrow.gif"> List item 2</dd> 
<dd><img src="imgarrow.gif"> List item 3</dd> 
<dd><img src="imgarrow.gif"> List item 4</dd>
</dl>
</body>
</html>

The above HTML code would produce the following results in a web browser:

List item 1

List item 2

List item 3

List item 4

Lists allow for document content to be displayed in a neat, easy to read manner and also add overall document structure.

Move on to next topic: Hyperlinks - Getting Out and Around

Back to Top