What is the default type of list when the element is used

10 Lists

Contents

Table of Contents Show

<ol>: The Ordered List element
<li>: The List Item element
HTML | <li> type Attribute

Introduction to lists
Unordered lists (UL), ordered lists (OL), and list items (LI)
Definition lists: the DL, DT, and DD elements
1. Visual rendering of lists
The DIR and MENU elements

Lists

Contents

Unordered (UL) and ordered (OL) lists
1. Lists formatted by visual user agents
Definition lists: the DL, DT, and DD elements
The DIR and MENU elements

<ol>: The Ordered List element

The <ol> HTML element represents an ordered list of items — typically rendered as a numbered list.

Content categories	Flow content, and if the <ol> element's children include at least one <li> element, palpable content.
Permitted content	Zero or more <li>, <script> and <template> elements.
Tag omission	None, both the starting and ending tag are mandatory.
Permitted parents	Any element that accepts flow content.
Implicit ARIA role	list
Permitted ARIA roles	directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar, tree
DOM interface	HTMLOListElement

<li>: The List Item element

The <li> HTML element is used to represent an item in a list. It must be contained in a parent element: an ordered list (<ol>), an unordered list (<ul>), or a menu (<menu>). In menus and unordered lists, list items are usually displayed using bullet points. In ordered lists, they are usually displayed with an ascending counter on the left, such as a number or letter.

Content categories	None.
Permitted content	Flow content.
Tag omission	The end tag can be omitted if the list item is immediately followed by another <li> element, or if there is no more content in its parent element.
Permitted parents	An <ul>, <ol>, or <menu> element. Though not a conforming usage, the obsolete <dir> can also be a parent.
Implicit ARIA role	listitem when child of an ol, ul or menu
Permitted ARIA roles	menuitem, menuitemcheckbox, menuitemradio, option, none, presentation, radio, separator, tab, treeitem
DOM interface	HTMLLIElement

HTML Lists

In this tutorial you will learn how to create different types of lists in HTML.

HTML Lists

In this article, we will know the HTML List, along with understanding its types, various ways to implement them, through the example.

A list is a record of short pieces of related information or used to display the data or any information in web pages in the ordered or unordered form. For instance, to purchase the items, we need to prepare a list that can either be ordered or unordered list which helps us to organize the data & easy to find the item. Please refer to the HTML <li> type Attribute article for the various types of attributes that can be used with the ordered & unordered list.

Example: The below example illustrates the use of the unordered & ordered list in HTML.

HTML

<!DOCTYPE html> 

<html>

<head>

<title>GeeksforGeeks</title>

</head>

<body>

<h2>Welcome To GeeksforGeeks Learning</h2>

<h5>List of available courses</h5>

<ul>

<li>Data Structures & Algorithm</li>

<li>Web Technology</li>

<li>Aptitude & Logical Reasoning</li>

<li>Programming Languages</li>

</ul>

<h5>Data Structures topics</h5>

<ol>

<li>Array</li>

<li>Linked List</li>

<li>Stacks</li>

<li>Queues</li>

<li>Trees</li>

<li>Graphs</li>

</ol>

</body>

</html>

Output:

HTML List

Supported Tags: These tags are used in HTML listing.

HTML <ul> Tag
HTML <ol> Tag
HTML <dl> Tag

The HTML Unordered List: An unordered list starts with the “ul” tag. Each list item starts with the “li” tag. The list items are marked with bullets i.e small black circles by default.

Syntax:

<ul> list of items </ul>

Attribute: This tag contains two attributes which are listed below:

compact: It will render the list smaller.
type: It specifies which kind of marker is used in the list.

Note: The <ul> attributes are not supported by HTML5.

Example: This example describes the unordered list.

HTML

<!DOCTYPE html> 

<html>

<body>

<h2>Grocery list</h2>

<ul>

<li>Bread</li>

<li>Eggs</li>

<li>Milk</li>

<li>Coffee</li>

</ul>

</body>

</html>

Output:

Unordered List

HTML unordered list has various list item markers:

Example 1: The Disc can be used to set the list item marker to a bullet i.e default.

HTML

<!DOCTYPE html> 

<html>

<head>

<title>HTML ul tag</title>

</head>

<body>

<h2>GeeksforGeeks</h2>

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

