HTML BOOT CAMP

Chapter 7Formatted Lists

Kirkwood Continuing Education

© Copyright 2015, Fred McClurg All Rights Reserved

2

Unordered List: <ul> tag

Description: When the order of items is not important, an unordered list is ideal. The items in an unordered list are prefixed with a bullet character.

Example:<ul>

<li> Heffalumps <li> Woozles </ul>

Chapter 07 > Unordered List

3

<ul> tag list style typeDescription: The list style type can be specified.

Example:<ul style="list-style-type: disc"> <li> Heffalumps <li> Woozles</ul>

<ul style="list-style-type: circle"> <li> Heffalumps <li> Woozles</ul>

<ul style="list-style-type: square"> <li> Heffalumps <li> Woozles</ul>

<ul style="list-style-type: none"> <li> Heffalumps <li> Woozles</ul> Chapter 07 > Unordered List Style

4

<ul> tag “list-style-type”

Description: The default bullet list-style-type can be set.

Type Description Exampledisc Bullet symbol

circle Hollow bullet square Filled square

none No symbol

5

Nesting Unordered ListDescription: Unordered lists can be nested. This results in auto indentation and a change in bullets.

Example:

<ul> <li> Josephine Rabbit <ul> <li> Flopsy </li> <li> Mopsy </li> <li> Cotton-tail </li> <li> Peter </li> </ul> </li></ul> Chapter 07 > Nested Unordered List

6

Horizontal Unordered List

Description: The vertical arrangement of an unordered list can be changed to a horizontal style.

Example:<style> ul#menu li { display: inline; }</style> <ul id="menu"> <li> <a href="#">Flopsy</a> </li> <li> <a href="#">Mopsy</a> </li> <li> <a href="#">Cotton-tail</a> </li> <li> <a href="#">Peter</a> </li></ul> Chapter 07 > Horizontal Unordered List

7

Ordered List: <ol> tag

Description: When the order of items is important, an ordered list is ideal. Ordered list items are enumerated with a prefixed number, character, or Roman numeral.

Example:<ol>

<li> Lions <li> Tigers <li> Bears </ol> Chapter 07 > Ordered List

8

Nesting Ordered Lists

Description: Ordered lists can be nested. This results in auto indentation.

Example:<ol> <li> Josephine Rabbit </li> <ol> <li> Flopsy </li> <li> Mopsy </li> <li> Cotton-tail </li> <li> Peter </li> </ol></ol>

9

<ol> tag “type” attribute

Description: The ordered list can be used to layout a nested outline.

Type Description ExampleA Capital letters A, B, C

a Lower case letters a, b, c

I Capital Roman I, II, III

i Lower case Roman

i, ii, iii

1 Arabic numerals 1, 2, 3

10

Definition List: <dl> tag

Description: Suitable for those situations that require a format similar to a dictionary where there is a word or phrase that is followed by a definition or explanation

Example:<dl> <dt> doe </dt> <dd> A deer, a female deer </dd> <dt> ray </dt> <dd> A drop of golden sun </dd></dl>