Nesting Lists

We can nest the ordered or the unordered lists.  We can even list a mix of them.

Let’s see this in our example below:

   
<!doctype>
<html>
<head>
    <title>My  Learning Plan</title>
</head>
    <body>
        <h1>Hi, I'm learning  HTML.</h1>
        <p>I will use it for <i>developing web pages</i>.
        It is very easy and simple.</p>
        <hr />
        <div>
        <!-- Here I  will list my training plan for this year -->
        <p>This is <em>part of my learning plan for this year</em>. 
           <u>Which will include:</u></p>
        <ul>
            <li>Html</li>
            <li>JavaScript</li>
            <li>Programming  Languages
                <ul>
                    <li>Java</li>
                    <li>ASP.Net C#</li>
                    <li>ReactJS</li>
                </ul>
            </li>
            <li>Microsoft  Windows Server</li>
        </ul>
        <p>While in the  next year the plan will be:<p>
        <ol>
            <li>C++</li>
            <li>JQuery</li>
            <li>Database
                <ul>
                    <li>Oracle</li>
                    <li>SQL Server</li>
                    <li>Microsoft  Access</li>
                </ul>
            </li>
            <li>Oracle  Database</li>
            <li>Microsoft  Access Database</li>
            <li>Linux</li>
        </ol>
        </div>
    </body>
</html>

 

The result will be as follows: