HTML List

<HTML> Lists

Have you ever

created a

top 10 list?

<HTML> Lists

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

Or wanted to

itemize

something?

<HTML> Lists

• Apples

• Oranges

• Bananas

This is done

with 3 types of

HTML list tags

<HTML> Lists

• Unordered List

• Ordered List

• Definition List

Lets look first at Unordered List

<HTML> Lists

• Apples

• Oranges

• Bananas

<ul>

<li>Apples</li>

<li>Oranges</li>

<li>Bananas</li>

</ul>


<HTML>

Lists

• Apples

• Oranges

• Bananas

<ul>

<li>Apples</li>

<li>Oranges</li>

<li>Bananas</li>

</ul>

Unordered list is created using the <ul> tag


<HTML>

Lists

• Apples

• Oranges

• Bananas

<ul>

<li>Apples</li>

<li>Oranges</li>

<li>Bananas</li>

</ul>

Then each item uses the <li> tag to separate them

Q: Bullets are nice, but what if I

want numbers?

<HTML> Lists

1.Yellow Ball 2.Blue Ball 3.Red Ball 4.Purple Ball

A: This is done with

Ordered List and the <ol> tag.

Lets look at Ordered List

<HTML>

Lists

1.Yellow Ball 2.Blue Ball 3.Red Ball 4.Purple Ball

<ol>

<li>Yellow Ball</li>

<li>Blue Ball</li>

<li>Red Ball</li>

<li>Purple Ball</li>

</ol>

The parent tag is now <ol>

but the <li> tags stay.

study

the devotion of time and attention to acquiring

knowledge

design

a plan or drawing produced to show the look

and functionality

work

a person’s regular occupation, profession, or

trade

<HTML> Lists

Next...Definition Lists

First, a different parent tags

<HTML> Lists

<dl>

<dt>study</dt>

<dd>the devotion of time and attention to acquiring knowledge </dd>

<dt>design</dt>

<dd>a plan or drawing produced to show the look and functionality</dd>

<dt>work</dt>

<dd>a person’s regular occupation, profession, or trade</dd>

</dl>

definition list <dl>

Second, now there are 2 tags

<HTML>

Lists

<dl>

<dt>study</dt>

<dd>the devotion of time and attention to acquiring knowledge </dd>

<dt>design</dt>

<dd>a plan or drawing produced to show the look and functionality</dd>

<dt>work</dt>

<dd>a person’s regular occupation, profession, or trade</dd>

</dl>

definition description <dd>

definition term <dt>

Give it a try

LeanIT.am has a complete online reference

and example section that will give you more

detailed information and also working samples.

Click to View the HTML List Reference

<HTML> Lists

http://www.learnit.am/web-reference/html/basic-html/html-lists/

http://www.learnit.am/web-reference/html/basic-html/html-lists/

Business

HTML List