What is nesting of list & how to create the nested list in HTML ?
Nesting of lists in HTML involves placing one list within another list item, creating a hierarchical structure. This is done by embedding a <ul> (unordered) or <ol> (ordered) list inside an <li> (list item) element.
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.
Note: The <ul> attributes are not supported by HTML5.
Table of Content
- Nested Unordered List in HTML:
- Nested Ordered List in HTML:
Nested Unordered List in HTML:
A nested unordered list in HTML creates a hierarchical structure by placing a <ul> element inside an <li> of another <ul>. This allows for sublists within main list items, 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>
<head>
<title>Nested Unordered List in HTML</title>
</head>
<body>
<h2>Nested Unordered List</h2>
<p>w3wiki courses list:</p>
<ul>
<li>DSA
<ul>
<li>Array</li>
<li>Linked List</li>
<li>Stack</li>
<li>Queue</li>
</ul>
</li>
<li>Web Technologies
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Aptitude</li>
<li>Gate</li>
<li>Placement</li>
</ul>
</body>
</html>
Output:
Nested Unordered List in HTML Example Output
Nested Ordered List in HTML:
Nested ordered lists in HTML organize content hierarchically, where each sublist is numbered sequentially. By embedding <ol> elements within <li> elements, sublists are created within main list items, 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>
<head>
<title>Nested Ordered List in HTML</title>
</head>
<body>
<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 in HTML Example Out
Contact Us