Web Design - El Centro College
 
HTML More HTML JavaScript Design Dreamweaver Fireworks Flash Photoshop More Info Home
 

Lists

See Lists In Action!

Simply your webpage with lists. Lists make it easier for your users to view web page information. They can easily be added to or deleted from.

But we can not mix headings and lists! This will confuse a browser.

Item Lists

Ordered list <ol>

  1. usually numbered
  2. start each item in the list with the tag "list item" <li>
  3. start & end tags should be on separate lines

Unordered list <ul>

  • usually bulleted
  • start each item in the list with the tag "list item" <li>
  • start & end tags should be on separate lines

Ordered and unordered lists can easily be converted from one format to the other by changing the beginning and ending tag.

Nested Lists

  • lists can be inserted within each other - similar to an outline
  • most browsers will vary the <ul> bullet when an unordered list is nested inside an unordered list
  • use sparingly since it is difficult to follow the coding
Ordered List
Unordered List
HTML Coding
Browser Display
HTML Coding
Browser Display
<h3>Attractions</h3> Attractions <h3>Attractions</h3> Attractions

<ol>
      <li>Six Flags</li>
      <li>Arborteum</li>
      <li>Sixth Floor</li>
</ol>

 

  1. Six Flags
  2. Arborteum
  3. Sixth Floor
 <ul>
      <li>Six Flags</li>
      <li>Arborteum</li>
      <li>Sixth Floor</li>
</ul>

 

  • Six Flags
  • Arborteum
  • Sixth Floor

Change the type of numbering:

<ol type="A">
Each line begins with a capital letter A

<ol type="a">
Each line begins with a lowercase letter a

<ol type="I">
Each line begins with a capital Roman numeral I

<ol type="i">
Each line begins with a lowercase Roman numeral i

<ol type="1">
Ordered list using numbers - default setting

Change the start number by adding START=value:

<ol start="5"> start list with the number five.

Combine the TYPE and START attributes:
<ol type="A" start="M">

Change the numbering within the list:
<li value="4">

Change the type of bullet:

  • <ul type="circle">
  • <ul type="square">
  • <ul type="disc">
Nested List
<h4>El Centro College</h4>
    <ol>
        <li>Health Occupations Division</li>
        <li>Business Division</li>
                <ul>
                        <li>Computer Science Dept.</li>
                        <li>Accounting Dept.</li>
                </ul>
        <li>Communications & Math Division</li>
        <li>Arts & Sciences Division</li>
    </ol>

El Centro College

  1. Health Occupations Division
  2. Business Division
    • Computer Science Dept.
    • Accounting Dept.
  3. Communications & Math Division
  4. Arts & Science Division

 

Definition list <dl>

Involves two additional codes:

<dt> definition term

<dd> definition definition

HTML Coding
Browser Display
<h4>Web Authoring Terminology</h4>
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
<dt>Netscape</dt>
<dd>Web Browser</dd>
</dl>

Web Authoring Terminology

HTML
Hypertext Markup Language
Netscape
Web Browser

Return to the Top