Grouping Content with <main> and <div>6:47 with Guil Hernandez
The <main> element represents the main content inside the body of the page, and <div> is a generic container that groups content.
"Virtual reality was once the dream of science fiction. But the internet was also once a dream, and so were computers and smartphones. The future is coming." - Mark Zuckerberg
The main element represents the main content inside the body of the page. 0:00 The purpose of the main tag is to help screen readers and other assistive 0:05 technologies identify exactly where the main content of a page begins. 0:08 The main content of our homepage consists of the about, articles, and 0:13 contact section, so let's place those sections inside a main element. 0:17 So I'll scroll up to the first about section and 0:22 type an opening main tag, then I'll include the closing 0:26 main tag right below the articles closing section tag. 0:31 And I'm also going to cut and paste our contact section inside the new main 0:37 element All right, so 0:41 now I'll teach you a handy shortcut you can use to quickly select and 0:46 indent large sections of code like this all at once. 0:49 So to indent all the content inside our main element 0:53 place your cursor after contacts closing section tag. 0:56 Then scroll up and press the Shift key while clicking in front of 1:00 the first opening section tag, that selects everything. 1:05 And now you can press Cmd or 1:09 Ctrl followed by the closed bracket key to indent all the code at once. 1:11 You should use main only once per page, and it shouldn't include content that 1:19 might be repeated across other pages like a navigation bar, 1:23 copyright information, a list of ads and resources, and so on. 1:27 So for example the header, footer, aside, and 1:32 intro content in our page could apply to every page on the website, and 1:35 aren't specific or unique to this page so they go outside the main element. 1:40 Now you'll sometimes have content that can't 1:47 be described by any of the semantic HTML sectioning or grouping tags. 1:49 For example, the intro paragraph and link below the header 1:54 do not create a new section of content and are not the primary focus of the page. 1:58 And I also wouldn't consider this an article because it's not a complete 2:03 self contained unit that can make sense on its own. 2:07 So when no other element is suitable, you can group content with a div element. 2:10 The div is a generic container that has almost no semantic meaning, 2:16 it's just a wrapper that groups together related content. 2:20 And an intro paragraph like ours is a good example of where you can use a div element 2:24 in your page, so let's place the intro paragraph and 2:29 link around opening and closing div tags. 2:33 Designers and developers also use the div element as the wrapper for 2:36 the entire page, so let's add an opening div tag below the opening body tag. 2:42 Then scroll all the way down to the bottom of the file, and 2:50 include the closing div tag just above the closing body tag. 2:54 And once again, to indent all the content inside the wrapper div you can 3:00 place your cursor after the closing footer tag. 3:05 Then scroll up and 3:09 press the Shift key while clicking in front of the opening header tag. 3:10 Then press Cmd or 3:15 Ctrl followed by the closed bracket key too and then all the code. 3:16 A wrapper div gives you more control over the width of your layout to prevent your 3:20 content from appearing too wide or too narrow, and it makes it easier to 3:24 center your layout on the page with CSS as you'll learn in a later course. 3:28 So now I'll go ahead and apply the wrapper div to our new articles page. 3:33 In the previous video you learned that the q tags is for 3:47 marking up short inline quotes. 3:51 Well HTML offers a blockquote tag for marking up long, multi-line quotations. 3:53 For instance, 3:59 if you're writing a blog post where you quote an excerpt from a book, article, or 4:00 another source, you should wrap that quote inside blockquote tags. 4:04 So over in index.html let's include 4:08 a code about virtual reality inside the aside element. 4:11 So right below the closing ol tag type a set of opening and 4:15 closing blockquote tags. 4:20 And inside the blockquote I'll include a well known virtual reality quote by 4:25 Mark Zuckerberg, the co-founder and CEO of Facebook. 4:29 Now you can copy this code and 4:33 the next few snippets from the teacher's notes of this video. 4:35 Inside the opening blockquote tag you can optionally use the cite attribute 4:38 to include a reference to the text you're quoting. 4:43 So as the value you include the link to the source of the quote, which is going 4:46 to be this Facebook page here, and you can find this link in the teacher's notes. 4:52 So back in the opening blockquote tag I'll paste in 4:57 the URL to the Facebook page as the cite value. 5:01 You can also credit the source or 5:06 the author of the quote using cite tags within the blockquote. 5:08 So I'll undo the cite attribute, and inside our quote 5:12 I'll wrap the name Mark Zuckerberg inside opening and closing attribute tags. 5:18 And inside this cite element I'll add an anchor element to link to the source. 5:26 Which once again will be this Facebook post here. 5:37 I'll give this a save, refresh the browser, and there's our blockquote, 5:44 and if we click on Mark Zuckerberg it takes us to the Facebook post, great. 5:50 And in a blockquote it's also acceptable to attribute the author or 6:00 source within a footer element. 6:04 So right after the quoted text I'll add an opening footer tag, 6:06 then place the closing footer tag just after the closing cite tag. 6:12 So here the footer clearly relates the quote to its author and source. 6:21 Now at this point you may be thinking wait a second, isn't footer just for 6:27 the bottom section of the page, we already have a footer. 6:31 Well you're not restricted to using just one footer element per page. 6:34 In fact you can use multiple footers, even headers in one page, 6:38 you'll learn why in the next video. 6:42
You need to sign up for Treehouse in order to download course files.Sign up