Scribd
Upload
21 views

HTML Lists

Uploaded by

thanushikakrishnamoorthy29
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
21 views

HTML Lists

Uploaded by

thanushikakrishnamoorthy29
Copyright
© © All Rights Reserved
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