Useful Resources
syllabus | schedule | exercises | assignments | class notes | resources | students | ARTC courses
HTML Lists

Lists

<ol>
	<li> Put an item here</li>
	<li> Put an item here</li>
	<li> Put an item here</li>
</ol>

Ordered list

<ol></ol>

These are the types of ordering:
  1. style="list-style-type: upper-alpha;" -will give you A B C D E F G...
  2. style="list-style-type: lower-alpha;" -will give you a b c d e f g...
  3. style="list-style-type: decimal;" -will give you 1 2 3 4 5 6 7 8 9... THIS IS THE DEFAULT!
  4. style="list-style-type: upper-roman;" -will give you I II III IV V VI... Roman Numerals
  5. style="list-style-type: lower-roman;" -will give you i ii iii iv v vi... small roman numerals
Using the list item tag <li> will put each item on a separate line, instead of using a line break.

list One:

  1. I. Chapter 1 - Introduction
  2. II. Chapter 2 - Birth
  3. III. Chapter 3 - Childhood
  4. IV. Chapter 4 - Adolescence
  5. V. Chapter 5 - Adult

CODE for list one:

	<ol>
		<li>I. Chapter 1 - Introduction</li>
		<li>II. Chapter 2 - Birth</li>
		<li>III. Chapter 3 - Childhood</li>
		<li>IV. Chapter 4 - Adolescence</li>
		<li>V. Chapter 5 - Adult</li>
	</ol>
	

list Two:

  1. Chapter 1 - Introduction
  2. Chapter 2 - Birth
  3. Chapter 3 - Childhood
  4. Chapter 4 - Adolescence
  5. Chapter 5 - Adult

CODE for list two:

	<ol style="list-style-type: decimal;">
		<li>Chapter 1 - Introduction</li>
		<li>Chapter 2 - Birth</li>
		<li>Chapter 3 - Childhood</li>
		<li>Chapter 4 - Adolescence</li>
		<li>Chapter 5 - Adult</li>
	</ol>
	

list Three:

  1. Chapter 1 - Introduction
  2. Chapter 2 - Birth - (Notice I've changed the TYPE!)
  3. Chapter 3 - Childhood
  4. Chapter 4 - Adolescence
  5. Chapter 5 - Adult

CODE for list three:

	<ol style="list-style-type: upper-alpha;">
		<li>Chapter 1 - Introduction</li>
		<li style="list-style-type: upper-alpha;">Chapter 2 - Birth</li>
		<li >Chapter 3 - Childhood</li>
		<li>Chapter 4 - Adolescence</li>
		<li>Chapter 5 - Adult</li>
	</ol>
	

Unordered lists

<ul></ul>

Attributes: TYPE
An Unordered list is made with bulleted points. There are THREE Types of bullets:
  • style="list-style-type:disc;" is the DEFAULT and is a solid ball <li style="list-style-type:disc">
  • style="list-style-type:circle;" will give you an empty circle <li style="list-style-type:circle;">
  • style="list-style-type:square;" will give you a square <li style="list-style-type:square;">
  • I have selected the list style type to be square in the <ul> tag: <ul style="list-style-type:square;"> for this list.
  • But I can OVERRIDE it by changing it's css in the li tag!
  • This way you can intermix discs, circles, and bullets in the same list.
 

Definition lists

<dl></dl>
Instead of list Items, you have two parts, <dt> and <dd> within the list:

CODE for Definition list:

	<dl>Define your Definition list with dl
		<dt>Definition Title dt</dt>
		<dd>Definition dd</dd>
		<dt>Another Word</dt>
		<dd>Another Definition</dd>
		<dt>Another Word</dt>
		<dd> Another Definition</dd>
	</dl>
	

Nested lists

You can have lists within lists, or an Outline-type list (Table of Contents, etc.)
The OFFICIAL Outlining order for lists is: I, A, 1, a, i.
If you nest an UNORDERED list, the default order is: disc, circle, square, and square for rest.
  1. Chapter 1 - Lifestages
    1. Lifestages of a fruitfly
    2. Lifestages of a paramecium
    3. Lifestages of a Butterfly
      1. Egg stage
        1. Many eggs laid at once
        2. Hatch 2 minutes after laid
      2. Pupa
      3. Larvae
      4. Adolescence
      5. Adult
      6. Death (they only live a couple days)
  2. Chapter 2
  3. Chapter 3
  4. Chapter 4

CODE for Nested list:

	<ol style="list-style-type: upper-roman;">
		<li>Chapter 1 - Lifestages</li>
		<ol style="list-style-type: upper-alpha;">
			<li>Lifestages of a fruitfly</li>
			<li>Lifestages of a paramecium</li>
			<li>Lifestages of a Butterfly</li>
		<ol style="list-style-type: upper-alpha;">
			<li>Egg stage</li>
		<ol style="list-style-type: upper-alpha;">
			<li>Many eggs laid at once</li>
			<li>Hatch 2 minutes after laid</li>
		</ol>
			<li>Pupa</li>
			<li>Larvae</li>
			<li>Adolescence</li>
			<li>Adult</li>
			<li>Death (they only live a couple days)</li>
		</ol>
	</ol>
		<li>Chapter 2</li>
		<li>Chapter 3</li>
		<li>Chapter 4</li>
	</ol>              
		

Adding CSS:


Replace the TYPE attribute with a STYLE attribute using list-style-type / list-style-position / list-style-image.
list-style-type: choose one of the following bullet styles
none, square, disc, circle, upper-alpha, lower-alpha, upper-roma , lower-roman, decimal (choose one)
<ol style="list-style-type:circle;">
list-style-position: inside or outside
inside - Indents the marker and the text.
outside - Keeps the marker to the left of the text
<ol style="list-style-position:inside;">
  1. Put this inside
  2. Put this inside
  1. Put this outside
  2. Put this outside
list-style-image: url('image location')
<UL style="list-style-image: url('images/arrow.gif');"> 
--single quotes around image pathname.
  • arrow bullet
  • arrow bullet
  • arrow bullet

[BACK to RESOURCES]