Sectioning Content with <article>, <nav> and <aside>4:23 with Guil Hernandez
Let's continue organizing & structuring our content into logical bits, using HTML's content sectioning elements. In this video, you'll learn how to use the <article>, <nav>, and <aside> tags in your projects.
Alright. Let's keep on organizing and 0:00 structuring our content into logical bits using HTML's content sectioning elements. 0:02 In this video, you'll learn how to use the article, nav, and 0:07 aside tags in your projects. 0:11 So the article section of our page contains groups of individual 0:12 blog entries that link to the full post. 0:17 Now even though they all have a common theme, VR, 0:19 each entry represents an independent stand-alone article in our webpage, 0:22 so we should use markup to contain each entry. 0:27 The article sectioning element describes self-contained pieces of content 0:30 like our blog entries. 0:36 So let's place opening and closing article tags around each of the two entries. 0:37 So I'll place the opening article tag just above the h3 of our 0:42 first blog entry, and the closing article tag below its link. 0:47 I'll select and indent the content, and do the same for our next entry. 0:53 So each article now represents a complete or self-contained unit on the page 1:05 that can make sense on its own, even when displayed on another website or blog. 1:11 So for example, an article in a magazine or newspaper can be 1:16 plucked out of the pages and still be read and understood by readers, even though 1:21 a reader may not know which magazine or newspaper the article came from. 1:25 The article still makes sense on its own because it contains a heading, content, 1:29 and information about the article like the publish date and author. 1:33 So an article element should wrap content that could be syndicated and 1:37 pulled into another website, or linked to via social media, or 1:42 a news aggregation site like reddit.com. 1:46 And this includes individual blog posts, magazine and news articles, 1:48 foreign posts or any independent chunk of content. 1:52 In addition, 1:56 article elements should always include a heading that identifies the article. 1:57 Now another sectioning element, with a very specific purpose, is the nav tag. 2:03 When a section of your page contains a list of links to other pages, or 2:09 to parts within the page, you should use markup to communicate that it's 2:13 an important section containing navigation links. 2:16 The nav element describes just that, a navigation or set of related links. 2:19 Currently, our site navigation uses the ul or 2:25 unordered list tag to display the list of links. 2:29 So let's wrap the ul in the header with opening and closing nav tags. 2:32 You should use the nav element only for major sections of navigation, not for 2:46 every link to another page or website. 2:51 However it is okay to have more than one nav element on a page. 2:54 For example, you might have a navigation element that includes links to the major 2:57 parts of your website and the header and a nav element in the footer 3:01 that links to pages with different information about your company. 3:06 The nav element also helps users who navigate and 3:10 read your site using assistive technologies, 3:14 like screen readers, quickly and easily find the navigation sections of your site. 3:16 Lastly, let me show you the aside tag. 3:21 It's used for 3:24 sectioning content that's sort of related to the main topic of the page, but 3:24 could be removed without affecting a user's understanding of the main content. 3:28 So this is content you'll often see presented as a sidebar on a website. 3:33 For example, you could use the aside element to include 3:37 your Twitter feed on a page or a list or related articles or resources. 3:40 In fact, 3:44 we have a list of top resources just above the contact section of our page. 3:45 And this content isn't directly related to the main content sections of our site, but 3:50 it does hold content that is related to the entire page. 3:55 So let's group the h3 and 3:59 ol elements inside a set of opening and closing aside tags. 4:01 So when you need to section content that's not the main focus of the page but is 4:12 still related or complimentary to the page as a whole, place the content in an aside. 4:17
You need to sign up for Treehouse in order to download course files.Sign up