for web designers
Red, Green and Blue


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 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>

</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

  1. Albizia julibrissen Silk Tree highly recommended 30 feet with 30 foot spread, deciduous.

  2. 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

A

i

I

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>



 

 

List - Horizontal Menu

 

 

html


<ul id="menu">
<li ><a href="#">ONE</a></li>
<li><a href="#">TWO</a></li>
<li><a href="#">THREE</a></li>
<li><a href="#">FOUR</a></li>
</ul>
</div>

 

CSS


#menu li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}


share / bookmark



Send the link for this page to yourself




books



Both of the following books are good but they mainly cover the basics of what the current browsers (early 2011) can do at the moment.

Type

Html5 for Web Designers
by Jeremy Keith
A List Apart

Introduction to HTML5

Introduction to HTML5
by Bruce Lawson and Remy Sharp
Amazon


join follow up up