2.1 Fast HTML Tags and Nesting

Welcome back to top speed HTML development with Jade. This lesson is fast HTML tags and nesting. In this lesson you are going to learn how to create every HTML tag that you need to work with in that easiest way possible. With using Jade you no longer have to remember to close tags, you no longer have to keep tabs on what things are nested inside other things. So you're not gonna get stuck with the infamous open ended div tag ever again. Now we're gonna start with just a couple of simple HTML tags and comments so that you can see the absolute foundation level of how this language works. On the left side of the screen, we'll be writing our Jade, and on the right side of the screen, you'll see the compiled HTML. Now, this file is just being compiled using Prepros and that has been set up in exactly the same way as you saw in the last video. All right, so first things first. We're actually going to begin with comments because you will find yourself using them a lot. Because you're using sublime text 3 you don't have to think too much about the correct syntax to create jade comments. To enter a comment all you need to do is press command slash and that will enter the correct comment syntax. We are going to start with some basic tag examples. All right, now the world's most common HTML element is probably div, so let's have a look at what happens when we just type out the word div. Let's save and compile. And have a look at that, Jade has just automatically detected the HTML element that you are working with, has wrapped it in the less than and greater than tags, and has also added in the closing tag for you. Now all you had to do was just type in the name of the element that you wanted to work with. And that works with all the HTML elements that you're already familiar with. So let's have a look. So H1 tags, P tags, A tags, in fact you know I have a whole slab of these already prepared. All of these HTML tags that you're using day in and day out when you're working with HTML are all processed in the same way. So let's save that and see the result. So there you go, have a look at they've all just been automatically closed for you. You'll never have to write another greater than or less than sign again, as long as you're working with Jade. Now you've probably noticed there's something in common with each one of these basic tag examples. They all have a closing tag, a separate closing tag, so a closing footer tag, a closing aside tag, et cetera. But what about self closing tags like the image tag or the break tag? Well you are fine there as well because that is also automatically handled so we are going to add in another little comment to break this section up for you. Self closing tags, okay so we have the image tag as I said, the line break tag and again I have a few more already prepared to show you. Okay, so have a look at how Jade will handle these tags for you. So there you can see, just make a little space here, these are all also automatically detected and handled. So you don't need to worry about differentiating between tags that need to have a separate closing tag and tags that are self closing, otherwise known as void elements. Now, the next part of the picture is what do you do when you need to nest one HTML element inside another HTML element? And that's also very, very easy to handle. We will start by having a look at an unordered list, which is one of the common ways that you will be nesting HTML elements inside a parent HTML element. All right, so. Nesting example, you already know that by just typing that UL, you'll get the tag closing automatically. So there's your opening and closing UL tags. Now you need to be able to put your li, your list item tags inside. How do you do that? Very, very easily. All you need to do is hit Enter, and go into a new line, and you'll see that sublime text is automatically tab indented on that new line. Every time in Jade that you create a tab indentation, you're letting the system know that you want whatever is on that new line to be nested inside the line above it. Let's see that in action. So if I type out L I, and for interest, let's just do that a few times, and then I compile, now, you can see we have all these list items nicely nested inside the parent annotated list element. And you'll notice that each time I added extra list items, I made sure to backspace, so that they were not also indented inside their parent. If you forget to do that, what you'll have is an additional layer of nesting. So this is where you wanna pay attention to these little dotted lines in sublime text. Now I'll just make some space below this so you can see this a little easier. Now these dotted lines that you'll see running down the left side of each of your sets of elements that will help you to keep track of what level of nesting you're working with. If I was to continue typing in li tags, and let's just put another one here to just emphasize the effects, [SOUND] you see how there is a line running down here that connects these two elements. That tells you that these are indented, they're all nested to the same level. So if you want to make sure that all of your items are nested to the same level, just make sure they're all vertically aligned. Just like that. So there you go. What happens if you deliberately want to create multiple levels of nesting? So then the same thing applies again. Say, for example, let's take a table. Commonly a table would consist of the parent table element then after that you will want a table row, so that will be one level of indentation, one level of nesting. Just like this. Then to get your table column inside your table row just allow another level of nesting. Now when we save and compile that you see we have the proper table code with the proper level of nesting for each one of the child elements. So, that's all pretty straight forward. That's a pretty easy way to handle all of the nesting that you need to do. Just create a new line and then tab indent. But sometimes you're going to be working with code where having to indent every level is kind of a pain. So let's have a look at an example. All right. So, Make some space to make this a bit easier for you to see. All right, now here we have a div tag inside that is a paragraph tag and inside that is a span tag. That will give us this code here. And by the way, if at any time you want to hide some of your Jcode, just highlight it all and, like I said, Cmd+/ to comment it all out. That's a bit easier for you to see. All right, now let's say your just wanting to write some quick text out. You don't necessarily want to have to tab indent every single line. And that's what you can use jades in line nesting syntax. So instead of putting them all on new tab indented lines. At the end of your first element you just write a colon and that will mean that you don't have to tab indent the next element which is a paragraph tag. And we know again, we're not going to want to tab indent the next element so another colon followed by our span tag. Now this is the last of the elements that we're working with, so this one does not need a colon. You just need the colon wherever you're saying make the, treat this as the equivalent of a tab-indented new line. Now if we compile that you will see you get exactly the same code. That gives you a couple of ways to approach handling nesting depending on what kind of code you are writing at the time, and what works out to be the neatest and easiest method. So now just to finish up I'm gonna show you one more example of a bit more in depth use of this nesting methodology. Something a bit more similar to what you'll probably experience when you're developing content for Live Science. On the left side of your screen here you're seeing a set of HTML that's very typical of the type of thing you'll run into in development. Now you can see that there's a lot of nesting going on that can become pretty hard to keep track of. Especially when you consider as just the tags alone that we're looking at. We don't have the content and the element attributes, et cetera, et cetera. Now, this can be really difficult for you to keep tabs on and for anyone else that wants to come along and edit your code later. And that's especially the case if the HTML is not indented or if it's perhaps mistakenly indented incorrectly. So by using Jade, you eliminate that problem altogether. Now we're gonna recreate this HTML. I'll go through this very quickly assuming that you understand the raw HTML side of things. I'll just show you how to reproduce this using pure Jade. Now we will begin Just by adding in our top layer of HTML elements. So we've got a header element, nav, main, aside, and footer. And you can see those here in this first level of nesting. And that's all you have to do to create that first level, that first blocking out of your page. So that's our first part right there. And so now we're gonna add a bit of content to the header. We will add some navigation items. We will add an article inside the main section. And we'll just add a space for a paragraph inside the sidebar and inside the footer. This is a fairly common structure for articles, having a header within those, a div surrounding content, and a footer. And there you go. Instantly all of that nesting is just handled for you. All the tab indentation is done correctly. And it's much, much easier to follow when it's written in this format. All right, now we're gonna add in a little article content. So we would have a heading inside the header. And we'll add a little bit of content inside of this div, which would hold the main body of the article and another couple of elements that would sit inside of the article's footer. And so that has recreated the exact same HTML that we just looked at over here. However, because we are using Jade, we're using it's nesting methodology, this is so much easier to keep track of and it really reduces your likelihood of running into nesting errors. Like I said earlier, all you have to do is just keep an eye on these columns, these lines and they will help you to make sure that you know exactly what's going on with all of your nesting. And that's everything that you need to know about how to create HTML tags, quickly using Jade. You know how to create elements, you know how to deal with self closing elements and you know how to handle nesting. So the next step is to be able to put text inside those elements and that's what you'll learn in the next lesson.