Lists and nested lists in WordPress example.

How to Make HTML Lists

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.

The Basics

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>
  1. Item 1
  2. Item 2
  3. 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:

  1. The Big Bang Theory
  2. Breaking Bad
  3. Doctor Who

Nested Lists

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>
  1. Unit 1
  2. Unit 2
    • Unit 2.1
    • Unit 2.2
  3. 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
    • Jason
      • Graphics
    • Mark
      • Design
      • Graphics
  • Development Team
    • Sarah
      • PHP
      • Python
    • Troy
      • Python
  • Media Team
    • Derek
      • Video
    • Jamie
      • Photos
      • Editing
    • Chris
      • Photos
      • Video

For more information

Advertisements

14 thoughts on “How to Make HTML Lists”

    1. Indeed! Unfortunately someone opened it up in the visual editor.. *looks at editors* 😛 I will re-upload the content tonight to get the sourcecode sections cleaned up and indented properly.

  1. LOL!

    Really excellent article. I love the examples. Nested lists are such a pain, and people are still doing it wrong, using UL to intent or not closing lists properly – this will clear things up for many. I’m thinking about including it in the class notes as required reading!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s