How to create nested lists in HTML: Pokemon version!

Lists are extremely important for building websites. It’s the basis of the table of contents, for a list of links to other pages, and for organizing the whole page.

Nested lists are lists that lists within lists, meaning you create sub-bullets to your original bullets. 

First, you start out with the usual heading, built between the heading tags <h>TEXT</h>:


I chose Pokemon because there are so many Pokemon monsters to choose from!

Next, you create your first list using the tags <ul>TEXT</ul> because you’re creating a bulleted list or an unlisted list. Following that, you create a regular list to designate the type of list you’re making using <li>TEXT</li>:


Then, you repeat the same list-making process to create another list WITHIN that list you had created. So, I created the first main list for Grass-type Pokemon and will create a sub-list listing examples of grass-type Pokemon, as shown here:


See, there is now a nested list! Now, you are invincible in the powers of making lists within lists! I created another set to further show you how this can develop:


Now, I have a couple of different Pokemon listed (although sorting through the hundreds of Pokemon will take a while). Congrats on making a nested list!

~ by Kathleen Sun on February 2, 2014.

%d bloggers like this: