Using Multiple <header> and <footer> Elements3:51 with Guil Hernandez
You can use multiple <footer> and <header> elements in one page. You nest footers inside other elements to contain footer information for that section of the page. Nested headers represent introductory content for a section of the page.
You learn that a footer usually contains information about the page. 0:00 Like the copyright date, author information and a navigation. 0:04 When a footer element is directly nested inside the body element or 0:08 wrapper div in this case, it represents a footer for the page as a whole. 0:12 However, you can use more than one footer per page. 0:17 Footers can be nested inside other elements like main, section, and 0:20 block quote to contain footer information for just that section of the page. 0:24 For example, in the previous video we included a footer 0:29 inside the block quote to clearly relate the quote to its author and source. 0:32 So now, let's add a footer inside the articles 0:38 that contain information related only to the article, like a publish date. 0:41 So in our first article, right below the Read more link, I'll add a footer element, 0:46 and inside the text, published June 0:53 12th, 2017, and you can add any date you like. 0:59 Go ahead and do the same for the second article by copying this footer, 1:05 and pasting it below the Read more link. 1:08 And I'll change this date to say June 19th. 1:15 Now just like footers, you can include multiple headers in your page 1:22 each of which represent introductory content for just that section of the page. 1:27 And it's common to place the title of an article inside a header 1:32 along with other information like the author, date, or category. 1:36 So, let's wrap both of our articles titles 1:39 with header tags and we'll also include an author name. 1:44 So I'll wrap the h3 inside a header element, 1:47 and right below the h3, I'll add a paragraph with the author name. 1:57 So let's say by Nick Pettit. 2:02 And we'll do the same for our next article. 2:08 Finally, let's use a header in our Article page to contain the articles title, 2:27 author name, and publish date. 2:33 So, I'll wrap the h2 inside header tags. 2:37 And then inside, let's add a paragraph with author name. 2:45 Again, you can use any name you want here. 2:51 And right below, add a second paragraph, and 2:57 we'll include the publish date here, so say published June 19, 2017. 3:01 Remember when writing HTML we're not only communicating with computers and browsers, 3:18 but also communicating with humans. 3:22 Writing clear semantic markup, also means that other developers looking at your code 3:24 will spend less time focusing on the what, and more time on the why and how. 3:28 The site is missing perhaps the second most important component 3:33 of the web, images. 3:36 So in the next stage you'll learn to add images to draw users into your page and 3:38 help to guide them through information. 3:42 And we'll continue with our journey into semantic markup by getting to know text 3:43 formatting elements that give special meaning to content and more. 3:47 See you then. 3:50
You need to sign up for Treehouse in order to download course files.Sign up