Kumail.pk is a Free Platform of

Nested List

A very powerful feature of HTML lists is their ability to nest one into another. Any of the list type can contain any other list type as its list item. It is dened by placing the new list tag inside the tag of previous list. Web browsers automatically indent nested lists and assign appropriate marker to those nested list items as well.

Nested List

Definition lists are a special type of information structuring that is ideal for displaying explanatory and terminological dictionaries, as well as reference books by means of HTML.

It is a list that is formed by combining multiple list with in a single list .

-The list can be ordered and unordered .

lets take an example -you have an asked to create a list of two companies with their popular cars according to you.

So now you have to create a list of that company and a sub list to list the company’s popular cars Then you have to use the concept of nested list where two list tags are mostly used that is ordered list tag and unordered list tag .

Here is the code which will help you understand what i meant of using this two list tags in a combined state-

<html>

<head>

<title>

definition

list

</title>

</head>

<body>

<h3>list of cars</h3>

<ol>

<li>suzuki</li>

<ul>

<li>dzire</li>

<li>alto</li>

<li>eco</li>

</ul>

<li>Toyota</li>

<ul>

Unlike ordered and unordered lists, which can contain several elements located one after another, the elements of the definition list must consist of two parts: the definition itself (the term) and its content part (description).

The definition list is created by using the <dl> (definition list) tag, within which the <dt> (definition term) tag that separates the term is specified, and a <dd> (definition description) tag that contains a description for the term:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
  </head>
  <body>
 
    <h4>Definition list:</h4>
    <dl>
      <dt>Coffee</dt><dd>An invigorating hot drink</dd>
      <dt>Milk</dt><dd>A useful cold drink</dd>
    </dl>
 
  </body>
</html>
 
A sublist is a list within a list. The trick to marking nested lists up correctly in HTML is to recognize that the sublist is actually a child of a list item and not of a list.
 
The proper way to make HTML nested list is with the nested <ul> as a child of the <li> to which it belongs. The nested list should be inside of the <li> element of the list in which it is neste

Apply for Free E-Certification

E-Certification