1 1 00:00:00,740 --> 00:00:03,670 Now that we've looked at which elements can't be nested, 2 2 00:00:03,670 --> 00:00:05,050 let's take a look at some elements 3 3 00:00:05,050 --> 00:00:08,680 that are specifically designed to contain other elements. 4 4 00:00:08,680 --> 00:00:10,720 The first one is the section element. 5 5 00:00:10,720 --> 00:00:12,990 It's used to represent a thematically 6 6 00:00:12,990 --> 00:00:16,290 related group of elements but which form a component 7 7 00:00:16,290 --> 00:00:17,900 of a larger whole. 8 8 00:00:17,900 --> 00:00:19,110 So what does that mean? 9 9 00:00:19,110 --> 00:00:21,100 For example, perhaps we have a website 10 10 00:00:21,100 --> 00:00:23,670 with several blog posts on the homepage 11 11 00:00:23,670 --> 00:00:26,380 but the homepage also features an area with links to 12 12 00:00:26,380 --> 00:00:28,720 various pieces of merchandise. 13 13 00:00:28,720 --> 00:00:32,040 There's a clear division in content here with the blogs 14 14 00:00:32,040 --> 00:00:34,410 being one thematically related group 15 15 00:00:34,410 --> 00:00:36,603 and the merch links being another. 16 16 00:00:37,500 --> 00:00:40,010 We could use section elements to distinguish 17 17 00:00:40,010 --> 00:00:42,150 these two distinct groups. 18 18 00:00:42,150 --> 00:00:45,360 We can also place sections within other elements 19 19 00:00:45,360 --> 00:00:48,200 including within other section elements. 20 20 00:00:48,200 --> 00:00:51,300 Our individual blog posts might have subsections 21 21 00:00:51,300 --> 00:00:53,810 in them, for example and perhaps we have different 22 22 00:00:53,810 --> 00:00:55,170 types of merchant on sale 23 23 00:00:55,170 --> 00:00:58,170 and those could be subsections too. 24 24 00:00:58,170 --> 00:00:59,580 As a general rule of thumb, 25 25 00:00:59,580 --> 00:01:01,870 section elements should contain headings 26 26 00:01:01,870 --> 00:01:04,640 although it is not a hard requirement. 27 27 00:01:04,640 --> 00:01:07,220 If you're writing a heading somewhere in your site, 28 28 00:01:07,220 --> 00:01:09,800 it's probably because you're making a shift in topic 29 29 00:01:09,800 --> 00:01:11,420 and that is often a good indicator 30 30 00:01:11,420 --> 00:01:14,200 of where a new section begins. 31 31 00:01:14,200 --> 00:01:16,260 Let's talk about article elements now. 32 32 00:01:16,260 --> 00:01:18,730 Article elements are somewhat tricky to understand 33 33 00:01:18,730 --> 00:01:20,320 because the name article comes 34 34 00:01:20,320 --> 00:01:22,590 with a lot of conceptual baggage. 35 35 00:01:22,590 --> 00:01:24,710 An article element is used to mark 36 36 00:01:24,710 --> 00:01:28,130 a self-contained composition within a document. 37 37 00:01:28,130 --> 00:01:30,910 That means the content makes sense on its own. 38 38 00:01:30,910 --> 00:01:33,340 In the example side, we just talked about a moment ago, 39 39 00:01:33,340 --> 00:01:35,540 each individual blog post would have been wrapped 40 40 00:01:35,540 --> 00:01:39,040 in an article element but likely so would have the elements 41 41 00:01:39,040 --> 00:01:42,760 containing information for each merch item. 42 42 00:01:42,760 --> 00:01:44,820 The MDN has another really good example 43 43 00:01:44,820 --> 00:01:46,410 of using article elements. 44 44 00:01:46,410 --> 00:01:50,460 Here's some markup describing a weather forecast article. 45 45 00:01:50,460 --> 00:01:52,350 There's a weather forecast widget 46 46 00:01:52,350 --> 00:01:54,400 which is wrapped in an article element 47 47 00:01:54,400 --> 00:01:55,560 and this may seem a little weird, 48 48 00:01:55,560 --> 00:01:58,400 but if we think back to what an article really is for, 49 49 00:01:58,400 --> 00:01:59,870 then it's perfectly reasonable. 50 50 00:01:59,870 --> 00:02:01,850 We would get the forecast widget 51 51 00:02:01,850 --> 00:02:03,000 which makes sense on its own, 52 52 00:02:03,000 --> 00:02:04,760 it's a self-contained composition 53 53 00:02:04,760 --> 00:02:06,340 that makes sense even if it's removed 54 54 00:02:06,340 --> 00:02:08,640 from the content around it. 55 55 00:02:08,640 --> 00:02:11,130 Even more interesting though is that the article 56 56 00:02:11,130 --> 00:02:13,510 contains other article elements. 57 57 00:02:13,510 --> 00:02:17,330 Each of the daily forecasts is also wrapped in an article. 58 58 00:02:17,330 --> 00:02:18,810 This, again, makes some sense, 59 59 00:02:18,810 --> 00:02:22,570 we can completely understand the meaning of the forecasts 60 60 00:02:22,570 --> 00:02:25,440 for the individual days, even if we pluck them out 61 61 00:02:25,440 --> 00:02:28,030 of the context of the weather widget. 62 62 00:02:28,030 --> 00:02:29,330 Many people have similar widgets 63 63 00:02:29,330 --> 00:02:31,010 on their phone, for example. 64 64 00:02:31,010 --> 00:02:34,340 So article elements are actually one of your go-to elements. 65 65 00:02:34,340 --> 00:02:35,683 Don't forget about them. 66 66 00:02:37,520 --> 00:02:39,340 So section is used to represent 67 67 00:02:39,340 --> 00:02:41,890 a thematically-related group of elements 68 68 00:02:41,890 --> 00:02:45,580 and article is used to represent a self-contained work. 69 69 00:02:45,580 --> 00:02:47,620 So what if we need to group elements together 70 70 00:02:47,620 --> 00:02:50,550 but they don't fit under either category? 71 71 00:02:50,550 --> 00:02:52,840 That's where div elements come into play. 72 72 00:02:52,840 --> 00:02:54,300 Much like span elements, 73 73 00:02:54,300 --> 00:02:57,080 div elements are very generic by design. 74 74 00:02:57,080 --> 00:02:59,440 They don't carry any inherent meaning, 75 75 00:02:59,440 --> 00:03:00,590 which makes them very useful 76 76 00:03:00,590 --> 00:03:03,040 as generic grouping elements. 77 77 00:03:03,040 --> 00:03:06,560 We use div elements primarily to aid in styling a page 78 78 00:03:06,560 --> 00:03:09,933 or to add behaviour to a section of the browser window. 79 79 00:03:10,880 --> 00:03:13,460 We should use them sparingly because we have a lot more 80 80 00:03:13,460 --> 00:03:16,260 specific container types that describe the content 81 81 00:03:16,260 --> 00:03:19,600 of our document far better, like article or section. 82 82 00:03:19,600 --> 00:03:22,160 So when you're about to add a div to your document, 83 83 00:03:22,160 --> 00:03:25,040 even if you've already been coding in HTML for a long time 84 84 00:03:25,040 --> 00:03:26,790 take a moment to think if there's something 85 85 00:03:26,790 --> 00:03:28,990 you can use instead, which better describes 86 86 00:03:28,990 --> 00:03:31,623 the group of element you're placing inside the div. 87 87 00:03:32,640 --> 00:03:34,890 Next up, header elements. 88 88 00:03:34,890 --> 00:03:37,420 Header elements are used for introductory content 89 89 00:03:37,420 --> 00:03:38,880 or things like header bars 90 90 00:03:38,880 --> 00:03:40,700 with logos and navigation links. 91 91 00:03:40,700 --> 00:03:43,050 In this context, the header elements content 92 92 00:03:43,050 --> 00:03:45,340 is not really vital to the site. 93 93 00:03:45,340 --> 00:03:47,650 If we switch out the logo and change the menu, 94 94 00:03:47,650 --> 00:03:49,100 the overall meaning of the page, 95 95 00:03:49,100 --> 00:03:51,470 likely hasn't changed at all. 96 96 00:03:51,470 --> 00:03:54,510 We can actually have several header elements in a document 97 97 00:03:54,510 --> 00:03:57,010 and they're permitted inside other elements 98 98 00:03:57,010 --> 00:03:58,950 like article elements. 99 99 00:03:58,950 --> 00:04:00,520 We can see this in the documentation 100 100 00:04:00,520 --> 00:04:02,993 on the MDN web docs as well. 101 101 00:04:04,830 --> 00:04:07,830 The header can also be used inside other semantic elements 102 102 00:04:07,830 --> 00:04:09,840 such as article or section. 103 103 00:04:09,840 --> 00:04:12,670 A section header might contain the section's heading, 104 104 00:04:12,670 --> 00:04:14,650 author name, et cetera. 105 105 00:04:14,650 --> 00:04:19,650 Article, section, aside and nav can have their own header. 106 106 00:04:19,760 --> 00:04:22,410 Nav elements are useful major navigation blocks 107 107 00:04:22,410 --> 00:04:23,500 within the site. 108 108 00:04:23,500 --> 00:04:26,350 Often there'll be a nav element inside the header, 109 109 00:04:26,350 --> 00:04:29,670 particularly when it's being used as a header bar. 110 110 00:04:29,670 --> 00:04:32,110 We can have several nav elements if appropriate 111 111 00:04:32,110 --> 00:04:35,000 but be sure to only use them for groups of links 112 112 00:04:35,000 --> 00:04:38,030 that form some kind of major navigation group. 113 113 00:04:38,030 --> 00:04:39,440 We don't want a nav element 114 114 00:04:39,440 --> 00:04:40,650 because we have a couple of links 115 115 00:04:40,650 --> 00:04:43,020 to an external site, for example. 116 116 00:04:43,020 --> 00:04:46,473 A UL element might be more appropriate in that case. 117 117 00:04:47,490 --> 00:04:49,500 When we have several nav elements on a page, 118 118 00:04:49,500 --> 00:04:52,770 we can use special attributes called ARIA properties 119 119 00:04:52,770 --> 00:04:54,480 to help with accessibility. 120 120 00:04:54,480 --> 00:04:58,410 ARIA stands for Accessible Rich Internet Applications. 121 121 00:04:58,410 --> 00:04:59,970 ARIA is a big topic on its own 122 122 00:04:59,970 --> 00:05:02,480 but you can read about it on the MDN docs. 123 123 00:05:02,480 --> 00:05:04,820 I'm going to leave a couple links in the resources' section 124 124 00:05:04,820 --> 00:05:06,550 of this lecture. 125 125 00:05:06,550 --> 00:05:09,530 The main element represents the main content 126 126 00:05:09,530 --> 00:05:10,560 of the document. 127 127 00:05:10,560 --> 00:05:13,360 It's the content, which is unique to this particular page, 128 128 00:05:13,360 --> 00:05:15,870 so it doesn't include things like the header bar, 129 129 00:05:15,870 --> 00:05:18,890 navigation, footer, and so on. 130 130 00:05:18,890 --> 00:05:22,010 Your documents should contain a single main element 131 131 00:05:22,010 --> 00:05:24,643 which should be placed inside the body element. 132 132 00:05:25,640 --> 00:05:27,410 If you need to support all the browsers, 133 133 00:05:27,410 --> 00:05:29,830 such as Internet Explorer and screen readers 134 134 00:05:29,830 --> 00:05:32,150 which rely on all the browsers, you should include 135 135 00:05:32,150 --> 00:05:35,000 a special role attribute for your main element, 136 136 00:05:35,000 --> 00:05:37,540 also with the value of main. 137 137 00:05:37,540 --> 00:05:39,590 This ensures that the main element is recognised 138 138 00:05:39,590 --> 00:05:43,810 as the main content element for accessibility reasons. 139 139 00:05:43,810 --> 00:05:45,910 Finally, footer elements typically contain things 140 140 00:05:45,910 --> 00:05:48,110 like social media links, secondary navigation, 141 141 00:05:48,110 --> 00:05:49,880 and site smallprint. 142 142 00:05:49,880 --> 00:05:52,210 Like with header, we can have several footer elements 143 143 00:05:52,210 --> 00:05:54,080 in a given document and you can place them 144 144 00:05:54,080 --> 00:05:57,720 inside article or section elements as well if you want. 145 145 00:05:57,720 --> 00:05:59,360 If you do that, make sure the footer 146 146 00:05:59,360 --> 00:06:01,810 relates to the parent element in some way. 147 147 00:06:01,810 --> 00:06:03,920 For example, we might have information about 148 148 00:06:03,920 --> 00:06:06,830 an article author in the article's footer elements 149 149 00:06:06,830 --> 00:06:09,033 but not on the page's footer element. 150 150 00:06:09,870 --> 00:06:11,390 Thank you so much for joining me in this video, 151 151 00:06:11,390 --> 00:06:14,290 I hope you've enjoyed it and I'll see you in the next one.