Working with Different List
Types
Ordered list
Unordered list
Definition list
ORDERED LIST
Ordered list - is used for items with ranking or special
arrangement.
Ex: listing top ten movies
Listing students’ name in alphabetical order.
ORDERED LIST
<ol> tag to mark the beginning of the list
<li> tag is the list item marker and displayed as a
number by browsers to follow some order or
arrangement. After each item, mark it with a list item
closing </li> tag. And apply the ordered list </ol>
closing tag.
Ordered list
✖ Ordered List – known as the numbered list, this is
the type of list where each item is numbered
usually starting at 1 (but can be changed using
start attribute)
ORDERED LIST
Different types of numbering and can be specified by
keying specified value for the type attribute:
o 1 for regular numbering (1,2,3,4, etc.)
o a for lowercase alphabet (a,b,c,d, etc.)
o A for uppercase alphabet (A,B,C,D, etc.)
o i for lowercase Roman Numeral (i,ii,iii)
o I for uppercase Roman Numeral (I,II,III)
ORDERED LIST
ATTRIBUTES for <ol></ol>
Attribute Definition Values
type Indicates the type of numbering to 1, a, A, I, i
be used in the list. Ex: <ol
type=‘A’></ol>
start Indicates the value or number of any number
the first item in the list. Ex: <ol
type=‘1’ start =‘3’></ol>
Note: The values for these attributes are enclosed in single
quotes.
UNORDERED LIST
Unordered list - is for items without hierarchy or
arrangement.
Ex. grocery items or school supplies.
.
UNORDERED LIST
<ul> tag to mark the beginning of the list
<li> tag is the list item marker and by default, displayed as a
solid dot(.) by browsers.After each item, mark it with a list item
closing </li> tag. And apply the unordered list </ul> closing tag.
UNORDERED LIST
✖ The Unordered List has different types of bullet to be used and
can be specified by keying the specified value for the type
attribute:
o disc for round bullets, for ex: <ul type=“disk”>
o circle for circular bullets, for ex: <ul type=“circle”>
o square for square bullets, for ex: <ul type=“square”>
UNORDERED LIST
ATTRIBUTE FOR <ul></ul>
Attribute Definition Values
type Indicates the type of disc, circle,
bullet to be used in the square
list. Ex: <ul
type=“disc”></ul>
DEFINITION LIST
Definition list - is for displaying description
Ex. glossary
.
DEFINITION LIST
<dl> tag is used to begin a definition list
<dt> tag defines a term, a name, or a title-like text and
must be paired with closing </dt> tag
<dd> tag contains the description or definition and
must be paired with closing </dd> tag. And apply the
closing tag</dl> to mark the end of definition list.
ACTIVITY 1
1. Answer page 38.
2. Hands-On Activity 1
Create HTML and use the items you listed in page
38. ( see the example in page 39.)
Write the Title “Ordered, Unordered, and Definition
List”
Create a folder (Silver_(familyname))in the desktop
and save your work (Activity1____.html)
Nesting Lists
Lists can actually be nested, meaning a list can be put
inside another list.
Example; you can put an ordered list within an
unordered list in order to create a multiple-level
list.
Nesting Lists
Lists can actually be nested, meaning a list can be put
inside another list.
Example; you can put an ordered list within an
unordered list in order to create a multiple-level
list.
