Build Your Own Business Website header image

Introduction to HTML for WordPress & Thesis 2.1 Users – Part 6 – Creating Lists in HTML

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects - ,

Applies to - ,

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Next in this Introduction to HTML for WordPress and Thesis 2.1 users tutorial series we’re going to take a look at lists and lists in HTML. There are essentially two different kinds of list, there are unordered lists and there are ordered lists.

Unordered and Ordered Lists

An unordered list uses bullets and an ordered list uses numbers or letters in front of a list. So for example, if we come back over here to our list, here’s an unordered list. If we choose this one here that’s unordered list, if we choose this one here, that’s the ordered list, right?

Let’s choose our unordered list. If I wanted these all to be in the same list, if they’re already entered they have to be entered like that. So here’s our unordered list, I’m just going to create another unordered list here. We’ll come down and select these.

This is our unordered list and we click that, actually, that’s behaving oddly. Obviously you don’t generally start off with a bunch of text and then add the list item to it, you usually start typing and add another list item like that, unordered list item 5.

An ordered list is this kind here and it adds numbers or letters to the beginning of each list item so there’s your unordered list, there’s your ordered list. If we come over to the visual editor or the text editor and look at it, you can see the unordered list begins with a ul and then each list item has an li tag. The order list begins with an ol and the list items still start off with li.

Creating Lists in Visual and Text Views

You can create your lists in the visual editor which is what I always do because you don’t actually have to type out the HTML. You could also create your own unordered list by coming over here clicking that button for ul then you click li and then here is a list item then click the li again and another list item and then click the closing ul. Come back over to our page and refresh it and now we have unordered lists and ordered lists.

Nested Lists

One aspect of both of these is nested lists and that works the same way whether it’s an unordered list or not. What we’re going to do here is select this group of list items and we’re going to push this indent and now, we have a nested list. Update that and refresh this so you’ve got your unordered list and you’ve got your nested list.

Now, if you’re going to have deeply nested lists, I find it easiest or most reliably to put that list in an un-nested state and then once they’re in correctly then I go through and nest the list elements.

Let’s take a look at this. So we have an unordered list here and then we’ve got our unordered list item number 1. It’s got its closing li, we have our opening li for unordered list item number 2 and before we get to the closing li, you get an opening ul and then you have your lis and a closing ul and then you finally have the closing li.

That’s what makes it nested, is that this ul structure here is nested inside of the li structure. So if you are writing this yourself and you wanted your list to be nested you would do it before you close out the li. So now you’ve got a new opening li and nested item and then close the li and then close the ul and then let that closed li be its final closing.

Let’s look at this in the page source, there’s your li but before you close it you get to ul and your lis and your closing ul and your closing li. If we look to the source chart, here’s the unordered list item 2 and then its child is the ul, its child are these lis and then it closes that out.

And that’s the takeaway from this nested list. A nested list means a ul is contained inside of the li item. Another thing to say is that lists are block level elements, that is the uls, ols and lis are all block level elements which means they all automatically start a new line when they’re created and we can give them height and width and that sort of thing.

Menus are Unordered Lists

You have a very common use of lists as they are right here, right? Just creating a list like that but in fact, every menu you use in WordPress is created out of lists. So if we inspect this, you’ll see it’s actually a ul right, an unordered list. And this unordered list has list items or lis in it and then each of these lis then has a link to the appropriate page and that’s how menus are constructed out of unordered lists. The whole menu is the ul and then each menu item is a combination of an li with a link inside of it.

0 Comments… add one
0 comments… add one

Leave a Comment