2.3 Shortcuts to Insert Classes and IDs

Hi, welcome back to Top Speed HTML Development with Jade. In this lesson, you're going to learn how to add class names and IDs to your HTML elements. So let's start with an example that you'll find yourself often using, and that is adding a class name to a div. Now, in Jade, it couldn't be easier to do this. All you need to do is type out your element name, just like you learned in the previous lessons, and then you simply add your class name to it like this. A dot to denote a class and then whatever the name of your class is. And as you learned in the lesson prior to this one, to add your text inside you simply type it out. Now we will save that so it compiles. And there you can see, you have your div with your class name applied automatically and the text inside. Now the same process can be used to add an ID name. So again, you type out your HTML element and this time, because you're using an ID and not a class, you use a hashtag. And then you add your ID name and whatever the contents of your element is. And we'll compile that. And you can see now you have your ID added to that element in just the same way as we had the class name added to the prior one. Now this will work with any HTML element. So for example, let's say you want to have the main title of your page or, say, the first paragraph of an article, this will continue to work in the same way. Now there's one extra shortcut that is very useful with Jade and that is the ability to leave out the actual div element. You don't actually have to type out div if you are only going to be using a div. So because div is the most common element that you'll use in HTML, if you don't actually type out an element at all, you only type out a class name or an ID name, Jade will automatically insert that div for you. So let me show you. So let's say you have a div with a class name, you compile that. It will automatically issue that you want to have a div as your HTML element and the same thing applies for IDs. Again, that would just automatically insert the div as your element. And this whole process also works with the nesting that you also learned about earlier. So let's say, for example, we have a parent div. Inside that, we might have a child div and inside that we might have a grandchild div. So that has automatically generated our nested div structure. With we have a dot in our first line of our parent div so that has been interpreted correctly as being a class name. And our subsequently nested ID'd classes have also then been nested within the proceeding element. And the final option that I wanna show you is the ability to chain together class names. So if you need to apply multiple classes to one element, you just type them all out in a row. So you don't need any spaces in between. All you need to do is just separate them only with the dots that denote you'll be using a class name. So there, that has applied each of the class names correctly to the div. Now, you can also add an ID to that. Now, because you should only ever have a single ID, ID's should be unique, so you can only add one ID in this way. So, see, that gives us a single ID, a single identifier, for this div. However, a second one will not work. So there you go. You can see that it's only chosen the first ID that you went to because you should only use one ID at a time. Now, you can, if you prefer, you can change up the order of this. So you might put your ID first, and then follow it up with class names. So there you go, that is super easy, so you can create a whole HTML structure without even specifying the HTML elements, so you can get all your layout elements in place very, very quickly and very, very easily. So you now know how to create HTML elements, you know how to put text inside those elements, you know how to nest the elements and you know how to add class and ID names. So there's really only one thing left to be able to completely round out your HTML shorthand and that is the ability to add extra attributes. For example, say you're creating a link with the A element. It's not gonna be much good to you if you can't specify the href attribute and the target attribute. So in the next lesson you will learn how to add any attribute that you need to any HTML element