Site Development
Downloads
Help!!
Home
How To Nest ListsNesting lists just means to put one list inside a parent list. This nested list would be a <li> (list item) of the parent list. The useful part about this is that list nesting will automatically cause the viewer-friendly indentation of nested lists. You can also use TYPE to select the numbering scheme of the sub-lists. Click here to see an example of a set of lists nested three deep. Together they look like a formal outline. This is great for making a table of contents among other things. The best way I've found to code these nested lists is to start at the top level with the complete parent list and then code all of the second-level lists, etc. I'll be using the this example in explaining the coding of nested lists We'll start by making a regular ordered list as presented in the last lesson. In the <body> of your page code: <ol type="I"> <li>Book One <li>Book Two <li>Book Three </ol> So far so good. We've made the main list and added the text tags "Book One", etc. We chose TYPE="I" to get Roman numerals presented in upper-case letters. Here's how it looks so far:
Now lets put a second-level list inside this main one. Making The Second LevelWe put the second-level lists in the <li>s of the parent list along with the text tags like "Book One". Don't add extra <li>s for the nested lists. Just use the <li>s already in the parent list to display it's text content.
<ol type="I">
<li>Book One
<!-- First "Chapter" Nested List -->
<ol type="A">
<li>Chapter 1
<li>Chapter 2
<li>Chapter 3
</ol>
<li>Book Two
<li>Book Three
</ol>
Below is how the above code looks in a browser:
Notice how I've used spacing (tabs) in the code to help me keep up with what is part of the new list and which is the parent list. Also notice the <!-- comment --> tag I included to help me keep up with where I am. I find this critical to keep the code organized. This is probably the first project in the tutorials in which you can get lost in your own code. Use spaces, tabs, line-breaks, and <!-- comments --> liberally and in an organized fashion. The tabs used in the code are not what's causing the indentation in the rendered list. You could just as well remove the tabs in the code or even code the whole thing on one line and it would look the same in a browser. It's the nesting that causes the indentation in the browser rendered page. You can see that I just started the second-level list right in the parent list's <li> tag. This is what nests it. I just code it right in there with the "Book One" string. Finally, I've used a different TYPE of numbering system so the viewer can quickly see that this nested list is a sub-level of the parent list. We complete coding the other two needed second-level lists just like we did the first. <ol type="I"> <li>Book One <!-- First "Chapter" Nested List --> <ol type="A"> <li>Chapter 1 <li>Chapter 2 <li>Chapter 3 </ol> <li>Book Two <!-- Second "Chapter" Nested List --> <ol type="A"> <li>Chapter 1 <li>Chapter 2 <li>Chapter 3 </ol> <li>Book Three <!-- Third "Chapter" Nested List --> <ol type="A"> <li>Chapter 1 <li>Chapter 2 <li>Chapter 3 </ol> </ol> This is how the above code looks rendered:
Making The Third LevelThe good news is that you rarely make nested lists three levels deep. The rest of the good news is that nesting the third level is just like nesting the second. We put a list in each of the second-level list's <li>s. <ol type="I"> <li>Book One <!-- First "Chapter" Nested List --> <ol type="A"> <li>Chapter 1 <!-- First Third Level List --> <ol type="1"> <li>section #1' <li>section #2 <li>section #3 </ol> <li>Chapter 2 <!-- Second Third Level List --> <ol type="1"> <li>section #1 <li>section #2 <li>section #3 </ol> <li>Chapter 3 </ol> <li>Book Two <!-- Second "Chapter" Nested List --> <ol type="A"> <li>Chapter 1 <li>Chapter 2 <li>Chapter 3 </ol> <li>Book Three <!-- Third "Chapter" Nested List --> <ol type="A"> <li>Chapter 1 <li>Chapter 2 <li>Chapter 3 </ol> </ol> I only included the first two third-level nested lists for the sake of brevity. You'd merely repeat the pattern for every "Chapter" <li> to get the final example. Nested Unordered ListsYou can nest unordered lists, too. It's just a matter of of switching all of the <ol> tags to <ul> tags and changing TYPE to your choice of "disc", "circle", or "square". One neat thing about nested <ul> lists is that there is a default "bullet" scheme for each level. The first level will use discs, the second will use circles, and the third will use squares. This occurs even if you never use a single TYPE attribute. Of course, you can override this default pattern by adding whichever TYPE you want for whichever list. Ordered Lists don't have such a default scheme. By default, each ordered list will number list items using the 1-2-3 scheme. Some Coding Tips For Nested ListsThe biggest tip I can give you is to stay organized when making nested lists. In fact, I find that making nested lists is good practice for making more complicated code. Use spaces, tabs, line-breaks, and <!-- comments --> to keep organized. Begin by making the overall parent list and then filling it in with the second-level lists, and so on. This provides you with a constant overview that helps you keep up with what you are coding. Making a framework and then filling it in is generally much easier than trying to code nested lists line-by-line. You can save yourself a lot of time by using Copy and Paste. Make one skeleton list and then keep pasting it inside itself, along with comments and spaces, until you've got your nested list framed in code. Now you just have to adjust the TYPE attribute and add the text tag for each list item. When using the Copy and Paste method above, it helps to begin by laying out your sections with <!-- comment --> tags and line breaks. This will help your "aim" when pasting. Try to make a couple of two-level nested lists and then move on to the three-level example presented above. Don't kill yourself over the third level. If you get two levels down, you are ready to move on. Dirty Little Secret: If you've got a multi-level outline to present on your page, use the <pre> tag. Just make the outline with indentation and numbering scheme in a text editor and then copy and paste it between the <pre> and </pre> tags. You can then further format it by using other HTML tags inside the <pre> tags. Don't you just hate me for saving this for last? Next we'll have some real fun by adding a colored background to our pages as well as coloring the text and making some horizontal lines that can be used as dividers. |
To Next Beginning HTML Lesson
Back To Beginning HTML Index