1 1 00:00:00,340 --> 00:00:01,970 Hi guys, and welcome back. 2 2 00:00:01,970 --> 00:00:05,990 In this video, we're going to look at some more HTML. 3 3 00:00:05,990 --> 00:00:09,580 Specifically, we're going to look at nesting HTML elements, 4 4 00:00:09,580 --> 00:00:11,940 and we've discussed that you can put 5 5 00:00:11,940 --> 00:00:14,620 more than just text inside HTML elements. 6 6 00:00:14,620 --> 00:00:17,620 Some HTML elements can contain other elements. 7 7 00:00:17,620 --> 00:00:20,060 So, in this video, let's take a look at that 8 8 00:00:20,060 --> 00:00:22,370 and how it works. 9 9 00:00:22,370 --> 00:00:24,980 So, I'm going to start writing code in this video 10 10 00:00:24,980 --> 00:00:26,670 and you should as well. 11 11 00:00:26,670 --> 00:00:29,000 So what I have done, is I have opened my editor. 12 12 00:00:29,000 --> 00:00:30,400 I'm using Visual Studio Code, 13 13 00:00:30,400 --> 00:00:31,950 but you can use any editor you want, 14 14 00:00:31,950 --> 00:00:34,070 even notepad if that's what you want to do, 15 15 00:00:34,070 --> 00:00:35,680 although I don't recommend it. 16 16 00:00:35,680 --> 00:00:39,740 And I've created a file that I've called index.HTML. 17 17 00:00:39,740 --> 00:00:42,460 Now, this file is where I'm gonna be writing my code, 18 18 00:00:42,460 --> 00:00:43,800 and what I've got here on the right, 19 19 00:00:43,800 --> 00:00:46,820 is I've got the file open in my browser. 20 20 00:00:46,820 --> 00:00:48,820 If you create an HTML file, 21 21 00:00:48,820 --> 00:00:50,450 you can normally just double click it 22 22 00:00:50,450 --> 00:00:51,407 and your browser will open it, 23 23 00:00:51,407 --> 00:00:55,250 and it will show you what that HTML evaluates to 24 24 00:00:55,250 --> 00:00:57,110 in terms of visuals. 25 25 00:00:57,110 --> 00:00:59,320 And so, that is what we've got going on here. 26 26 00:00:59,320 --> 00:01:00,770 Whenever they save my file, 27 27 00:01:00,770 --> 00:01:02,230 I'm gonna refresh my browser 28 28 00:01:02,230 --> 00:01:04,580 and it's gonna show me the changes in the file. 29 29 00:01:05,510 --> 00:01:09,630 So, most HTML starts with some boilerplate. 30 30 00:01:09,630 --> 00:01:11,610 As we've seen in an earlier video, 31 31 00:01:11,610 --> 00:01:13,550 that is like the doc type element 32 32 00:01:13,550 --> 00:01:16,530 and the HTML and the body and so on. 33 33 00:01:16,530 --> 00:01:19,480 But you can put HTML directly on the page 34 34 00:01:19,480 --> 00:01:21,880 with none of the boilerplate, if you want, 35 35 00:01:21,880 --> 00:01:23,750 and the browser will normally understand. 36 36 00:01:23,750 --> 00:01:25,600 So, I'll show you what that looks like first, 37 37 00:01:25,600 --> 00:01:27,940 and then we'll add the boilerplate as well. 38 38 00:01:27,940 --> 00:01:30,100 Normally, whenever we're coding in HTML, 39 39 00:01:30,100 --> 00:01:32,760 we start off with a container element. 40 40 00:01:32,760 --> 00:01:35,700 That could be something like article. 41 41 00:01:35,700 --> 00:01:37,990 So here, I've got an article element 42 42 00:01:37,990 --> 00:01:42,990 and this is used to denote a self-contained piece of work. 43 43 00:01:43,380 --> 00:01:46,110 And so here, if I hover over it in Visual Studio Code, 44 44 00:01:46,110 --> 00:01:49,610 it very nicely gives me a description of what an article is. 45 45 00:01:49,610 --> 00:01:50,960 So if you're using VS Code, 46 46 00:01:50,960 --> 00:01:52,320 you can make use of that as well. 47 47 00:01:52,320 --> 00:01:54,390 So the article represents a complete 48 48 00:01:54,390 --> 00:01:56,740 or self-contained composition. 49 49 00:01:56,740 --> 00:01:59,880 For example, a blog post would be an article, 50 50 00:01:59,880 --> 00:02:03,000 but so would anything else that could be self-contained 51 51 00:02:03,000 --> 00:02:04,730 and understood independently 52 52 00:02:04,730 --> 00:02:07,800 of the rest of the elements on the page, on its own. 53 53 00:02:07,800 --> 00:02:09,460 So here we've got an article and inside it, 54 54 00:02:09,460 --> 00:02:11,630 we're gonna put an H one element. 55 55 00:02:11,630 --> 00:02:13,020 This is a header one 56 56 00:02:13,020 --> 00:02:16,750 or the most important heading on the page. 57 57 00:02:16,750 --> 00:02:19,940 Notice that this will be displayed as, 58 58 00:02:19,940 --> 00:02:23,520 for example, Pirate Lingo here. 59 59 00:02:23,520 --> 00:02:26,440 This will be displayed as a very big heading. 60 60 00:02:26,440 --> 00:02:27,900 And obviously, it's not that big in here. 61 61 00:02:27,900 --> 00:02:29,040 I'm gonna zoom in a little bit, 62 62 00:02:29,040 --> 00:02:31,000 so that you guys can see it a bit bigger, 63 63 00:02:31,000 --> 00:02:34,570 but this is gonna be displayed as a big text, 64 64 00:02:34,570 --> 00:02:38,460 but the visuals of the text are irrelevant. 65 65 00:02:38,460 --> 00:02:41,560 That is just the default browser styles 66 66 00:02:41,560 --> 00:02:44,090 that are being applied in here. 67 67 00:02:44,090 --> 00:02:45,310 We can change those styles. 68 68 00:02:45,310 --> 00:02:48,520 We can make this H one element look tiny if we wanted to, 69 69 00:02:48,520 --> 00:02:50,190 and it would still mean the same thing, 70 70 00:02:50,190 --> 00:02:52,810 the most important heading on the page. 71 71 00:02:52,810 --> 00:02:54,310 Then let's add a paragraph. 72 72 00:02:54,310 --> 00:02:55,560 And what I'm gonna do here, 73 73 00:02:55,560 --> 00:02:58,250 is I'm just going to add some pirate lingo 74 74 00:02:58,250 --> 00:02:59,740 that I've copied off the internet. 75 75 00:02:59,740 --> 00:03:02,660 And so, we're gonna save that and we're gonna refresh it, 76 76 00:03:02,660 --> 00:03:04,850 and you can see that that shows up there. 77 77 00:03:04,850 --> 00:03:08,660 HTML doesn't care about new lines and white space. 78 78 00:03:08,660 --> 00:03:11,220 So we could put this into different lines, 79 79 00:03:11,220 --> 00:03:13,400 if we want like that. 80 80 00:03:13,400 --> 00:03:15,810 Obviously, my editor is saving it back into one, 81 81 00:03:15,810 --> 00:03:16,780 but even if you did that, 82 82 00:03:16,780 --> 00:03:18,450 it would still show up as exactly the same, 83 83 00:03:18,450 --> 00:03:21,160 because HTML doesn't care about new lines. 84 84 00:03:21,160 --> 00:03:22,320 So, that's that, in order for us 85 85 00:03:22,320 --> 00:03:23,660 to be able to see this a bit better, 86 86 00:03:23,660 --> 00:03:26,170 I'm just gonna close my sidebar there. 87 87 00:03:26,170 --> 00:03:27,190 There are some limitations 88 88 00:03:27,190 --> 00:03:30,780 as to what can be included inside another element. 89 89 00:03:30,780 --> 00:03:33,270 For example, the article element, 90 90 00:03:33,270 --> 00:03:35,770 means a self-contained piece of work 91 91 00:03:35,770 --> 00:03:37,730 or self-contained composition. 92 92 00:03:37,730 --> 00:03:41,780 So, if this thing here made sense on its own, for example, 93 93 00:03:41,780 --> 00:03:46,720 we were trying to display what the pirate lingo looks like. 94 94 00:03:46,720 --> 00:03:49,050 As an example, we could then potentially 95 95 00:03:49,050 --> 00:03:51,480 copy this or reuse it in a different website 96 96 00:03:51,480 --> 00:03:52,550 or a different part of our site, 97 97 00:03:52,550 --> 00:03:53,410 and it would still make sense. 98 98 00:03:53,410 --> 00:03:55,610 Then an article is the right choice for that, 99 99 00:03:55,610 --> 00:03:59,810 but we don't want to nest the things that don't make sense. 100 100 00:03:59,810 --> 00:04:03,100 For example, if we put the H one in here 101 101 00:04:04,070 --> 00:04:06,210 around the article tag, 102 102 00:04:06,210 --> 00:04:08,950 this stops making sense very quickly. 103 103 00:04:08,950 --> 00:04:10,350 So, if we do something like this, 104 104 00:04:10,350 --> 00:04:13,970 now our heading contains an article, 105 105 00:04:13,970 --> 00:04:16,180 which is a bit weird. 106 106 00:04:16,180 --> 00:04:18,570 Also, not only does it not make much sense, 107 107 00:04:18,570 --> 00:04:21,110 at least to me logically, 108 108 00:04:21,110 --> 00:04:23,290 but also heading elements, as we've discussed 109 109 00:04:23,290 --> 00:04:24,840 earlier on in a previous lecture 110 110 00:04:24,840 --> 00:04:27,140 can only contain a phrasing content 111 111 00:04:27,140 --> 00:04:29,670 and articles are not phrasing content. 112 112 00:04:29,670 --> 00:04:31,480 So this is invalid markup, 113 113 00:04:31,480 --> 00:04:34,060 just parting from the rules of HTML. 114 114 00:04:34,060 --> 00:04:35,960 If we do this and run it, 115 115 00:04:35,960 --> 00:04:38,030 you'll see that the browser 116 116 00:04:38,030 --> 00:04:40,800 does try to do something with it. 117 117 00:04:40,800 --> 00:04:43,120 The whole thing now looks like a heading 118 118 00:04:43,120 --> 00:04:45,780 and then we can right-click that and inspect it, 119 119 00:04:45,780 --> 00:04:46,810 and that's gonna show us 120 120 00:04:46,810 --> 00:04:49,400 what this has evaluated to in HTML. 121 121 00:04:49,400 --> 00:04:50,540 And you can see that the browser 122 122 00:04:50,540 --> 00:04:52,960 has not made any changes to our markup, 123 123 00:04:52,960 --> 00:04:56,410 and it still shows as a heading anyway. 124 124 00:04:56,410 --> 00:04:58,530 But obviously, this would be really confusing 125 125 00:04:58,530 --> 00:05:01,100 to anybody that's looking at this page 126 126 00:05:01,100 --> 00:05:03,480 or any computer that's reading this HTML, 127 127 00:05:03,480 --> 00:05:05,700 because they wouldn't really be able to understand 128 128 00:05:05,700 --> 00:05:09,510 why there is an article inside a heading. 129 129 00:05:09,510 --> 00:05:11,060 Okay, that's everything for this video. 130 130 00:05:11,060 --> 00:05:12,730 Just wanted to tell you that there are things 131 131 00:05:12,730 --> 00:05:14,960 that will make sense and things that won't make sense. 132 132 00:05:14,960 --> 00:05:16,820 Some of it is gonna come down to 133 133 00:05:16,820 --> 00:05:19,480 your understanding of what things mean, 134 134 00:05:19,480 --> 00:05:21,870 but often we can make those choices 135 135 00:05:21,870 --> 00:05:25,400 just based on the content types of the different elements. 136 136 00:05:25,400 --> 00:05:27,080 So, it's worth remembering 137 137 00:05:27,080 --> 00:05:28,580 that there are different types of content 138 138 00:05:28,580 --> 00:05:31,620 and what sort of fits inside what of what. 139 139 00:05:31,620 --> 00:05:33,100 Also, if you're ever unsure, 140 140 00:05:33,100 --> 00:05:34,260 and you can always check out 141 141 00:05:34,260 --> 00:05:36,970 the documentation for each HTML element, 142 142 00:05:36,970 --> 00:05:38,840 and it's gonna tell you what sort of things 143 143 00:05:38,840 --> 00:05:40,160 that element can contain. 144 144 00:05:40,160 --> 00:05:42,550 We're gonna talk more about the documentation 145 145 00:05:42,550 --> 00:05:45,120 in a later video of this section as well. 146 146 00:05:45,120 --> 00:05:46,720 Thank you guys for joining me in this one. 147 147 00:05:46,720 --> 00:05:49,623 I hope you've enjoyed it, and I'll see you in the next one.