Learn Html Beginner’s Guide-How to Nest List Elements in Html-Web Design and Development Tutorial

Learn Html Beginner’s Guide-How to Nest List Elements in Html-Web Design and Development Tutorial

Now, let’s concentrate on the nesting of
list elements like this we have seen here, like this ‘Front end’ list item, this
thing is sub-divided into ‘html’,’css’,’css3’,’html5’. So, this is the first order list – ‘Front
End’, and this is the second order list……..or in case of ‘Responsive’ you are seeing
it is now sub-divided, ‘Responsive’ is the first order list item, and ‘Bootstrap’,’
Foundation’ etc. are the second order list item. And in case of ‘back end’ is the
first order list item and ‘php’, ‘mysql’ those are the second order list item, and
those things are followed in this part too, this is the ‘design’, which is the first
order list element, and ‘Photoshop’, ‘Illustrator’, those are the second order descendent or second
order list item. That means, we are nesting a list, that means,
we are infusing a list into another list. So, how to do that thing, how to do that ‘Nesting
of List Elements’? So that is what we are going to see now. Now, suppose in this case,
like in this


      means Ordered List, so in this case of Ordered list, we
      have seen here in ‘’Front End”, there are four list items…..So now we have to
      infuse this thing here. So all we have to do after this ‘Front end’ element, we
      have to introduce another list item and that thing was an Unordered list. You see those
      bulleted text formats? Those are filled circles, those filled circles we are spotting over
      here, so that means this is an Unordered list. The list that is appearing into an ordered
      list will be an Unordered list. So all we have to bring here is an Unordered list into
      this Ordered list item. So, here comes the Unordered list. All I am doing here, is copying
      this thing and pasting it. Now this is the HTML item, this is the CSS item, this is the
      CSS3 item, and this is the HTML5 element. And in case of ‘Responsiveness’, now we
      will see that same thing is coming down here, so all we do is to copy this part, and paste
      it after this ‘Responsive’ item. So, I am pressing ‘CTRL + V’, the shortcut key
      to paste item, and all we are doing here we are changing this first two option to…..rest
      of these things those are unnecessary, those are not required so I am just deleting it.
      Same thing happens here. All we have to do is to first re-orient this thing, and after
      this Backend list item we are pressing this ‘CTRL + V’ again to paste, to introduce
      that unordered list over here and this time we are writing here ‘php’, ‘MySql’.
      Rest of the two things those are not required and those things are cut off. And the last
      part, this ‘design’ part, same thing happened here, press ‘CTRL + V’, Photoshop and
      Illustrator, so all I am doing here, I am introducing them, and then we are just discarding
      the rest of these two items from the ‘design’ segment. Now what we are doing here we are
      going to ‘file’ and save it, and this time we are going to our Internet browser
      and reload the page, and we see……now what is the difference with the thing in Microsoft?
      First of all, this is a Numbered list 1,2,3,4..and this is an Unordered list with bulleted version.
      This is ordered list with number formatted text and this is unordered list with bulleted
      version. So all we have to do we have to change the default value. So we won’t be requiring

        here, we don’t have to mention this type actually in this case
        as we are now using the basic thing over here. We don’t have to mention any type here,
        so all we are doing, we are using the default list item here, default numbered format and
        then, go to ‘file’, ‘save’. Go to the internet browser, reload, and here you
        see that the Numbered list is now changed from alphabets to numbered format. Bit still,
        there’s a problem, now we see that this is
        the circled part, so all we have to remove the ‘Circle Type’, from the unordered
        list we have introduced into this list. So, all we need to get back to our code and we
        see what we have done here, we have to mention this,
    . Similar things
    will be carried forward to list item present over here. Press ‘CTRL + S’ or go to ‘file’,
    ‘save’, go into browser, reload and you can see that the same thing here, is now seen
    over here, that this is the ordered list, this is the numbered format over here, and
    this is the Unordered list with disc type, and so as over here. So that is why, this
    is known as Nesting of List Elements. So all you are doing, you are introducing an Unordered
    list into an Ordered list. Like this, you may generate any number of list items here
    like if you want to break the html part into more sub-divided listing items, that means
    you are introducing another list item inside this ‘Html’ part or inside this ‘Bootstrap’
    part or ‘Foundation ’ part whatever it is we may bring it on or we may carry it forward
    with multiple number of times. So friends, this is known as the listing of html elements
    and this is actually known as the Nesting of List Elements. Thanks for watching this
    tutorial and in the next tutorial we will be discussing on the tables in Html element.
    Thank You….

Be the first to comment

Leave a Reply

Your email address will not be published.