This Tutorial
2 - Unordered lists
Related Pages
PHP program control structures: switch and if statements
Web page templates
Interactive web page colours CSS tutorial
Interactive CSS fonts tutorial
Setting web page fonts using CSS

HTML Tutorial

Lists - 2

Unordered Lists

An unordered list is indented, and each item is bulleted. You use <UL> ... </UL> tags to surround an unordered list.

List Items

Lists items are inserted between the two <UL> tags, the same as <OL> tags. You still need the list tags to insert a list item. Like ordered lists, list items for unordered lists use the <LI> starting tag and </LI> closing tag, with the list item text between the tags.

  • To display the above list as bullet points, alter the list.htm file to:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
code spacer<head><title>My second list page</title>
code spacer</head>
code spacer<body>
code spacer<p>So far, I have commpleted:</p>
code spacer<ul>
code spacer<li>text</li>
code spacer<li>spacing</li>
code spacer<ul>
code spacer<li>horizontal rule</li>
code spacer<li>single space</li>
code spacer<li>block quote</li>
code spacer</ul>
code spacer<li>links</li>
code spacer</ul>
code spacer<p>Not too bad!</p>
code spacer</body>
</html>

with the result:

Browser display for an unordered list within another unordered list

Note that the outer list and inner list have different default bullet types. This is the way most software packages handle nested bulletss, and is expected behaviour.

List Type

List type defines how the list items are labeled. The default type is bullets, but you can change this to circles or squares. The <UL> tag also has a TYPE attribute, like
<UL TYPE="list_type">

The list_type can be rany of the following:

  • TYPE="disc" - Displays list items in bullets
  • TYPE="circle" - Displays list items in circles
  • TYPE="square" - Displays list items in squares

Item Type

Item type defines how each individual list item is labeled, so you can select the type for each item rather than the whole list. The type attribute for list items is the same as the type attribute for the <UL> tag:
<LI TYPE="list_type">

Like the <UL> tag, you can use TYPE="disc", TYPE="circle" and TYPE="square" as attributes of the <LI> tag. These look the same as they do when used for the entire list in the <UL> tag.


  • Home
  • |
  • Sitemap
  • |
  • Databases
  • |
  • Web development
  • |
  • Delphi development
  • |
  • Image manipulation
  • |
  • KaSaB
  • |
  • Contact