4.3 Inline HTML When You Need It

Hi, and welcome back to Top Speed HTML Development with Jade. In this lesson you are going to learn how to use HTML inline. Sometimes, it's just easier to put your HTML tags inline, instead of creating breaks using a pipe symbol and putting each individual HTML element on its own line. Sometimes you just want to do things all at once. Now, putting HTML inline, inside Jade, is very, very easy. As a general rule, wherever you can put plain text, you can also put HTML tags. For example, if you have a regular paragraph tag and inside that, you type out some emphasis tags, some italic tags, that will work perfectly fine. So I'll save and compile, and there are our HTML tags, which gives you our italicized text. Or, you can also place HTML in any line that starts with a pipe symbol. So we have our pipe symbol, putting text onto a new line, and we can enter strong tags inside. And that will work just the same as the approach we looked at on the line above, so we'll save that. And there we have our bolding effect. Now, one of the areas that this is particularly useful is placing inline content, such as YouTube videos. You don't want to have to mess around using the attributes inside brackets approach. You don't wanna have to grab the width and the height and the source and the frame boarder setting and etc., etc., etc., and have to convert that into the brackets format in order to enter the correct iframe element. Let me show you an example of what I'm talking about. So, right here we've got some embed code from YouTube, and so that I can just dump it right into the page, I have just entered a pipe symbol to indicate that the following code is just to be treated as plain text or as straight HTML. And now that code, even though it's not written in Jade formatting, will still render out perfectly on the page. Let's see. And there we have our YouTube video, so it's that easy. If you have preferences for writing things out in HTML code, raw HTML, that you're already familiar with, or if you have existing HTML that you just need to copy and paste into your file, it's that easy, so just remember that the rule is, wherever you can place plain text you can also place raw HTML. So now you've learned how to write HTML inline in your Jade files. You've also learned how to write mark down inline. Next up, we're going to look at how you can pull mark down and HTML into your code from external files. I'll see you in the next lesson.