<p>GeeksforGeeks courses List:</p>

<ul style="list-style-type:disc">

<li>Geeks</li>

<li>Sudo</li>

<li>Gfg</li>

<li>Gate</li>

<li>Placement</li>

</ul>

</body>

</html>

Output:

Unordered List with disc item maker

Example 2: The Circle can be used toset the list item marker to a circle.

HTML

<!DOCTYPE html> 

<html>

<body>

<h2>GeeksforGeeks</h2>

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

<p>GeeksforGeeks courses List:</p>

<ul style="list-style-type: circle">

<li>Geeks</li>

<li>Sudo</li>

<li>Gfg</li>

<li>Gate</li>

<li>Placement</li>

</ul>

</body>

</html>

Output:

Unordered List with circle item maker

Example 3: TheSquare can be used to set the list item marker to a square.

HTML

<!DOCTYPE html> 

<html>

<body>

<h2>GeeksforGeeks</h2>

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

<p>GeeksforGeeks courses List:</p>

<ul style="list-style-type: square">

<li>Geeks</li>

<li>Sudo</li>

<li>Gfg</li>

<li>Gate</li>

<li>Placement</li>

</ul>

</body>

</html>

Output:

Unordered List with square item maker

Example 4: It’s none that can be used to set the list item marker with no mark.

HTML

<!DOCTYPE html> 

<html>

<body>

<h2>GeeksforGeeks</h2>

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

<p>GeeksforGeeks courses List:</p>

<ul style="list-style-type: none">

<li>Geeks</li>

<li>Sudo</li>

<li>Gfg</li>

<li>Gate</li>

<li>Placement</li>

</ul>

</body>

</html>

Output:

Unordered List with none item maker

Example: Nested Unordered List, It is used to nest the list items ie., list inside another list.

HTML

<!DOCTYPE html> 

<html>

<body>

<h2>GeeksforGeeks</h2>

<h2>Nested Unordered List</h2>

<p>GeeksforGeeks courses List:</p>

<ul>

<li>DSA</li>

<ul>

<li>Array</li>

<li>Linked List</li>

<li>stack</li>

<li>Queue</li>

</ul>

<li>Web Technologies</li>

<ul>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

</ul>

<li>Aptitude</li>

<li>Gate</li>

<li>Placement</li>

</ul>

</body>

</html>

Output:

Nested Unordered List

HTML Ordered List: An ordered list starts with the “ol” tag. Each list item starts with the “li” tag. The list items are marked with numbers by default.

Syntax:

Attributes:

compact: It defines the list should be compacted (compact attribute is not supported HTML5. Use CSS instead.).
reversed: It defines that the order will be descending.
start: It defines that from which number or alphabet the order will start.
type: It defines which type(1, A, a, I, and i) of the order you want in your list numeric, alphabetic, or roman numbers.

Example:This example illustrates the use of the reverse attribute, control list counting & type attribute.

HTML

<!DOCTYPE html> 

<html>

<head>

<title>HTML ol tag</title>

</head>

<body>

<h2 style="color: green">GeeksforGeeks</h2>

<h3>HTML ol tag</h3>

<p>reversed attribute</p>

<ol reversed>

<li>HTML</li>

<li>CSS</li>

<li>JS</li>

</ol>

<p>start attribute</p>

<ol start="5">

<li>HTML</li>

<li>CSS</li>

<li>JS</li>

</ol>

<p>type attribute</p>

<ol type="i">

<li>HTML</li>

<li>CSS</li>

<li>JS</li>

</ol>

</body>

</html>

Output:

Ordered List with different list style

HTML ordered list has various list item markers: The type attribute of the <ol> tag defines the type of the list item marker.

Example 1: The list items will be numbered with numbers i.e default.

HTML

<!DOCTYPE html> 

<html>

<body>

<h2>Ordered List with Numbers</h2>

<ol type="1">

<li>Bread</li>

<li>Eggs</li>

<li>Milk</li>

<li>Coffee</li>

</ol>

</body>

</html>

Output:

Ordered List withnumeric item maker

Example 2: Type=”A”, this list of items will be numbered with uppercase letters.

HTML

<!DOCTYPE html> 

<html>

<body>

<h2>Ordered List with Letters</h2>

<ol type="A">

<li>Bread</li>

