Seventh page: Lists

LISTS ON HTML

There are four types of lists: Ordered List, Unordered List, Description Lists and Horizontal List

Ordered Lists (ol)

Ordered list tag by default creates lists with items ordered by numbers (1,2,3 and so on). But one can also create lists with upper or lower case letters (A,B,C...or a,b,c and so on), and with upper and lower case roman numerals (I,II,III...or i,ii,iii) by adding the attribute "TYPE" and its value (="A" for upper case letters, ="a" for lower case letters, ="I" for UPPER case Roman Numerals, and ="i" for lower case Roman Numerals) in the openning "ol" tag.

Ordered List by numbers

Red
Blue
Green

Ordered List with UPPER case letters

Red
Blue
Green

Ordered List with lower case letters

Red
Blue
Green

Ordered List with UPPER case Roman Numerals

Red
Blue
Green

Ordered List with lower case Roman Numerals

Red
Blue
Green

One can also start the list on number "3", for instance, or letter "C", or Roman Numeral "III", just by adding the attribute "START" followed by the equal sign ("=") and its value (in the case bellow, number "3").
Example:

Red
Blue
Green

Red
Blue
Green

Red
Blue
Green

You can also add link to it

One can align the list to the center by adding the style attribute an value "text-align:center;" to the opening tag:

Red
Blue
Green

One can align the list AND the bullets to the center by adding the style attribute and the value "text-align:center; list-style-position:inside;" to the opening tag:

List 1
List 2
List 3

Unordered Lists (ol)

For an unordered list (<ul> </ul>) you can define the bullet shape using the style attribute and the list-style-type property:

There are four style options: disc, circle, square, none
ul type="square" gives □
ul type="circle" gives ○
ul type="disc" gives ●

Rice
Beans
Churrasco

Wine
Beer
Mead

Wine
Beer
Mead

Coffee
Tea
Milk

P.S.: Keep in mind that while this is perfectly legal code, a best practice would be to define style lists in a separate CSS file linked to your HTML document.

You can put a second list inside an <li> element to create a sub list or nested list.

Man

brain
eyes
tongue

Plant

sap
root
phloem

There is also the Bullet List tag <bl>

blue

red

green

which is a little bit different from the Unordered Tag:

one
two
three

So, instead of <bl> you can use <ul>

Description list

Description list is a list of items with description for each item.

1.the "dl" tag defines a list
2.the "dt" tag defines the item name
3.the "dd" tag defines the description

Example:

Colours: Red; Blue; Green
Language: English; Spanish; Korean

Horizontal List

For Horizontal Lists, I'm gonna have to learn CSS3 first.
More information about Horizontal Lists, check out this website page HERE.

7 HTML: Lists