Chapter 5
HTML Lists
Prepared by Ms. Juliet Ramos 1
Objectives
At the end of this module, the students will be
able to:
◦ How to create different types of lists
◦ Apply different styles to the lists
Prepared by Ms. Juliet Ramos 2
HTML Lists
List are used to group related contents together in
a structured manner making content easy to read
and understand.
Three Types of List:
Unordered List
Ordered List
Definition List
Prepared by Ms. Juliet Ramos 3
Unordered List
used to group a set of related items in no particular order.
The list items will be marked with bullets.
unordered list starts with the opening tag <ul> and closing with
</ul>
item on list is surrounded by the <li> tag (li stands for list item)
The default bullet type is small black circles (disc)
Types of bullets:
Circle
Square
Disc - default
Prepared by Ms. Juliet Ramos 4
Example: Unordered List
CODE OUTPUT
Prepared by Ms. Juliet Ramos 5
Example: Sequence/Order of Bullets
Prepared by Ms. Juliet Ramos 6
How to Change the Bullet Type?
The default bullet type is disc, to change the bullet type is
use the type attribute. See the example below:
Prepared by Ms. Juliet Ramos 7
Ordered List
An Ordered List is a numbered list where the numbers are
in order beginning with the number 1.
Use the opening tag <ol> to indicate the beginning of
Ordered List and closing with </ol>
each item in your list must begin with the tag <li>.
Types:
Decimal (1….)
Alphabet ( A-Z or a-z)
Roman Numerals (I or i)
Prepared by Ms. Juliet Ramos 8
Example: Ordered List
Code Output
Prepared by Ms. Juliet Ramos 9
How to change the number type?
The default number type in ordered list is decimal. It can be
changed by using the type attribute. See example below:
Prepared by Ms. Juliet Ramos 10
Reversed Order and Start
Prepared by Ms. Juliet Ramos 11
Description List
The Structure of definition list is a term followed by
its description or definition.
Definition list tag starts with <dl> and ends with </dl>
Within each < dl > tag you have a pair of definition
term <dt> and definition description element <dd>.
Prepared by Ms. Juliet Ramos 12
Example: Description List
Code Output
Prepared by Ms. Juliet Ramos 13
Nested List
Code
Prepared by Ms. Juliet Ramos 14
Nested List
Code
Prepared by Ms. Juliet Ramos 15
Changing Type Using CSS
Unordered List and Ordered List
Prepared by Ms. Juliet Ramos 16
Example: Unordered List – Bullet Type
Prepared by Ms. Juliet Ramos 17
Example: Unordered List – Bullet Type
Prepared by Ms. Juliet Ramos 18
Example: Ordered List – Alphabet
Prepared by Ms. Juliet Ramos 19
Example: Ordered List – Roman Numerals
Prepared by Ms. Juliet Ramos 20
Position the List Items
Prepared by Ms. Juliet Ramos 21
Styling the List with Colors
Prepared by Ms. Juliet Ramos 22
Centered with Padding & Margin List
Prepared by Ms. Juliet Ramos 23
Bordered Lists
Prepared by Ms. Juliet Ramos 24
List Width
Lists have a 100% width by default. Use the width
property to change this.
Prepared by Ms. Juliet Ramos 25
References
http://www.tutorialspark.com/html5/HTML5_Lists.php
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul
https://www.w3schools.com/html/html_lists.asp
https://htmlreference.io/lists/
Prepared by Ms. Juliet Ramos 26
