Cafe LaTe Home
Contents
Background
Getting Started
Images
Links
Tables
Lists
Resources
Tag Index
Unordered Lists

Section VI: HTML Lists
   Lesson 6-1: Unordered Lists



    In this lesson you will learn how to create unordered lists. If you have read the introduction to this section, you understand why it is not practical or possible to use line breaks BR and spaces   to align text in lists. If you have not read the introduction to this section, go back one page. Make sure you understand the information there before continuing.

   It is easy to create different kinds of lists in HTML. One of the most common lists is the unordered list, sometimes called a bulleted list. You use the unordered list element for lists of items which have no special order. Each item is marked with a "bullet" character. Here is an example of an unordered list:

Today's shopping list:
  • bread
  • milk
  • eggs

   The dots on the left of each item are called bullets in English. You can see that list items are also indented and correctly aligned. This list is created using no line break tags or space codes. The HTML tags for creating unordered lists are simple and easy to remember. A pair of UL tags is used to create the list. UL, of course, stands for Unordered List. An LI tag is placed before each list item. LI, of course, stands for List Item. The HTML code for the list above looks like this:

Today's shopping list:
UL
LIbread /LI
LImilk /LI
LIeggs /LI
/UL

   Everything inside the UL tags is indented. Usually, you don't want to indent the title, so if your list has a title, it is not usually placed inside the list itself. Also notice that the LI tag can be used as an empty element, or a container. A closing /LI tag can be used, but it is optional. By the way, have you noticed that the Review section at the bottom of each lesson page is created with unordered list tags.

   The default symbol used in unordered lists is a small "disk". Small squares or circles can also be used. The symbol is set using the TYPE="disc/circle/square" attribute of the opening UL tag. Here are some examples:

ul type="disk"
Today's shopping list:
  • bread
  • milk
  • eggs
ul type="square"
Today's shopping list:
  • bread
  • milk
  • eggs
ul type="circle"
Today's shopping list:
  • bread
  • milk
  • eggs



Need the
   source file?

If you have not done the previous lessons, and are just starting here, use this button to pop up a copy of the file containing all material covered up to this lesson. Then, just save the source file to a floppy disk.

Copy source file
Practice:

   All right, let's give it a try. Open your practice file, add the red text somewhere at the bottom of your file. Then, save your file, and check it with your browser:

BHelpful Hints List One/B
UL
LIUse your taskbar to quickly switch between windows.
LIUse copy and paste to copy pieces of HTML code or text that you use over and over again.
LIUse ( Ctrl ) + ( ] ) and ( Ctrl ) + ( [ ) to increase or decrease the font size in your browser window. Notice how your lines wrap with different font sizes.BR
If neither [Ctrl]+[]] nor [Ctrl]+[[] work with your browser, you can do the same thing from your browser's View menu.
LIAnother good way to check how your page will look on different computer screens is to resize your browser window while looking at your page.
/UL

To see what the result should look like, click here!




Review:

Look! This is an unordered list.
  • Unordered lists are created with the UL /UL tags.
  • The LI tag marks list items.
  • The closing /LI tag is optional.
  • Unindented titles are put before the opening UL tag.
  • Bullet symbols for unordered list items can be set with the TYPE="disc/circle/square" attribute of the opening UL tag.

 

Previous Lesson Next Lesson
 

[Cafe LaTe Home] [Chat Lounge] [Community Center] [Newspaper] [HTML Tutor]


Last revision: 2002/03/04, Copyright © The Three Cities Workshop