1. HTML Boot Camp: Formatted Lists
4/23/2017
HTML Boot Camp
Chapter 7
Formatted Lists
Kirkwood Continuing Education
© Copyright 2015, Fred McClurg All Rights Reserved
Introduction to Web Programming

2. Unordered List: <ul> tag
HTML Boot Camp: Formatted Lists
4/23/2017
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
Introduction to Web Programming

3. <ul> tag list style type
HTML Boot Camp: Formatted Lists
4/23/2017
<ul> tag list style type
Description: 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"> <ul style="list-style-type: square"> <ul style="list-style-type: none">
Chapter 07 > Unordered List Style
Introduction to Web Programming

4. <ul> tag “list-style-type”
HTML Boot Camp: Formatted Lists
4/23/2017
<ul> tag “list-style-type”
Description: The default bullet list- style-type can be set.
Type
Description
Example
disc
Bullet symbol 
circle
Hollow bullet 
square
Filled square 
none
No symbol
Introduction to Web Programming

5. Nesting Unordered List
HTML Boot Camp: Formatted Lists
4/23/2017
Nesting Unordered List
Description: Unordered lists can be nested. This results in auto indentation and a change in bullets.
Example:
<ul>
<li>
Josephine Rabbit
<li> Flopsy </li>
<li> Mopsy </li>
<li> Cotton-tail </li>
<li> Peter </li>
</ul>
</li>
Chapter 07 > Nested Unordered List
Introduction to Web Programming

6. Horizontal Unordered List
HTML Boot Camp: Formatted Lists
4/23/2017
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
Introduction to Web Programming

7. Ordered List: <ol> tag
HTML Boot Camp: Formatted Lists
4/23/2017
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
Introduction to Web Programming

8. HTML Boot Camp: Formatted Lists
4/23/2017
Nesting Ordered Lists
Description: Ordered lists can be nested. This results in auto indentation. Example: <ol> <li> Josephine Rabbit </li> <li> Flopsy </li> <li> Mopsy </li> <li> Cotton-tail </li> <li> Peter </li> </ol>
Introduction to Web Programming

9. <ol> tag “type” attribute
HTML Boot Camp: Formatted Lists
4/23/2017
<ol> tag “type” attribute
Description: The ordered list can be used to layout a nested outline.
Type
Description
Example A
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
Introduction to Web Programming

10. Definition List: <dl> tag
HTML Boot Camp: Formatted Lists
4/23/2017
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>
Introduction to Web Programming