Easy Web Site Design

Lists are a useful way of getting information across quickly and are used frequently on the Web. HTML allows you to create three types of lists: unordered, numbered or ordered, and definition. The first two are found more commonly than the last.

As usual let's illustrate these by example, starting with an unordered list:

<ul>
<li>Eggs</li>
<li>Sugar</li>
<li>Milk</li>
<li>Butter </li>
</ul>

Here's the output:

• Eggs
• Sugar
• Milk
• Butter

The list is surrounded by <ul> </ul> tags, each item on the list is surrounded by <li> </li> tags. Note that each list item itself may contain HTML formatting.

Now for a numbered list:

<ol>
<li>Design concept</li>
<li>Create HTML</li>
<li>Upload to ISP</li>
</ol>

back to top

Here's the output:

1. Design concept
2. Create HTML
3. Upload to ISP

This time <ol> </ol> tags surround the list. The style of numbering (1, 2, 3... i, ii, iii etc) may be specified using a Style Sheet.

Definition lists are used to provide a list of terms along with their definitions. Here's an example:

<dl>
<dt>konnichiwa</dt>
<dd>hello</dd>
<dt>o genki desu ka</dt>
<dd>how are you?</dd>
</dl>

And the output:

konnichiwa

hello

o genki desu ka

how are you?

The definition list is surrounded by <dl> </dl> tags. Items to be defined (definition terms) are surrounded by <dt> </dt> tags. Definitions (definition descriptions) are surrounded by <dd> </dd> tags.

Want to learn more? See

W3Schools HTML Tutorial

W3C - Dave Raggett's Introduction to HTML

NCSA - A Beginner's Guide to HTML

HTML 4.01 Specification

USENET newsgroups:
alt.html
comp.infosystems.www.authoring.site-design
comp.infosystems.www.authoring.html
alt.macromedia.dreamweaver
macromedia.dreamweaver

back to top

More on HTML