2

What is nesting of list & how to create the nested list in HTML ?

 1 month ago
source link: https://www.geeksforgeeks.org/what-is-nesting-of-list-how-to-create-the-nested-list-in-html/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

What is nesting of list & how to create the nested list in HTML ?

The proper way to make a nested HTML list is to use the <ul> or <ol> element as a child of the <li> element it belongs to.

A list is a record of short pieces of related information used to display the data or any information on web pages in the ordered or unordered form. For example, 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 and easy to find the item. In this article, we will discuss a nested list in HTML. These tags are used in HTML listing.

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

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> ....</ul>

Attribute values:

Attribute Values

Description

compact

It will render the list smaller.

type

It specifies which kind of marker is used in the list.

Example: This example shows a nested unordered list. It is used to nest the list items i.e list inside another list.

<!DOCTYPE html>
<html>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<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:

nestedlist1.png

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:

<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

Attribute values:

Attribute Values

Description

compact

It defines the list should be compacted (compact attribute is not supported HTML5. Instead use CSS).

reversed

It defines that the order will be descending.

start

It defines the starting number or alphabet for the order list.

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: In this example, we will show a nested ordered list with help of a HTML document.

<!DOCTYPE html>
<html>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<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:

nestedlist2.png

“This course was packed with amazing and well-organized content! The project-based approach of this course made it even better to understand concepts faster. Also the instructor in the live classes is really good and knowledgeable.”- Tejas | Deutsche Bank

With our revamped Full Stack Development Program: master Node.js and React that enables you to create dynamic web applications.

So get ready for salary hike only with our Full Stack Development Course.

Last Updated : 30 Jan, 2024
Like Article
Save Article
Share your thoughts in the comments

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK