The ordered list starts with

    tag and the list items start with
  1. tag. wikiHow is a “wiki,” similar to Wikipedia, which means that many of our articles are co-written by multiple authors. No license is enforced. Using text instead of a list makes more work for you and can create problems for your document’s readers. nested list html . 2. Output: 1. The page handles all this data in a relatively clean way and validates correctly. % of people told us that this article helped them. Javascript Web Development Front End Technology Object Oriented Programming Suppose, we have a nested array of arrays like this − Also, don't denote a separate list item, if it has no label to go along with it. Thanks to all authors for creating a page that has been read 54,142 times. Card-like display, Image, title, summary and a few buttons. Nested list. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/53\/Create-a-Nested-List-in-HTML-Step-1.jpg\/v4-460px-Create-a-Nested-List-in-HTML-Step-1.jpg","bigUrl":"\/images\/thumb\/5\/53\/Create-a-Nested-List-in-HTML-Step-1.jpg\/aid2511326-v4-674px-Create-a-Nested-List-in-HTML-Step-1.jpg","smallWidth":460,"smallHeight":173,"bigWidth":"674","bigHeight":"254","licensing":"

    License: Creative Commons<\/a>
    \n<\/p>


    \n<\/p><\/div>"}, {"smallUrl":"https:\/\/www.wikihow.com\/images\/3\/32\/Create-a-Nested-List-in-HTML-Step-2.jpg","bigUrl":"\/images\/thumb\/3\/32\/Create-a-Nested-List-in-HTML-Step-2.jpg\/v4-399px-Create-a-Nested-List-in-HTML-Step-2.jpg","smallWidth":460,"smallHeight":237,"bigWidth":"399","bigHeight":"206","licensing":"

    License: Creative Commons<\/a>
    \n<\/p>


    \n<\/p><\/div>"}, {"smallUrl":"https:\/\/www.wikihow.com\/images\/1\/11\/Create-a-Nested-List-in-HTML-Step-3.jpg","bigUrl":"\/images\/thumb\/1\/11\/Create-a-Nested-List-in-HTML-Step-3.jpg\/aid2511326-v4-440px-Create-a-Nested-List-in-HTML-Step-3.jpg","smallWidth":460,"smallHeight":215,"bigWidth":"440","bigHeight":"206","licensing":"

    License: Creative Commons<\/a>
    \n<\/p>


    \n<\/p><\/div>"}, {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/8a\/Create-a-Nested-List-in-HTML-Step-4.jpg\/v4-460px-Create-a-Nested-List-in-HTML-Step-4.jpg","bigUrl":"\/images\/thumb\/8\/8a\/Create-a-Nested-List-in-HTML-Step-4.jpg\/aid2511326-v4-493px-Create-a-Nested-List-in-HTML-Step-4.jpg","smallWidth":460,"smallHeight":203,"bigWidth":"493","bigHeight":"218","licensing":"

    License: Creative Commons<\/a>
    \n<\/p>


    \n<\/p><\/div>"}, {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/cc\/Create-a-Nested-List-in-HTML-Step-5.jpg\/v4-460px-Create-a-Nested-List-in-HTML-Step-5.jpg","bigUrl":"\/images\/thumb\/c\/cc\/Create-a-Nested-List-in-HTML-Step-5.jpg\/aid2511326-v4-547px-Create-a-Nested-List-in-HTML-Step-5.jpg","smallWidth":460,"smallHeight":251,"bigWidth":"547","bigHeight":"298","licensing":"

    License: Creative Commons<\/a>
    \n<\/p>


    \n<\/p><\/div>"}, {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/82\/Create-a-Nested-List-in-HTML-Step-6.jpg\/v4-460px-Create-a-Nested-List-in-HTML-Step-6.jpg","bigUrl":"\/images\/thumb\/8\/82\/Create-a-Nested-List-in-HTML-Step-6.jpg\/aid2511326-v4-565px-Create-a-Nested-List-in-HTML-Step-6.jpg","smallWidth":460,"smallHeight":243,"bigWidth":"565","bigHeight":"298","licensing":"

    License: Creative Commons<\/a>
    \n<\/p>


    \n<\/p><\/div>"}, {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1d\/Create-a-Nested-List-in-HTML-Step-7.jpg\/v4-460px-Create-a-Nested-List-in-HTML-Step-7.jpg","bigUrl":"\/images\/thumb\/1\/1d\/Create-a-Nested-List-in-HTML-Step-7.jpg\/aid2511326-v4-513px-Create-a-Nested-List-in-HTML-Step-7.jpg","smallWidth":460,"smallHeight":285,"bigWidth":"513","bigHeight":"318","licensing":"

    License: Creative Commons<\/a>
    \n<\/p>


    \n<\/p><\/div>"}, {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/68\/Create-a-Nested-List-in-HTML-Step-8.jpg\/v4-460px-Create-a-Nested-List-in-HTML-Step-8.jpg","bigUrl":"\/images\/thumb\/6\/68\/Create-a-Nested-List-in-HTML-Step-8.jpg\/aid2511326-v4-614px-Create-a-Nested-List-in-HTML-Step-8.jpg","smallWidth":460,"smallHeight":285,"bigWidth":"614","bigHeight":"381","licensing":"

    License: Creative Commons<\/a>
    \n<\/p>


    \n<\/p><\/div>"}, http://www.w3.org/MarkUp/html3/lists.html, consider supporting our work with a contribution to wikiHow. Edwin. HTML Ordered List The main list starts with "HTML". Any HTML element, which can be nested can contain links as inner HTML and use CSS to give it visual appeal. Nested list. HTML Description Lists. HTML Lists. Any code can be removed without warning (if it is deemed offensive, damaging or for any other reason). The main list items use "right: 12px", "left: 8px;", so the nested list padding for left and right must add up to 20px. Although ordered and unordered lists are easy, these lists combine the powers of both, to create the ultimate in lists in HTML codes. By clicking the "Save" button you agree to our terms and conditions. Aries 2. It is useful for things like tables of contents that contain sub-sections: Although a nested list is tough to decipher at first glance, a thorough look at sites that contain these lists, you'll see they are really easy. Each of these elements contains an heading and an ordered list. The following shows an example of a nested list: HTML Meta tags; anchor tag; ASP Arithmetic operators; Relational oeprators; JavaScript; In this nested list, we have total of three lists. A nested list, for example, can be used to create an outline. The entire code for nestedList.html is reproduced here: wikiHow is a “wiki,” similar to Wikipedia, which means that many of our articles are co-written by multiple authors. If you have saved a file to Google Drive, you can open it here: Privacy policy and If you need to bring more bullet points outwards a level after you are finished, end the list and type another list item without typing a brand new ordered list or unordered list-tag. The

    tag defines the description list, the
    tag defines the term (name), and the
    tag describes each term: And you can keep adding levels: padding: 3px 3px 3px 17px; Step 14 - Making main list items bold To finish off, you can make the main list items "bold" and the nested list items "normal". So if your document needs a list, you should use the correct HTML list format. According to this well-rated SO post Proper way to make HTML nested list?the best-practice way to make a nested list is this:
    • List item one
    • List item two with subitems:
      • Subitem 1
      • Subitem 2
    • Final list item
    . We know ads can be annoying, but they’re what allow us to make all of wikiHow available for free. Lists can be nested, meaning one list can be placed inside of another. By using this service, some information may be shared with YouTube. JavaScript - How to create nested unordered list based on nesting of array? The nested list example. Google will ask you to confirm Google Drive access. Nesting lists. All lists may contain one or more list elements. w3schools.com are not responsible or liable for any loss or damage of any kind during the usage of provided code. To create a nested list, simply add a new list within a parent list like this:
    • Item A
    • Item B
      • Subitem B.1
      • Subitem B.2
    • Item C
    When that list is loaded in the browser, the nested list will be indented further than the parent list, and a different type of item marker will be displayed.