HTML
Lists
Introduction to HTML Lists
We encounter lists during multiple situations on a daily basis. Lists are useful for
many things, including grocery shopping and creating a daily routine. Similar
instances can be found on websites. The HTML lists utility assists us in creating
lists on websites.
There are mainly three types of lists in HTML:
● Ordered list
● Unordered list
● Description list
HTML Unordered List
The HTML unordered list is used to represent HTML lists of items that aren't in any
particular order. The unordered lists in HTML are represented by bullet points.
Syntax
<ul>
<li> ... </li>
<li> ... </li>
<li> ... </li>
<li> ... </li>
</ul>
● The <ul> tag is used to define unordered lists in HTML. It must be closed with the </ul> tag. The items on the lists can be inserted in between
them.
● The <li> tag is used to define list items in HTML lists. It must be closed with the </li> tag. The listing content can be inserted in between them.
</head><body>
<h3> A list of things you need to learn to become a web developer: </h3>
<!-- Following code will create a list in html -->
<ul>
<li> Html </li>
<li> Css </li>
<li> Javascript </li>
<li> Git </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:
● 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
Example
<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>
HTML Ordered List
● The HTML-ordered list is used to represent HTML list items that are sequenced in a particular order.
This order can be either increasing or decreasing.
● The ordered list in HTML can be represented by either numbers, letters, or roman numerals.
● Syntax:
<ol>
<li> ... </li>
<li> ... </li>
</ol>
● The <ol> tag is used to define ordered lists in HTML. It needs to be closed using the </ol> tag. The
list of items can be included in between them.
● The <li> tag is used to define list items in HTML lists. The <li> tag needs to be closed by the </li>
tag. The listing content can be added in between them.
Attributes for ordered list
Following are some common attributes that are used in ordered lists in HTML:
● reversed This attribute is used to define HTML lists in reversed order.
By default, the ordered lists in HTML are defined in increasing sequence, i.e., 1, 2, 3.. so on. Upon
declaring this attribute, the HTML lists are defined in decreasing order, i.e., 3, 2, 1.
● start
This attribute is used to define the starting point of the list.
By default, the ordered lists in HTML start from 1. But with this attribute, we can set the starting
point of HTML lists.
● type As discussed, the ordered list needs not to have to be in a numbering sequence. It can be a
letter, a roman number, or a number.
The type attribute sets the numbering type of the ordered lists in HTML.
○ a : sets the numbering to lowercase letters.
○ A : sets the numbering to uppercase letters.
○ i : sets the numbering to lowercase Roman numerals.
○ I : sets the numbering to uppercase Roman numerals.
○ 1 : sets the numbering to numbers.
Example (reverse List)
<html ><head> <title>Ordered lists</title></head>
<body> <h3> A list of things you need to learn to become a web developer: </h3>
<ol reversed>
<li> Html </li>
<li> Css </li>
<li> Javascript </li>
<li> Git </li>
</ol>
</body>
</html>
Example (start attribute)
<html ><head> <title>Ordered lists</title></head>
<body> <h3> A list of things you need to learn to become a web developer:
</h3>
<ol start="5">
<li> Html </li>
<li> Css </li>
<li> Javascript </li>
<li> Git </li>
</ol>
</body>
</html>
Example (type attribute)
<html"><head> <title>Ordered lists</title></head>
<body> <h3> A list of things you need to learn to become a web developer: </h3>
<ol type="a">
<li> Html </li>
<li> Css </li>
<li> Javascript </li>
<li> Git </li>
</ol>
</body></html>
HTML Description Lists
● HTML lists enable us to create lists in which we may include a
description for each item in the list. These are known as HTML
description lists.
● Syntax
<dl>
<dt> Item </dt>
<dd> description </dd>
</dl>
HTML Description Lists (cont.)
● The <dl> tag is used to define the HTML description lists. This tag should be closed with the </dl> tag. The list of items and their
description can be placed in between.
● The <dt> tag is used to state the list item. It should also be closed with the </dt> tag, and the list item name can be written in
between.
● The <dd> tag is used to add the description of the list item. It should also be closed with the </dt> tag. It is always placed after
the list item.
Example
<html ><head> <title>Ordered lists</title></head>
<body> <h3> A list of things you need to learn to become a web developer: </h3>
<dl>
<dt> Html </dt>
<dd> It is a markup language. It works as the skeleton of the web page. </dd>
<dt> CSS </dt>
<dd> It is used to add styling to the html structure. </dd>
<dt> Javascript </dt>
<dd> It can be called the brain of your web page. </dd>
<dt> Git </dt>
<dd> Git is used to store and share your code. </dd>
</dl>
</body></html>
Nesting HTML lists
● Lists in HTML can be defined within another list. These are referred to as nested lists in
HTML.
● To nest a list within another HTML list, we must declare the list within the specification of the
parent list.
● All types of lists can be nested within each other, e.g., we can nest an unordered
list both inside an ordered list or an unordered list.
Example (Nesting)
<html ><head> <ul>
<title>Lists</title></head>
<li>VueJS</li>
<body> <h3> A list of things
you need to learn to become a <li>ReactJS</li>
web developer: </h3>
<li>AngularJS</li>
<ol>
</ul>
<li> Html </li>
<li> Css </li> <li> Git </li>
<li> Javascript </li> </ol>
</body></html>
Do it now
