Part 6 - Lists | HTML

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
Find a Job Get Money Move Out	Find a Job Get Money Move Out	Find a Job Get Money Move Out	Find a Job Get Money 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.