HTML Lists

There are 3 different types of lists. A <ol> tag starts an ordered list, <ul> for unordered lists, and <dl> for definition lists. Use the type and start attributes to fine tune your lists accordingly.

  • <ul> - unordered list; bullets
  • <ol> - ordered list; numbers
  • <dl> - definition list; dictionary

HTML Ordered Lists

Use the <ol> tag to begin an ordered list. Place the <li> (list item) tag between your opening <ol> and closing </ol> tags to create list items. Ordered simply means numbered, as the list below demonstrates.

HTML Code:

<h4 align="center">Goals</h4>
<ol>
<li>Find a Job</li>
<li>Get Money</li>
<li>Move Out</li>
</ol>

Numbered list:

Goals

  1. Find a Job
  2. Get Money
  3. Move Out

Start your ordered list on any number besides 1 using the start attribute.

HTML Code:

<h4 align="center">Goals</h4>
<ol start="4" >
<li>Buy Food</li>
<li>Enroll in College</li>
<li>Get a Degree</li>
</ol>

Numbered List Start:

Goals

  1. Buy Food
  2. Enroll in College
  3. Get a Degree

Nothing fancy here, start simply defines which number to begin numbering with.

HTML Ordered Lists Continued

There are 4 other types of ordered lists. Instead of generic numbers you can replace them with Roman numberals or letters, both capital and lower-case. Use the type attribute to change the numbering.

HTML Code:

<ol type="a">
<ol type="A">
<ol type="i">
<ol type="I">

Ordered List Types:

Lower-Case Letters Upper-Case Letters Lower-Case Numerals Upper-Case Numerals
  1. Find a Job
  2. Get Money
  3. Move Out
  1. Find a Job
  2. Get Money
  3. Move Out
  1. Find a Job
  2. Get Money
  3. Move Out
  1. Find a Job
  2. Get Money
  3. Move Out

HTML Unordered Lists

Create a bulleted list with the <ul> tag. The bullet itself comes in three flavors: squares, discs, and circles. The default bullet displayed by most web browsers is the traditional full disc.

HTML Code:

<h4 align="center">Shopping List</h4>
<ul>
<li>Milk</li>
<li>Toilet Paper</li>
<li>Cereal</li>
<li>Bread</li>
</ul>

Unordered Lists:

Shopping List

  • Milk
  • Toilet Paper
  • Cereal
  • Bread

Here's a look at the other flavors of unordered lists may look like.

HTML Code:

<ul type="square">
<ul type="disc">
<ul type="circle">

Unordered List Types:

type="square" type="disc" type="circle"
  • Milk
  • Toilet Paper
  • Cereal
  • Bread
  • Milk
  • Toilet Paper
  • Cereal
  • Bread
  • Milk
  • Toilet Paper
  • Cereal
  • Bread

HTML Definition Term Lists

Make definition lists as seen in dictionaries using the <dl> tag. These lists displace the term word just above the definition itself for a unique look. It's wise to bold the terms to displace them further.

  • <dl> - defines the start of the list
  • <dt> - definition term
  • <dd> - defining definition

HTML Code:

<dl>
<dt><b>Fromage</b></dt>
<dd>French word for cheese.</dd>
<dt><b>Voiture</b></dt>
<dd>French word for car.</dd>
</dt>

HTML Code:

Fromage
     French word for cheese.
Voiture
     French word for car.

 

 

 

 













2007-2008 mYpassion | Copyright | Privacy Policy | Advertising Information