Hey this is Sasha and welcome to another training video for your business and in this video what we’re going to do is take a look at more HTML training as you continue to build your business website up, or try to get it going, or as you modify things on your business website.

In either case, today’s video is focused on looking at lists. And we’re going to look at three different types of lists.

Why do you need lists?

Lists are important because you can use it in order to create navigation menus, or menus on the right side of the website, such as side bar menus, or footer menus. They’re really used heavily when you look at HTML and creating a structure for your website. There are three main types of the list we have. Ordered list, unordered list, and then we also have a definition terms or definition list. Let’s take a look at these three.

They’re really used heavily when you look at HTML and creating a structure for your website. There are three main types of the list we have.

	
			
	

	

Welcome to my cooking website

		
		

Salads



		

Dinner



		

Hints

	
	

Ordered list, unordered list, and then we also have a definition terms or definition list. Let’s take a look at these three.

Unordered Lists

If we take a look at these couple of lists right here, you can see I have salads, dinner, and hints. Let’s create a couple of different lists. The first basic list that you’ll probably use, and you’ll probably use it most often is the unordered list. The way that it is structured is it uses the UL tag.

I go ahead and just type UL, and use a closing bracket UL — not much happens. I’m just setting up the basic tag. That just tells the browser that this is starting a list. The way that you create each line item for the list is the LI tag.

You have the LI and then again, closing tag LI. I could say, right here in our salads, we could have a Ceasar’s Salad, that’s our first list. If I go ahead and create another one, now I can type in another list for that. So again, LI and then I’ll go ahead and type in, let’s say a ‘fruit salad’. Then I could go ahead and continue to create a third one.

	
			
	

	

Welcome to my cooking website

		
		

Salads




 	
Cesar salad


 	
Fruit salad


 	
Beat salad




		

Dinner



		

Hints

	
	

The third one might be a Beet salad. So I have three salads right here. I’ll go ahead and save this and as you take a quick peek at what I’ve done, I hit refresh, and you can see right there that there is just a standard bullet point that I have.

There is my list that’s compounded and you get to see it right there. Those are our three salads. It’s unordered and the meaning of it is that there are no numbers that go with it.

If you do want some numbers that go with it, what you could do is create an ordered list.

Ordered Lists

The way that you create an ordered list is you type slash, you type in the bracket, OL. So you can see right there. That’s the ordered list. Just like UL — unordered list –, OL is ordered list. Maybe that helps you remember things.

	
			
	

	

Welcome to my cooking website

		
		

Salads




 	
Cesar salad


 	
Fruit salad


 	
Beat salad




		

Dinner




 	
Cesar salad


 	
Fruit salad


 	
Beat salad



		
		

Hints

	
	

Here what you do is again the concept is you’d use the LI tag. Here you say, ‘Ceasar’s salad, that’s the first one. Then I’ll just go ahead and copy and paste these right in there, so that way you can see how that’s done. I’ll go ahead and save that right there, and we’ll just go ahead and take a look at that, and you can see they’re under dinner.

You can see those are the three salads that are available. So, that’s kind of the cooking website that we have. There’s an unordered list, an ordered list, and now if you want hints, let’s say, you’re talking about dinner and there might be a spiciness level or something like that.

Definition Lists

Now the last list I want to look at is the definition list. It’s used a little less frequent, but you still may want to learn how to use it. It starts out the same way. And it’s the DL tag for the definition list.

Again, what I’m doing is adding a few spaces in there and it has kind of two promises to create this list. You have the definition title, right there, DT to be able to create the definition title, that’s what’s you’re using it for.

Here I might say, ‘spicy level’ and then what I’ll do right under that is it’ll be a definition description or DD, and in here it might say, ‘spicy level of five is extremely hot.’ As I go ahead and hit control Save, what you can do is now see this list right there. You could see there is kind of a definition title and then there is the definition description.

If we go back and you want to go ahead and expand on this, I could go ahead and just kind of duplicate this, and again, let’s just say, ‘spicy level of one and then two, and three’. So this is, ‘spicy level of one is sweet’, then ‘spicy level of two is medium’, and ‘spicy level of three is extremely hot.’ So I’ll go ahead and save that.

Now as we take a look at that you could see there’s our kind of definitions — out where the definition list. Sometimes you use these in a variety of ways for structuring content. Typically it’s used for nested list.

So, as you can see the way that it’s created is there’s something within another item, and you can see two levels or two elements sometimes, again, for navigations structures because it gives you another element in there. It could be used as well. But for the most part, your main concern should be at the beginning — this unordered list and the ordered list — those are the main ones that most people use.

	
			
	

	

Welcome to my cooking website

		
		

Salads




 	
Cesar salad


 	
Fruit salad


 	
Beat salad




		

Dinner




 	
Cesar salad


 	
Fruit salad


 	
Beat salad



		
		

Hints




 	
Spicy level 1


 	
Spicy level of 1 is sweet!

			

 	
Spicy level 2


 	
Spicy level of 2 is medium

			

 	
Spicy level 3


 	
Spicy level of 3 is extremely HOT!



	
	

The definition list, you will want to cross it as you start looking and reading more code, but you probably won’t use it that much within your code until you get more advanced and seeing how to use multi-list or nested list within these tags and splitting and breaking things apart with CSS.

Thanks for joining me in this video. I hope you found it helpful.

Don’t forget to subscribe over here by clicking this button. And if you want to join me on my newsletter list where I share exclusive premium content, or join me on a live Q and A, or webinar live class, then sign up to my newsletter list. Click this button right here and get on that newsletter list because that’s where I share some of the good stuff, and you can get access to some of my books and even premium training video courses on business growth and business development online.

Thanks again, and I hope to see you on my next training video.

Resources & Helpful Tools

Sublime Text
FileZilla FTP Client