Scribd
Upload
22 views

HTML Lists

Uploaded by

thanushikakrishnamoorthy29
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
22 views

HTML Lists

Uploaded by

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

S.

Prashanthan
B.Tech (Network Eng)(SL),NDIT(Merit),BA(EUSL)PGDE(SL),IPICT,Mecon,NVQ 07(ICT)
HTML Lists
HTML lists allow web developers to group a set of related
items in lists.
Example

An unordered HTML list: An ordered HTML list:


• Item 1.First item
• Item 2.Second item
• Item 3.Third item
• Item 4.Fourth item
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:
<!DOCTYPE html>
<html>
<body>
<h2>An unordered HTML list</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
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:
<!DOCTYPE html>
<html>
<body>

<h2>An ordered HTML list</h2>

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>
HTML Description Lists
HTML also supports description lists.
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and
the <dd> tag describes each term:
<!DOCTYPE html>
<html>
<body>

<h2>A Description List</h2>

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

</body>
</html>
HTML List Tags

Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list
HTML Unordered Lists
The HTML <ul> tag defines an unordered (bulleted) list.

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:

<!DOCTYPE html>
<html>
<body>

<h2>An unordered HTML list</h2>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

</body>
</html>
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
<!DOCTYPE html>
<html>
<body>

<h2>Unordered List with Disc Bullets</h2>

<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

</body>
</html>
Nested HTML Lists
Lists can be nested (list inside list):

<!DOCTYPE html>
<html>
<body>
<h2>A Nested List</h2>
<p>Lists can be nested (list inside list):</p>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
HTML
Tag List Tags Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list
HTML Ordered Lists
The HTML <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical.

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:

<!DOCTYPE html>
<html>
<body>

<h2>An ordered HTML list</h2>

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>
Ordered HTML List - The Type Attribute
The type attribute of the <ol> tag, defines the type of the list item marker:

Type Description
type="1" The list items will be numbered with numbers
(default)
type="A" The list items will be numbered with uppercase
letters
type="a" The list items will be numbered with lowercase
letters
type="I" The list items will be numbered with uppercase
roman numbers
type="i" The list items will be numbered with lowercase
roman numbers
Numbers:

<!DOCTYPE html>
<html>
<body>

<h2>Ordered List with Numbers</h2>

<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>
Uppercase Letters:
<!DOCTYPE html>
<html>
<body>

<h2>Ordered List with Letters</h2>

<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>
<!DOCTYPE html>
<html>
Control List Counting
By default, an ordered list will start counting from 1. If you want to start
<body> counting from a specified number, you can use the start attribute:

<h2>The start attribute</h2>


<p>By default, an ordered list will start counting from 1. Use
the start attribute to start counting from a specified
number:</p>

<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<ol type="I" start="50">


<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>
Nested HTML Lists
Lists can be nested (list inside list):
<!DOCTYPE html>
<html>
<body>

<h2>A Nested List</h2>


<p>Lists can be nested (list inside list):</p>

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

</body>
</html>
Chapter Summary

•Use the HTML <ol> element to define an ordered list


•Use the HTML type attribute to define the numbering type
•Use the HTML <li> element to define a list item
•Lists can be nested
•List items can contain other HTML elements
HTML List Tags

Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list
HTML Other Lists
HTML Description Lists
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term:

<!DOCTYPE html>
<html>
<body>

<h2>A Description List</h2>

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

</body>
</html>
Chapter Summary

❖ Use the HTML <dl> element to define a description


list
❖ Use the HTML <dt> element to define the
description term
❖ Use the HTML <dd> element to describe the term in
a description list

You might also like