2.2 Placing Text Inside Tags

Hi, welcome back to Top Speed HTML Development with Jade. In the last lesson, you learned how to create HTML elements really quickly. But they're not going to be much good to you if there's no content inside them. So the next thing you need to learn is how to put text inside your Jade tags. Now let's start with the absolute most common tag that you'll find text inside, the paragraph tag. Now that's all I have to do in Jade to create a paragraph tag. Save that to compile it, and there we have our opening and closing paragraph tags. Now how do I get text to go in between these tags? Well, it's super easy, just like everything else in Jade. I just create a space after the tag, and then I just type in my text. Place text like this. Now, when I save and compile, that text is automatically placed in between the opening and closing tags, super, super easy. There are other ways that you can also add text, and let's take a look at one of those. The second way is to use the pipe symbol. Now the pipe symbol is the little vertical line that you'll find on your keyboard. You just add a pipe symbol, put a space under it, and then you can add text and it will give you the same type of rendering process. All right, so, or like this. Now again, that will place that text inside your paragraph tags, or whatever other HTML tags you're using. However, the pipe symbol Has no effect if it's not on its own line. Now, you can see in this case, the pipe symbol has just been read as literal text. The pipe symbol must be on a new line, tab-indented, or it will just go straight into your text content. And the reason that you want to use the pipe symbol, or you may want to use the pipe symbol, is because it allows you to break up multiple lines, so One line, Two lines, Three lines. Even though I've broken these up, these will all still be placed within the same paragraph tag. And that's useful for if you are writing out a long paragraph, and you don't want to have one big, long line of text that is difficult to read inside your text editor. For example. So you're still gonna have the same result in your compiled HTML code, but it'll be easier to keep track of inside your Jade code. Now, you can also take advantage of the way that the pipe symbol lets you split up your text in order to insert additional HTML elements within the random text that you’re creating. Now let me show you an example. Now, you recall in order to nest any HTML element in Jade, it needs to be tab-indented and it needs to be on its own line. Now this line break tag here is an example of that, and because we have used the pipe symbol to split up our lines of text, that then allows us to have this line break tag on it's own line and still tab-indented, so it's recognized as needing to be a child element of the paragraph tag that it's sitting inside of. And the same thing goes for these strong tags. I've been able to put a line of text on its own, preface with the pipe symbol, then create a new line, and place a strong tag. Now I've also used the same technique that you've seen above, where I have placed text immediately after an HTML tag to set what text should go within this strong tag, and then I've just put the last little piece of text again on its own line. And because that's on it's own line, prefaced with the pipe symbol, the system knows that it doesn't need to go inside of these strong tags. Now, that's probably gonna make a bit more sense once you see it compiled. So let's save that, and here is our resulting HTML. And you can see everything has been compiled into a single paragraph. This is our br tag, and that has been placed inline. We've got our strong tag here and you can see our opening and closing strong tag. Inside those strong tags, you've got the text that we placed on the line here. Now in case that's not a 100% clear just yet, let's look at a quick, live example of how you might come upon writing up code like this as you're creating live content. So you would begin your line, you would be typing, and then you would realize that you realize that you really need a line break right here. So you'd jump onto a new line, adding your line break, and then, with the same level of indentation, to ensure that you are nested to the same level, you would continue on. And that would generate your paragraph tag with your line break tag in the correct location. And then the same thing would apply for adding in your strong tags. You realize hey, I really want to bold this text. So you would add in your strong tags with the text on the same line that you wanted to bold, bolded text, and then you would carry on again. So that's all pretty flexible, it makes it pretty easy to handle the essentials of adding in text content. When you're working with more complex content you'll want something a bit more sophisticated, which we will be covering later, but that's the basics of how you insert text inside HTML elements in Jade. Now you'll notice there's still something pretty important that's still missing from our tags as they are right now, and that is class names and IDs that you can match onto with your CSS and your JavaScript. In the next lesson, you'll learn about how to add these in just as quickly and easily as everything else that we've covered so far.