Makin' A List
Most User's Scan the Page
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 lists 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: disc- 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 {
list-style-position: outside;
list-style-type: disc;
}
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
same as above
css
ul {
list-style-position: inside;
list-style-image: url(bullet.png);
}
- 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;
list-style-type:upper-alpha;
list-style-type:lower-alpha;
list-style-type:upper-roman:
list-style-type:lower-roman;
list-style-type:decimal;
arabic numbers are the default so you do not have to include the styles.
Defination
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.- Trees
- - Leaves
- - Blooms
- - Bark
- Flowers
- - Seeds
- - bulbs
- - leaves
<dt>Trees</dt>
<dd>- Leaves</dd>
<dd>- Blooms</dd>
<dd>- Bark</dd>
<dt><br>
</dt>
<dt>Flowers</dt>
<dd>- Seeds</dd>
<dd>- bulbs</dd>
<dd>- leaves</dd>
</dl>
