2.4 Add Full Tag Attributes

Hi, and welcome back to Top-Speed HTML Development with Jade. In this lesson, you'll learn how to add attributes to any HTML element that you're creating with Jade. Now the time that you'll find yourself needing to add attributes most often is when you are creating links using a tags. You'll need to add attributes to several other tags, but because this is so common, that's where we'll begin. Now you already know that to add an a element, all you need to do is type out a and compile your file. And that will give you your basic a tags that you will use to create your links. And you also know that to place text inside, you just type it right next to the element. So that's all well and good, but obviously this link is not going to work without the required href and target attributes. So how do you add attributes to this tag? Well, again, like everything else, it's very, very easy. All you need to do is add in a set of brackets, and then type in each of the attributes that you'll need. So let's start with href, and then just add an equal sign, talking marks, and the value that you need to set against that attribute. So now we'll save and compile. And the attribute has automatically been appended to the opening element. Now what if you need to add a second attribute? All you need to do is just add a comma, and then you can go ahead and add your second attribute. So we'll say, target="blank". And now the second attribute, Has also been added. And you can do this as many times as you need to, in order to add as many attributes as you need. So we'll add a third one. And we'll make this a no follow link. And so again, you can see that the attribute has been successfully added. Now you can do this for as many different attributes as you need. All you need to have is a comma in between each attribute that you add inside those brackets. Now that said, there is a syntax that you can use to generate the same code, but without you needing to use commas to separate each of those attributes. What you'll do instead is place each attribute on its own line. So let's modify the code we just created to use this different approach. So after our opening brackets, the first attribute should go on its own new line, and that should be tab indented. Then the next attribute, instead of using a comma, should also go on its own new line. And the same thing applies to each one of those tags. So you can see that the code we created hasn't actually changed, and that's exactly what we want. And this'll give you the same ability to add attributes, but you just might find that you prefer a multi-lined approach, that you find it a bit neater, perhaps a bit easier to follow. Now even when you've added a series of attributes in this way, in between these brackets, you can still add class names and IDs in exactly the same way that you learned in the last lesson. For example, let's say you want to add a class name to this link, you say linkclass, save that and compile it. And it has put the class in, in just the same way that we would have expected were we not using attributes. So all of that still works in the same way, and we can chain on an ID. And again the ID has been added successfully. However, when you are using attributes, you also have an option to put your class names, and your ID names, inside the brackets as an attribute in themselves. So instead of writing our ID name here, We can just say, id="idname". And in the same way, instead of putting our class here, we can put it down here. class="classname". And when we compile, that will give us the exact same thing. The only difference is we've specified the order that these attributes have shown up, so they'll have shown up in the same order in our compiled HTML. Now why would you want to put your ID or your class name inside the brackets, rather than using the shorthand that we covered before? Well, we're just gonna touch briefly on something that will be explored more later on in the course, and that is the fact that variables are available in Jade that work much like JavaScript. So you can use a lot of JavaScript syntax in your Jade code. For example, if we wanted to set multiple class names against their element, we could do so via an array. And that array could be typed out using JavaScript syntax, for example. Straight inside these attribute tags, these attribute settings, I can add a JavaScript array, and then I can just add the class names that I want to use, in the same way that you would create an array in JavaScript. And you can see there that that has been interpreted correctly, and passed directly into the class attribute. And that becomes very, very handy when you start to do more dynamic things with your code like we'll be covering later on in the templating section. Now there's one more way that you can set attributes on an element, and this again borrows from JavaScript syntax, and it allows you to format your attributes as a JavaScript object. If you're not too familiar with JavaScript, don't worry, this will all make sense as you're going through the motions of putting your code together. Now this method of creating attribute is referred to as the end attribute method, and with this technique you don't actually place anything between these brackets. So we'll delete all of this. Now you still need to keep the brackets in place directly after the element. But you don't write anything in between those brackets. Instead you write ampersand, which is the and part of the and attributes, and then you type out attributes. So that's &attributes, and then you place another set of brackets after that. Now you're able to put a JavaScript object containing all of the attributes and their values that you want to include against this HTML element. Now rather than typing all that out, which will be a bit boring to watch, I'll paste some code in for you to look at. Now you'll notice that we have pretty much the same thing that we had before. The only difference is, instead of writing out the attribute in between the brackets, we've written them up in the syntax that you would use for a JavaScript object. And this will compile to give us, again, pretty much the same code. So we still have our ID, we have our href, our target. Everything is the same, but you're able to use a JavaScript object to set those attributes. And the reason that is valuable will be covered, it'll become apparent to you later, when we start to move into creating more dynamic Jade code. Now that covers all the different techniques that you can use to set attributes against your HTML elements using Jade. You can use the shortcutted ways or you can use the more JavaScript syntax oriented ways, depending on what your project needs, and what you personally prefer. Now, in the next lesson, we'll be looking at how to create a basic page structure, that you can then put all of this HTML creation knowledge that you've picked up, into. Now you will learn how to create a doc type, how to set up your HTML head, title, meta elements, and how to link a stylesheet into your page. And once you have that, that will be everything that you need to start immediately using Jade as a shorthand HTML development tool.