How to Create a Nested List in HTML

PDF download Download Article
PDF download Download Article

Although ordered and unordered lists are easy, these lists combine the powers of both, to create the ultimate in lists in HTML codes. This article will help you out to create one for the ultimate in thrills from this type of HTML list.

Steps

PDF download Download Article
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/eb\/Create-a-Nested-List-in-HTML-Step-1-Version-2.jpg\/v4-460px-Create-a-Nested-List-in-HTML-Step-1-Version-2.jpg","bigUrl":"\/images\/thumb\/e\/eb\/Create-a-Nested-List-in-HTML-Step-1-Version-2.jpg\/aid2511326-v4-728px-Create-a-Nested-List-in-HTML-Step-1-Version-2.jpg","smallWidth":460,"smallHeight":343,"bigWidth":728,"bigHeight":543,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/ea\/Create-a-Nested-List-in-HTML-Step-2-Version-2.jpg\/v4-460px-Create-a-Nested-List-in-HTML-Step-2-Version-2.jpg","bigUrl":"\/images\/thumb\/e\/ea\/Create-a-Nested-List-in-HTML-Step-2-Version-2.jpg\/aid2511326-v4-728px-Create-a-Nested-List-in-HTML-Step-2-Version-2.jpg","smallWidth":460,"smallHeight":342,"bigWidth":728,"bigHeight":541,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    Advertisement
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/49\/Create-a-Nested-List-in-HTML-Step-3-Version-2.jpg\/v4-460px-Create-a-Nested-List-in-HTML-Step-3-Version-2.jpg","bigUrl":"\/images\/thumb\/4\/49\/Create-a-Nested-List-in-HTML-Step-3-Version-2.jpg\/aid2511326-v4-728px-Create-a-Nested-List-in-HTML-Step-3-Version-2.jpg","smallWidth":460,"smallHeight":343,"bigWidth":728,"bigHeight":543,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    Create the first part of the list up to the point where you'd like the indentation nested list to be placed/begin and press ↵ Enter . Don't clear the initial list with a </ol> or </ul> tag yet.
    • Also, don't denote a separate list item, if it has no label to go along with it.
    • Sometimes, looking at the code, you can see that this new list is a nested list.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/9d\/Create-a-Nested-List-in-HTML-Step-4-Version-2.jpg\/v4-460px-Create-a-Nested-List-in-HTML-Step-4-Version-2.jpg","bigUrl":"\/images\/thumb\/9\/9d\/Create-a-Nested-List-in-HTML-Step-4-Version-2.jpg\/aid2511326-v4-728px-Create-a-Nested-List-in-HTML-Step-4-Version-2.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":544,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    Denote the list using either the <ul> or <ol> tag and enter your list items.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/7e\/Create-a-Nested-List-in-HTML-Step-5-Version-2.jpg\/v4-460px-Create-a-Nested-List-in-HTML-Step-5-Version-2.jpg","bigUrl":"\/images\/thumb\/7\/7e\/Create-a-Nested-List-in-HTML-Step-5-Version-2.jpg\/aid2511326-v4-728px-Create-a-Nested-List-in-HTML-Step-5-Version-2.jpg","smallWidth":460,"smallHeight":346,"bigWidth":728,"bigHeight":547,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d4\/Create-a-Nested-List-in-HTML-Step-6-Version-2.jpg\/v4-460px-Create-a-Nested-List-in-HTML-Step-6-Version-2.jpg","bigUrl":"\/images\/thumb\/d\/d4\/Create-a-Nested-List-in-HTML-Step-6-Version-2.jpg\/aid2511326-v4-728px-Create-a-Nested-List-in-HTML-Step-6-Version-2.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":544,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    • 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.
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/61\/Create-a-Nested-List-in-HTML-Step-7-Version-2.jpg\/v4-460px-Create-a-Nested-List-in-HTML-Step-7-Version-2.jpg","bigUrl":"\/images\/thumb\/6\/61\/Create-a-Nested-List-in-HTML-Step-7-Version-2.jpg\/aid2511326-v4-728px-Create-a-Nested-List-in-HTML-Step-7-Version-2.jpg","smallWidth":460,"smallHeight":342,"bigWidth":728,"bigHeight":542,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    Type the ending tag for the ordered tag or unordered tag (in a reverse fashion, from inner-most to outer-most fashion).
    8. Advertisement

Community Q&A

Search
Add New Question
  • Question
    How do I place bullets on a list in HTML?
    Community Answer
    Rather than opening with the simple Unordered List tag, type replacing 'square' with the type of bullet you want.
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 10 Helpful 15
Ask a Question
200 characters left
Include your email address to get a message when this question is answered.
Submit
      Advertisement

      Video

      Tips

      • 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. Repetitive motions to read their source code, will help make you understand these lists better.
        Thanks
      Submit a Tip
      All tip submissions are carefully reviewed before being published
      Submit
      Thanks for submitting a tip for review!
      Advertisement

      You Might Also Like

      How to
      Create a Link With Simple HTML Programming
      How to
      Learn HTML
      How to
      Run a HTML File in Visual Studio Code
      4 Ways to Add a Link to a Picture
      How to
      Insert Spaces in HTML
      How to
      Create a Simple Web Page with HTML
      How to
      Run a HTML File
      How to
      Change the Button Color in HTML
      Simple Ways to Find the Hex Code of Any Color on Your Computer
      How to
      Insert Images with HTML
      How to
      Write HTML Code
      How to
      Create an Email Link in HTML
      Add a Background Image to a Website: Step-by-Step Tutorial
      How to
      Resize iFrames in HTML
      Advertisement

      References

      1. http://www.w3.org/MarkUp/html3/lists.html

      About This Article

      Thanks to all authors for creating a page that has been read 94,727 times.

      Is this article up to date?

      Advertisement