<li>Eggs</li>

<li>Milk</li>

<li>Coffee</li>

</ol>

</body>

</html>

Output:

Ordered List withcapital alphabetic item maker

Example 3: Type=”a”, this list items will be numbered with lowercase letters.

HTML

<!DOCTYPE html> 

<html>

<body>

<h2>Ordered List with Lowercase Letters</h2>

<ol type="a">

<li>Bread</li>

<li>Eggs</li>

<li>Milk</li>

<li>Coffee</li>

</ol>

</body>

</html>

Output:

Ordered List withsmall alphabetic item maker

Example 4: Type=”I”, this list items will be numbered with uppercase roman numbers.

HTML

<!DOCTYPE html> 

<html>

<body>

<h2>Ordered List with Roman Numbers</h2>

<ol type="I">

<li>Bread</li>

<li>Eggs</li>

<li>Milk</li>

<li>Coffee</li>

</ol>

</body>

</html>

Output:

Ordered List withuppercase roman numbers

Example 5: Type=”i”, this list items will be numbered with lowercase roman numbers.

HTML

<!DOCTYPE html> 

<html>

<body>

<h2>Ordered List with Lowercase Roman Numbers</h2>

<ol type="i">

<li>Bread</li>

<li>Eggs</li>

<li>Milk</li>

<li>Coffee</li>

</ol>

</body>

</html>

Output:

Ordered List withlowercase roman numbers

Example 6: Nested ordered list, a nested ordered list is a list that has a list inside another list.

HTML

<!DOCTYPE html> 

<html>

<body>

<h2>GeeksforGeeks</h2>

<h2>Nested Ordered List</h2>

<ol>

<li>Coffee</li>

<li> Tea

<ol>

<li>Black tea</li>

<li>Green tea</li>

</ol>

</li>

<li>Milk</li>

</ol>

</body>

</html>

Output:

Nested Ordered List

HTML Description List: 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.Please refer to the How to add description list of an element using HTML? article for further details.

Syntax:

<dl> Contents... </dl>

Example: This example describes the HTML Description List.

html

<!DOCTYPE html> 

<html>

<body>

<h2>A Description List</h2>

<dl>

<dt>Coffee</dt>

<dd>- 500 gms</dd>

<dt>Milk</dt>

<dd>- 1 ltr Tetra Pack</dd>

</dl>

</body>

</html>

Output:

Description List

Supported Browser:

Google Chrome 94.0 & above
Microsoft Edge 93.0
Firefox 92.0 & above
Opera 78.0
Safari 14.1
IE 11.0

Article Tags :

HTML

Technical Scripter

Web Technologies

HTML-Basics

Practice Tags :

HTML

Read Full Article

HTML | <li> type Attribute

The <li> type attribute in HTML is used to specify the type of a list items. This attribute also defines the style of the bullet point of the list items.

Syntax:

Attribute Values:
For ordered list items:

1: It is the default value. It is used to specify the numerical ordered list.
a: It arranged the list items in lower case letters.
A: It arrange the list items in the form of upper case.
i: It arrange the list items in the roman numbers in the form of lower case letters.
I: It arranged the list in roman numerals in the form of uppercase letters.

For unordered list items:

disc: It is the default value. It creates a filled circle.
circle: It creates an unfilled circle.
square: It creates an filled square.

Note: The <li> type attribute is not supported by HTML 5.

Example 1:

HTML

<!DOCTYPE html> 

<html>

<head>

<title>

HTML li type Attribute

</title>

</head>

<body>

<h2 style = "color: green;">

GeeksforGeeks

</h2>

<h2>

HTML list item type Attribute

</h2>

<p>Sorting Algorithms</p>

<ol>

<li type="a">Merge sort</li>

<li>Quick sort</li>

<li type="I">Insertion sort</li>

</ol>

</body>

</html>

Output:

Example 2:

HTML

<!DOCTYPE html> 

<html>

<head>

<title>

HTML li type Attribute

</title>

</head>

<body>

<h2 style = "color: green;">

GeeksforGeeks

</h2>

<h2>

HTML li type Attribute

</h2>

<p>Sorting Algorithms</p>

<ul>

<li>Merge sort</li>

<li>Quick sort</li>

<li type="square">Insertion sort</li>

</ul>

</body>

</html>