Creating Lists in HTML

PRISM Multimedia

Lists are often used to present information in an easy to read fashion.

Lists can also be used to indent information. Lists can be bulleted, numbered or printed without bullets and numbers.

It should also be noted that in any type of list, you can still use the line break and paragraph tags and the normal text markup tags to emphasize text, etc.

Types of Lists

There are three types of lists: ▪ UNORDERED LISTS (uses bullets) ▪ ORDERED LISTS (uses numbers) ▪ DEFINITION LISTS (no numbers or bullets).

CREATING AN UNORDERED LIST

Unordered Lists are bulleted lists. You use the opening tag <UL> to indicate the beginning of an Unordered List.

To indicate the end of the Unordered List, you use the ending tag </UL>.

Each item in your bulleted list must begin with the tag <LI>.

<LI> stands for List Item.

Look at these examples to see the detailed syntax.

HTML-CODE EXPLANATION / EXAMPLE

<ul><li>text</li><li>text</li><li>text</li></ul>

•Makes a bulleted list using the default bullet type:text•text•text

<ul type="disc">•Starts a bulleted list using discs as bullets:This is one line•This is another line•And this is the final line

<ul type="circle">

oStarts a bulleted list using circles as bullets: This is one lineoThis is another lineoAnd this is the final line

<ul type="square">Starts a bulleted list using squares as bullets: This is one lineThis is another lineAnd this is the final line

How to make different kinds of numbered lists.

You have the following number options:Plain numbers

Capital Letters Small Letters Capital Roman Numbers Small Roman Numbers

HTML-CODE EXPLANATION / EXAMPLE

<ol><li>text</li><li>text</li><li>text</li></ol>

1.Makes a numbered list using the default number type:text2.text3.text

<ol start="5">

5.Starts a numbered list, first # being 5.This is one line6.This is another line7.And this is the final line

<ol type="A">

A.Starts a numbered list, using capital letters.This is one lineB.This is another lineC.And this is the final line

<ol type="a">

a.Starts a numbered list, using small letters.This is one lineb.This is another linec.And this is the final line

<ol type="I">

I.Starts a numbered list, using capital roman numbers.This is one lineII.This is another lineIII.And this is the final line

<ol type="i">

i.Starts a numbered list, using small roman numbers.This is one lineii.This is another lineiii.And this is the final line

<ol type="I" start="7">VII.An example of how type and start can be combined.This is one lineVIII.This is another lineIX.And this is the final line

<ol type="1">

1.Starts a numbered list, using normal numbers.This is one line2.This is another line3.And this is the final line

CREATING A DEFINITION LIST (NO BULLETS OR NUMBERS)

A Definition List also manipulates text for you. Unordered Lists and Ordered lists are "single item" or "one tier" lists because each <LI> creates one list item.

A Definition List is a "two item" or a "two tier" list

<DL> <DT>flame <DD>an ugly argument in a newsgroup <DT>spam <DD>annoying unrequested email <DT>troll <DD>someone who start flames by

posting stupid things </DL>

Output

flame an ugly argument in a newsgroup

spam annoying unrequested email

troll someone who start flames by posting stupid things

THANK YOU