HTML lists are obviously quite common on websites. People tend to shy away from them however because the code can seem a little complicated, especially when you get into nesting lists to make one or two sub-levels. Though I assure you coding a nested list it is quite an easy concept! We will be doing all of this within the WordPress text editor.
Like any HTML element lists are all about keeping track of the beginning and ending tags. HTML lists use 3 tags. An ordered list (<ol>) will display all the list items (<li>) with a sequential number in front of them.
<ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>
- Item 1
- Item 2
- Item 3
An unordered list (<ul>) will do the same thing, except with bullet points instead of a sequential order.
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
- Item 1
- Item 2
- Item 3
You’ll notice the list items are nested within the list-type tags. The list-type tags wrap all of the list items you want to display in that style, easy-peasy. However when you start nesting lists and unordered lists actually become list items within ordered lists is where it gets tricky for some people. At the moment, basic lists are no problem for you however! The basic concept can give you lists like this:
<p>TV Shows to Watch:</p> <ol> <li>The Big Bang Theory</li> <li>Breaking Bad</li> <li>Doctor Who</li> </ol>
TV Shows to Watch:
- The Big Bang Theory
- Breaking Bad
- Doctor Who
Now we are going to take that same concept but nest lists within lists. As mentioned above this means that list items within a list type become a list item within another list type. We will do this simply by starting a list item with a list, then inputting an entire list structure within that list item and close it, then go on to the original lists next item.
<ol> <li>Unit 1</li> <li>Unit 2 <ul> <li>Unit 2.1</li> <li>Unit 2.2</li> </ul> </li> <li>Unit 3</li> </ol>
- Unit 1
- Unit 2
- Unit 2.1
- Unit 2.2
- Unit 3
Now one thing to notice here is the 3rd line of the code still displays the text of the 2nd line of the list, you don’t jump right into the nested list. But as you can see the list item tags for Unit 2 wraps the unordered list entirely.
Keeping track of your opening and closing tags becomes extremely important when you start nesting lists as I mentioned, keeping list coding spread out as I did above will help you visualize the list easier, and for people who are familiar with lists already it will help you “debug” your lists when you start nesting two or three.
The same logic structure continues with multi-nested and multi-layered lists. Which, may I point out, when your code is clean and neatly spaced doesn’t look so intimidating! Here is a final and full example to showcase a real-world situation, good luck with your lists!
<p>Web Design Team Positions</p> <ul> <li><strong>Front-end Design</strong> <ul> <li>Jason <ul> <li>Graphics</li> </ul> </li> <li>Mark <ul> <li>Design</li> <li>Graphics</li> </ul> </li> </ul> </li> <li><strong>Development Team</strong> <ul> <li>Sarah <ul> <li>PHP</li> <li>Python</li> </ul> </li> <li>Troy <ul> <li>Python</li> </ul> </li> </ul> </li> <li><strong>Media Team</strong> <ul> <li>Derek <ul> <li>Video</li> </ul> </li> <li>Jamie <ul> <li>Photos</li> <li>Editing</li> </ul> </li> <li>Chris <ul> <li>Photos</li> <li>Video</li> </ul> </li> </ul> </li> </ul>
Web Design Team Positions
- Front-end Design
- Development Team
- Media Team