Makin' A List

Typically web users do not read web pages word by word, instead they scan the page.

When writing for the web you need to stick to the point and not include excessive details. One way to do this and get the user's attention is to organize your page by including lists. You can use more lists when writing for the web than you would when writing for print.

Types of Lists

There are three types of list Unordered, Ordered and Defination. The Marker for the Unordered is a bullet. the one for the for the Ordered List is either numberical or alphabetical. The Defination List is different from the first two in that each section consists of two parts, one for the Term/Title the other for the Defination/information.

Styles

Although you can add the styles (via class/id) to any of the list tags they are normally added to the <ul>, <ol> or <dl> this allows you to set different styles for different types of lists.

Unordered List

- position: outside, type: circle

Albizia julibrissen Silk Tree highly recommended 30 feet with 30 foot spread, deciduous.
Strawberry Tree highly recommended use as a shade shrub or on north exposures, slow growth to 20 feet,

html

<ul class="name of class">
<li>First Item< /li>
<li>Second Item < /li>
</ul>

css

The default for the position is outside therefore is it not really necessary to include that in the style sheet
ul.nameOfClass li{
list-style-position: outside;
list-style-type: disc;
}

Unordered List

position outside type: square

Albizia julibrissen Silk Tree highly recommended 30 feet with 30 foot spread, deciduous.
Strawberry Tree highly recommended use as a shade shrub or on north exposures, slow growth to 20 feet,

html

<ul class="name of class">
<li>First Item< /li>
<li>Second Item < /li>
</ul>

css

ul.nameOfClass li{
list-style-position: outside;
list-style-type: square;
}

Unordered List

position inside, type: image

Albizia julibrissen Silk Tree highly recommended 30 feet with 30 foot spread, deciduous.
Strawberry Tree highly recommended use as a shade shrub or on north exposures, slow growth to 20 feet,

html

<ul class="name of class">
<li>First Item< /li>
<li>Second Item < /li>
</ul>

css

ul.nameOfClass li{
list-style-type:circle;
list-position: outside;
list-style-image: url(images/bullet.png);

}

Unordered List

sans position, sans type:

Albizia julibrissen Silk Tree
- highly recommended
- deciduous

Strawberry Tree
- highly recommended
- growth to 20 feet

html

<ul>
       <li>Albizia julibrissen Silk Tree /li>
             <ul><li>Highly recommended< /li>
                     <li>deciduous< /li>

</ul>

Repeat list for second item

css

Does not have any styles

Unordered List

- position inside, sans type

Albizia julibrissen Silk Tree highly recommended 30 feet with 30 foot spread, deciduous.
Strawberry Tree highly recommended use as a shade shrub or on north exposures, slow growth to 20 feet,

html

<ul class="name of class">
<li>First Item< /li>
<li>Second Item < /li>
</ul>

css

ul.nameOfClass li{
list-style-position: inside;
}

Ordered List

Albizia julibrissen Silk Tree highly recommended 30 feet with 30 foot spread, deciduous.
Strawberry Tree highly recommended use as a shade shrub or on north exposures, slow growth to 20 feet,

html

<ol type="l">
<li>First Item< /li>
<li>Second Item < /li>
</ol>

css

For the example the style for the marker has been placed in the html tag. For css:

list-style-type:circle;
upper-alpha;

lower-alpha;
upper-roman:

lower-roman;
decimal;
arabic numbers are the default so you do not have to include the styles.

Placing the style in the html is shown below

Type Numbering style
All types are placed in the html code for Ordered Lists
Example: <ol type="A"> Upper Case

1
a

arabic numbers

lower alpha

upper alpha

lower roman

upper roman

1, 2, 3
a,b,c,
A,B,C
i,ii, iii,
I, II,III

Defination List

Definition lists are different from first two types of lists in that they consist of two parts the first for a term or title. The other for description/information.

Term or Title: Information or defination; Information or defination
Term or Title: Information or defination
Term or Title: Information or defination

html

<dl>
<dt>Term or Title</dt>
           <dd>Information</dd>
           <dd>Information</dd>
<dt>Term or Title</dt>
           <dd>Information</dd>
<dt>Term or Title</dt>
           <dd>Information</dd>
</dl>