Build Your Own Business Website header image

Introduction to HTML for WordPress & Genesis 2 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.

The next thing we’re going to talk about in this Introduction to HTML for WordPress and Genesis 2 Users seminar is creating a lists in HTML. Let’s begin in our visual editor where I have plenty of text that could be turned into lists.

Beginning Lists and Changing Existing Text into Lists

I’m going to come along and add an unordered list. Item 2, unordered list item 3, 4 1, 2 nested, just bear with me here for a second. Jumping back and forth between visual and text/HTML views does mess this up.

First off, in the editor here creating lists is very much like creating lists in a Word document, right? You can either start a list or you can select a bunch of lines and go over here and click the list.

An unordered list is a list that uses some kind of bullet without a number and an ordered list is a list that uses some kind of number system so that’s the difference between an unordered list and an ordered list.

Typical Syntax of Unordered and Ordered Lists

I’m going use an unordered list on this text here. Let’s come in and take a look at it in our HTML view. The unordered list starts with the ul and each list item starts with an li. So we have opening ul, closing ul and then each list item has an opening li tag and a closing li tag whereas ordered lists start with an ol. So ordered list starts with an ol and a closing ol and then it has the same lis for the list items. That’s the typical syntax for an unordered list and an ordered list.

Creating Nested Lists

When we are talking about that list there’s one kind of syntax to keep in mind and that is for the nested list which is one list nested inside of another. The way you create those is you first create the whole list and then you select the list items that should be elements of this list and then you just hit indent. That will make it a nested list item.

Now the trick to this nested list item is that the HTML changes up a little bit. What really happens here is that your list item, the nested list, is actually contained inside of the list item tag of the list item that is nested inside. So this list item tag doesn’t close here, right? It doesn’t close until after the closing ul of the nested list.

One of the reasons why I suggest you use this is because this actually allows you to set up these tabs so that you can see how this nesting works. If you look at it in the text editor, it’s not nearly as clear. If you were to copy and paste the list item it wouldn’t be indented properly and it’s kind of a pain in the rear end whereas you can tab it in in the visual view.

So that’s the syntax of an unordered list with a nested unordered list and nesting works the same way in an ordered list.

So Why Use the Visual View?

Somebody just suggested that maybe it would be a good idea then just to disable the visual text editor. I don’t think so. I appreciate the fact that the visual text editor writes my HTML for me and I personally don’t like writing HTML. There are people who are HTML purists or people who don’t like the fact that the visual editor does this kind of coding.

And in that case, if you really want to write your HTML in the content area then sure, disable the visual editor and install this ACE editor which will give you code completion, automatic tag completion and tag linking and so on. That will make your HTML editing quite a bit easier but I don’t really like to do it that way.

I would prefer just to do almost everything I possibly can in the visual editor and then switch to the text editor or the ACE editor for those things that I cannot do inside of the visual editor, that’s how I work. As odd as this may sound I don’t really like to write code because it is so easy to make typos and that kind of error. And that’s the one thing that the text editor doesn’t do, it doesn’t make any typos.

Lists are Block Level Elements

One other thing to say about this is that lists and list items are block level elements. So they can be given a height and a width, they can be floated and moved around in position. So one of the things that lists are used for extensively are menus.

Menus are Unordered Lists

That’s really what’s going on here, this menu is an unordered list and each menu element is a list item. Each dropdown menu is a nested unordered list inside of its parent’s list item and you can see that, if we open back up this nav class here where we get down to the menu. You’ve got ul so there’s your unordered list and then you’ve got all these lis. Except here’s an li that has a nested list under it so it’s got the ul submenu and that ul submenu has a bunch of lis and there’s the closing li of this li element, so on and so forth. Menus are unordered lists with list items.

0 Comments… add one
0 comments… add one

Leave a Comment