0% found this document useful (0 votes)
19 views

HTML Lists

Uploaded by

O.I.N
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
19 views

HTML Lists

Uploaded by

O.I.N
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 8

HTML Lists

HTML lists allow web developers to


group a set of related items in lists.
Unordered HTML List
An unordered list starts with the <ul> tag. Each
list item starts with the <li> tag.
The list items will be marked with bullets (small
black circles) by default:

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with
the <li> tag.
The list items will be marked with numbers by default:

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Unordered HTML List - Choose List Item Marker
The CSS list-style-type property is used to define the style of the list item
marker. It can have one of the following values:

Value Description

disc Sets the list item marker to a


bullet (default)
circle Sets the list item marker to a
circle
square Sets the list item marker to a
square
none The list items will not be
marked
<ul style="list-style-
type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="list-style-
type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="list-style-
type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
<ul style="list-style-
type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Nested HTML Lists
• Lists can be nested (list inside list):

<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>

You might also like