Code Punk -- Lesson 5 - Unordered Lists

Free Web tutorials covering HTML, CSS, JavaScript, and DHTML from beginner to advanced. Free downloads and developer resources. Personalized help via email, form, and chat. free, web, tutorials, HTML, html, CSS, css, stylesheet, cascading stylesheet, Javascript, javascript, JavaScript, DHTML, dhtml, beginner, advanced, web development, web page, web site, free web tutorial, free HTML tutorial, free CSS tutorial, free css tutorial, free cascading stylesheet tutorial, free stylesheet tutorial, free javascript tutorial, free DHTML tutorial, free HTML class, free CSS class, free stylesheet class, free cascading stylesheet class, free javascript class, free DHTML class

Home	<Code_Punk>'s Web Tutorials

Website Development and Management

Downloads & Resources

Lesson 5: Unordered Lists

What Is An Unordered List?

An Unordered List is simply a list of items presented in no particular order or priority. They are not numbered or lettered like Ordered Lists (next lesson). Here's an example:

item 1
item 2
item 3

Unordered lists are great for presenting related items of equal priority or value.

Making An Unordered List

We make unordered lists with the <ul> and <li> tags. The <ul> and </ul> tags enclose the entire unordered list. Each item in the list is coded with a <li>, or "list item" tag. Below is the code for the above example. This is placed in the <body> of your page:

This is the code that produced the unordered list at the top of this page. Notice that the whole thing is nested inside the <ul> and </ul> tags. Also notice that there is no closing </li> tag. List items only need the single opening <li> tag. All list items and <li> tags must be nested inside the <ul> tags.

What the unordered list does is put a dot, called a "bullet" before each list item. This tells the viewer that the unordered list is a list of related items. Lists are often used with header tags to make a title for the list:

<h3>A List Of Items</h3>

<ul>

<li>item 1
<li>item 2
<li>item 3

</ul>

The above would look like this:

A List Of Items

Item 1
Item 2
Item 3

Changing The "Bullet"

You don't have to settle for a "dot" as a bullet. You can use a circle (unfilled dot) or square, too. To do this you must use the TYPE attribute in the list's <ul> tag:

This would produce the bulleted list below:

Item 1
Item 2
Item 3

Using the value "circle" for TYPE would produce circles instead of squares. You can mix this up a bit by using the TYPE attribute in the individual <li> tags instead of the <ul> tag.

This would produce the list below:

item 1
item 2
item 3

The three possible attributes for TYPE in an unordered lists are "disc" (default), "square", and "circle".

Aligning Lists

Lists do not align well. This is especially true if the list item strings are of different lengths. I'll demonstrate this by using the <div align="center"> tag to try to center the list. The code would be:

<div align="center">

<ul>
<li>item 1
<li>item 2 this item is longer than the others
<li>item 3
</ul>

</div>

The <div> tags do center the list, but the list's internal alignment is lost. Each list item (<li>) is centered individually. The code would look like this:

Item 1
Item 2 this item is longer than the others
Item 3

The above may or may not be an effect you want. When we learn about HTML tables, we'll see how to tame lists a little more. For now just practice making unordered lists with different bullets. Then we'll move on to Ordered Lists.

Continue To Lesson 6 -- Ordered Lists >>>

<<< Back To Beginning HTML Index

<Code_Punk>'s Web Tutorials