FREELessons: 32Length: 5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Lists

[SOUND] Welcome to day three. So, I noted in the last lesson that today we would cover how to create a list of items. If you've used a normal text editor, you might do this. This is my list. Here is another item. This is fairly common, right? Well, within HTML what would happen if we just saved this and came back and viewed it. We would get it all on one line because remember, HTML it's going to honor this white space unless you tell it to. Instead, it's just gonna read this all as one long stream as you can see like so. So there's a couple ways around this. One is to use what we call a break element and that means create a line break here. Lets do that now. I can do br and self close it as we did up here, or it's equally okay for you to do it like so. So lets keep it like this way for now. As a rule of thumb though, try to be consistent. So, if you leave it off, try to leave it off in all places of your document. It'll make it a little cleaner. So, in this case, I will go ahead and remove that, like so. And now if I come back and reload the page, can you see that now each one of these is, are, is on our own line. But again, as soon as we add another item, I'll save that and come back. It's all gonna be that own line. So you need to specify each place where there's a line break. So what if you wanted more than one line break? You could add another one. So now I'm going to say have two line breaks like so. So as you can imagine though, this is the way it was done in the old days and this can really quickly create very, very sloppy code. So it is okay to use a break element when that is really what you need. You need a line break. However, most of the time you'll find there is a better tool for the job. In this case, we're trying to create a list, but we're not using actually HTML markup to create a list. Let's do that now. We specify a list by doing ul. Now, there are a couple types of lists, and we'll go over each one today. This one is called an unordered list, which means we're not doing this in numbers, meaning number one, number two. There is no order. So we use unordered list. Again I close it out because I have to specify when this list completes, and that's the only way I can do it. Let's add a list item, so I don't simply add my items here. I have to use another tag, and this is called a child tag list item. Now I will say, go to the mall. Maybe we have our tasks. Again, I have to close out my list items. So let's save that, and see what we get. Now, again, note that, by default, it doesn't have to be this way but, by default, we have a bullet and it's indented a little bit. Now, this is important for me to drill into your head. A list does not have to be formated like you would normally see, whether it's tasks or anything of that nature. A list simply refers to the most basic level, a list of items, that's it. As long as what you are adding within your list conforms that, then it's fine. There is an element called definition list that we'll look at shortly. That is the same way. A definition list has a definition, followed by the term, followed by the actual definition, or the details. And you can have a list of these. So, as long as it conforms to the word list, you can use and you don't need to worry about how it looks on the page by default at all. Because that is all over writable. Lets add a couple more, so I can do this manually or it's common to select the entire bit of code and here on the Mac, I'm doing Shift+Cmd+ Right, on the PC it'll probably be Ctrl+Shift+Right. Then I will hit Cmd+C or Ctrl+C and Cmd+V or Ctrl+V. And I will assume that you have a basic understanding of how to do those types of tasks. So now we will say, shop and we'll do one more. Get gas and drive home like so. Let's save that. And note that we have a bit of spacing here. Always try to be consistent. So, if we don't have any spacing up here, we probably shouldn't have any here. Now, this all comes down to personal preference. So the key is, be consistent. If you like a spacing, I, I do this sometimes to give some breathing room, then always try to do that here. Otherwise, it can get a little messy when your markup is, is inconsistent. I'm gonna save that. Come back. Refresh the page, and now, as we would hope, we have a nice list of items. So if we were to come back, and lets say we want to remove this and we want to provide a heading, things I need to do today. Well, on this page the most important heading is things I need to do today. So I will do H1, things I must do today. And I'm gonna close it off, Save it, and now we have a nice task list and this is something you can do on your own. If you need to keep a list of things you need to do that day, you can code it in HTML. And you don't have to worry about using a program like Word to format it, because this will work perfectly. Next, let's take a look at an ordered list. And the only difference is, rather than using UL, we use OL. Now, Sublime Text has a nice feature, where if you select a bit of text, and on the Mac it's Ctrl+Cmd+G, you can see that it will select every occurrence of that sequence. So what's nice about this, is it will create multiple cursors. If I wanted to change this to an ordered list, after pressing Ctrl+Cmd+G, I can now type ol, and notice that it updates in each section. On the PC, on the other hand, you will press Alt+F3. So for example, if I said hello, and down here hello, and maybe up here, hello as well. I'm gonna select this word, select this word, press Ctrl+Cmd+G on the Mac, or Alt+F3, and it's going to select every occurrence of this. But it's not just a find and replace. It creates cursors. If I zoom in, notice that there is a cursor here, here, and here. And now I can delete that and write goodbye. Believe it or not, this is a very new addition to code editors and it's vital that you use it. We took these days that I couldn't imagine not having this option available. And I also want you to note, it's only available to my understanding in sublime text, but it'll surely become available in other editors in the future. But it's a very good technique to have especially in situations like this, where we only need to change one or two letters. Rather than doing it manually like this, which takes time and it's still okay if you do that. I would prefer to select it and update both at once. So now, we switch to an ordered list, let's see what the difference is. Now this is more appropriate when you need to number things. Number one, number two, as you can see right here. So, whether you use an unordered list or an ordered list, really comes down to how you intend to use it. In this case of tasks, I think it makes more sense to use an unordered list because there is no order of events. So I will switch that back. However, if I did something like the five best ways to code, then I would use an ordered list for number one, number two, number three, number four. And number five, so now that we've covered unordered lists and ordered lists, lets take a look at the last and least common which is the definition list. So we will place this at the top. And we do a definition list by doing dl. Notice how often the element names correspond to the actual name. DL for definition list. Now this is slightly more complex, but you can understand it. A definition list requires for each item, the term as well as the details. So it's common to use it for definitions, but it doesn't have to as long as you can make it fit into that concept. Let's stick with the definition idea. And let's say we want the definition term, and we'll say sublime. And I'm gonna close it out. And now we need to provide the definition for this or the details for that. It doesn't have to be a definition, it's just simply a way to connect this to this value, and I will say a code editor. Let's view that in the browser. Refresh, and now notice that the default formatting is to have the term here, then the details or the definition is on its own line and indented. So, if we wanted to have a handful of these, I could copy this and paste them in, like so. And I'll do a couple more. I refresh. Now you can see all of them take that syntax and styling. But again, it does not have to. If you would like the details to be on the same line as the term, you can do that as well, and we'll learn how to do that when we dig into our CSS. For now, we need to learn the basics and the structure of our page before we can style our page. Now before we finish up for the day, I want you to take note of a couple things. Remember how, within our paragraph, we could say hi, and then we could make there bold, like so. This is perfectly fine in clean markup. Now, this is not necessarily always going to be true. For example, there are elements that will only accept certain other elements as children. Now I want you to remember, when I say children and parent, you can use the indentation as triggers in your mind. The definition list has children, and those children are the dt elements and the dd, and we indent them to specify that they are children. But you don't have to. Notice if I did this, like so, and I viewed it in the browser, nothing would change. It's all the same. But we indent for ourselves and because it creates cleaner code. Also it's a nicer way to know these are children of this element. So for example, the dt is a child of the definition list. This paragraph element is a child, not of the h1, but a child of the body element. And we're going to take a look at that in day four much more specifically. But for now, it's important for you to know that you cannot simply take this paragraph of text right here, and put it within a definition list. Let's see what would happen if we did though. Save it, and if I refresh the page, you will see that it seemingly works. Let's try removing it, and we'll place it down here as well. Refresh and seemingly, it does work. And this is an important distinction to make is that, the browser will make up for your bad coding. Always remember that. The browser will make assumptions about what you meant here. So even though this is a bad practice, the browser will say, okay, well, he meant well. Let's just go ahead and display this on the page. But a definition list only wants definition terms and details and if you don't follow this, in some browsers, there may be errors because while Chrome may be smart enough to make up for your bad coding,maybe an old version of internet explorer will not. So always follow best practices. And this is going to be true for an unordered list as well. We cannot simply add a heading tag, we cannot simply add a heading tag like so. If I view it in the browser, it'll display fine, but, it's not following good practices. An unordered list wants list items as children. It didn't ask for a heading or anything that is not a list item. In this case, if we wanted to add a heading within a list, you can do that but make sure you place it within a list item like so. Now if I come back, it's going to look the same but it's following the best practices. Now, here's one other quick note. What if you have a heading, and then you want a paragraph. If I save that, reload, that looks fine. But notice how quickly this is getting messy. So if you have just a bit of text or code, you can place it on one line like so. But if you have a lot, it's a best practice to separate the list item into one or more lines, and then you can take everything within it and indent, like so. So now we have a list item, and within it, here are the children. And it's going to display the same, but it looks much cleaner. So always follow good indentation practices. In the next lesson, we're gonna focus on parent-child relationships and what that means

Back to the top