1 1 00:00:00,790 --> 00:00:02,250 Hi, guys, and welcome back. 2 2 00:00:02,250 --> 00:00:05,210 In this video, let's talk about nesting a little bit more, 3 3 00:00:05,210 --> 00:00:08,620 specifically, which elements can't be nested. 4 4 00:00:08,620 --> 00:00:11,730 And it's not easy to see which elements can't be nested 5 5 00:00:11,730 --> 00:00:13,940 because every element is a little bit different. 6 6 00:00:13,940 --> 00:00:16,980 For example, the <a> element and the <select> element 7 7 00:00:16,980 --> 00:00:19,220 are both phrasing content. 8 8 00:00:19,220 --> 00:00:20,890 However, the <a> element can contain 9 9 00:00:20,890 --> 00:00:23,100 non-interactive flow content, 10 10 00:00:23,100 --> 00:00:25,350 while <select> can only contain option 11 11 00:00:25,350 --> 00:00:27,830 and option group elements. 12 12 00:00:27,830 --> 00:00:30,740 Navigating this tangle of element relationships is one 13 13 00:00:30,740 --> 00:00:34,410 of the hardest parts about writing good HTML code. 14 14 00:00:34,410 --> 00:00:36,840 But fortunately, there are great resources out there 15 15 00:00:36,840 --> 00:00:41,290 to help, us such as the Mozilla Developer Network, or MDN. 16 16 00:00:41,290 --> 00:00:43,920 We're going to talk about MDN in a bit more detail later on 17 17 00:00:43,920 --> 00:00:47,270 in this section, but it is a great resource for looking up 18 18 00:00:47,270 --> 00:00:49,480 and learning about web technologies. 19 19 00:00:49,480 --> 00:00:51,540 It is, in fact, an invaluable tool 20 20 00:00:51,540 --> 00:00:54,300 that you should spend some time getting familiar with. 21 21 00:00:54,300 --> 00:00:57,230 We can look up the page for the <a> element, for example, 22 22 00:00:57,230 --> 00:00:59,320 where we can find all kinds of information about it, 23 23 00:00:59,320 --> 00:01:03,290 including its content categories and its permitted content. 24 24 00:01:03,290 --> 00:01:05,720 We can do the same thing for <select>, <option>, 25 25 00:01:05,720 --> 00:01:07,750 and <opt> group, as well. 26 26 00:01:07,750 --> 00:01:10,160 If you're unsure whether something is valid markup or not, 27 27 00:01:10,160 --> 00:01:12,450 you should double-check the permitted content 28 28 00:01:12,450 --> 00:01:14,480 and permitted parent elements 29 29 00:01:14,480 --> 00:01:16,410 for the elements you're trying to use. 30 30 00:01:16,410 --> 00:01:18,900 Over time, you'll have to reference the documentation less 31 31 00:01:18,900 --> 00:01:22,070 and less as you get familiar with the rules surrounding many 32 32 00:01:22,070 --> 00:01:23,533 of the core elements. 33 33 00:01:24,580 --> 00:01:27,260 Also remember that browsers are incredibly forgiving 34 34 00:01:27,260 --> 00:01:29,870 of invalid markup in our HTML code. 35 35 00:01:29,870 --> 00:01:31,600 You're not going to crash your website 36 36 00:01:31,600 --> 00:01:33,770 by putting a <p> element inside the <select> 37 37 00:01:33,770 --> 00:01:35,750 or a <div> inside the <span>. 38 38 00:01:35,750 --> 00:01:39,240 However, we should still strive to write correct markup. 39 39 00:01:39,240 --> 00:01:42,010 HTML is for describing the content of our page, 40 40 00:01:42,010 --> 00:01:44,690 and if we break the rules for permitted content, 41 41 00:01:44,690 --> 00:01:47,290 we're probably writing something which doesn't make a lot 42 42 00:01:47,290 --> 00:01:50,270 of sense from a semantic viewpoint. 43 43 00:01:50,270 --> 00:01:52,790 One very consistent category of elements are those 44 44 00:01:52,790 --> 00:01:54,717 in the heading content category. 45 45 00:01:54,717 --> 00:01:58,980 <h1> to <h6> elements can only contain phrasing content. 46 46 00:01:58,980 --> 00:02:01,290 Therefore, they cannot be empty. 47 47 00:02:01,290 --> 00:02:04,070 Remember that plain text is only considered phrasing content 48 48 00:02:04,070 --> 00:02:08,200 in HTML as long as it's not only made up of white space. 49 49 00:02:08,200 --> 00:02:09,890 All right, thank you guys for joining me in this video. 50 50 00:02:09,890 --> 00:02:11,310 I hope you found it interesting, 51 51 00:02:11,310 --> 00:02:12,960 and I'll see you in the next one.