1 00:00:00,570 --> 00:00:02,250 All right, let's keep on organizing and 2 00:00:02,250 --> 00:00:07,840 structuring our content into logical bits using HTML's content sectioning elements. 3 00:00:07,840 --> 00:00:11,080 In this video, you'll learn how to use the article, nav, and 4 00:00:11,080 --> 00:00:12,830 aside tags in your projects. 5 00:00:12,830 --> 00:00:17,340 So the article section of our page contains groups of individual 6 00:00:17,340 --> 00:00:19,570 blog entries that link to the full post. 7 00:00:19,570 --> 00:00:22,630 Now even though they all have a common theme, VR, 8 00:00:22,630 --> 00:00:27,630 each entry represents an independent stand-alone article in our webpage, 9 00:00:27,630 --> 00:00:30,990 so we should use markup to contain each entry. 10 00:00:30,990 --> 00:00:36,170 The article sectioning element describes self-contained pieces of content 11 00:00:36,170 --> 00:00:37,340 like our blog entries. 12 00:00:37,340 --> 00:00:42,600 So let's place opening and closing article tags around each of the two entries. 13 00:00:42,600 --> 00:00:47,790 So I'll place the opening article tag just above the h3 of our 14 00:00:47,790 --> 00:00:52,370 first blog entry, and the closing article tag below its link. 15 00:00:53,680 --> 00:00:57,523 I'll select and indent the content, and do the same for our next entry. 16 00:01:05,954 --> 00:01:11,166 So each article now represents a complete or self-contained unit on the page 17 00:01:11,166 --> 00:01:16,890 that can make sense on its own, even when displayed on another website or blog. 18 00:01:16,890 --> 00:01:21,200 So for example, an article in a magazine or newspaper can be 19 00:01:21,200 --> 00:01:25,080 plucked out of the pages and still be read and understood by readers, even though 20 00:01:25,080 --> 00:01:29,290 a reader may not know which magazine or newspaper the article came from. 21 00:01:29,290 --> 00:01:33,460 The article still makes sense on its own because it contains a heading, content, 22 00:01:33,460 --> 00:01:37,320 and information about the article like the publish date and author. 23 00:01:37,320 --> 00:01:42,620 So an article element should wrap content that could be syndicated and 24 00:01:42,620 --> 00:01:46,750 pulled into another website, or linked to via social media, or 25 00:01:46,750 --> 00:01:48,940 a news aggregation site like reddit.com. 26 00:01:48,940 --> 00:01:52,850 And this includes individual blog posts, magazine and news articles, 27 00:01:52,850 --> 00:01:56,470 forum posts or any independent chunk of content. 28 00:01:56,470 --> 00:01:57,470 In addition, 29 00:01:57,470 --> 00:02:03,270 article elements should always include a heading that identifies the article. 30 00:02:03,270 --> 00:02:09,010 Now another sectioning element, with a very specific purpose, is the nav tag. 31 00:02:09,010 --> 00:02:13,230 When a section of your page contains a list of links to other pages, or 32 00:02:13,230 --> 00:02:16,930 to parts within the page, you should use markup to communicate that it's 33 00:02:16,930 --> 00:02:19,900 an important section containing navigation links. 34 00:02:19,900 --> 00:02:25,130 The nav element describes just that, a navigation or set of related links. 35 00:02:25,130 --> 00:02:29,170 Currently, our site navigation uses the ul or 36 00:02:29,170 --> 00:02:32,720 unordered list tag to display the list of links. 37 00:02:32,720 --> 00:02:38,163 So let's wrap the ul in the header with opening and closing nav tags. 38 00:02:46,337 --> 00:02:51,189 You should use the nav element only for major sections of navigation, not for 39 00:02:51,189 --> 00:02:54,090 every link to another page or website. 40 00:02:54,090 --> 00:02:57,830 However it is okay to have more than one nav element on a page. 41 00:02:57,830 --> 00:03:01,970 For example, you might have a navigation element that includes links to the major 42 00:03:01,970 --> 00:03:06,400 parts of your website in the header and a nav element in the footer 43 00:03:06,400 --> 00:03:10,440 that links to pages with different information about your company. 44 00:03:10,440 --> 00:03:14,140 The nav element also helps users who navigate and 45 00:03:14,140 --> 00:03:16,610 read your site using assistive technologies, 46 00:03:16,610 --> 00:03:21,460 like screen readers, quickly and easily find the navigation sections of your site. 47 00:03:21,460 --> 00:03:24,120 Lastly, let me show you the aside tag. 48 00:03:24,120 --> 00:03:24,930 It's used for 49 00:03:24,930 --> 00:03:28,810 sectioning content that's sort of related to the main topic of the page, but 50 00:03:28,810 --> 00:03:33,440 could be removed without affecting a user's understanding of the main content. 51 00:03:33,440 --> 00:03:37,470 So this is content you'll often see presented as a sidebar on a website. 52 00:03:37,470 --> 00:03:40,420 For example, you could use the aside element to include 53 00:03:40,420 --> 00:03:44,590 your Twitter feed on a page or a list or related articles or resources. 54 00:03:44,590 --> 00:03:45,318 In fact, 55 00:03:45,318 --> 00:03:50,975 we have a list of top resources just above the contact section of our page. 56 00:03:50,975 --> 00:03:55,793 And this content isn't directly related to the main content sections of our site, but 57 00:03:55,793 --> 00:03:59,160 it does hold content that is related to the entire page. 58 00:03:59,160 --> 00:04:01,090 So let's group the h3 and 59 00:04:01,090 --> 00:04:05,488 ol elements inside a set of opening and closing aside tags. 60 00:04:12,500 --> 00:04:17,152 So when you need to section content that's not the main focus of the page but is 61 00:04:17,152 --> 00:04:22,320 still related or complimentary to the page as a whole, place the content in an aside.