1 00:00:00,770 --> 00:00:04,510 You learn that a footer usually contains information about the page. 2 00:00:04,510 --> 00:00:08,120 Like the copyright date, author information and a navigation. 3 00:00:08,120 --> 00:00:12,470 When a footer element is directly nested inside the body element or 4 00:00:12,470 --> 00:00:17,120 wrapper div in this case, it represents a footer for the page as a whole. 5 00:00:17,120 --> 00:00:20,130 However, you can use more than one footer per page. 6 00:00:20,130 --> 00:00:24,610 Footers can be nested inside other elements like main, section, and 7 00:00:24,610 --> 00:00:29,420 block quote to contain footer information for just that section of the page. 8 00:00:29,420 --> 00:00:32,950 For example, in the previous video we included a footer 9 00:00:32,950 --> 00:00:38,150 inside the block quote to clearly relate the quote to its author and source. 10 00:00:38,150 --> 00:00:41,520 So now, let's add a footer inside the articles 11 00:00:41,520 --> 00:00:46,560 that contain information related only to the article, like a publish date. 12 00:00:46,560 --> 00:00:53,440 So in our first article, right below the Read more link, I'll add a footer element, 13 00:00:53,440 --> 00:00:59,252 and inside the text, published June 14 00:00:59,252 --> 00:01:04,210 12th, 2017, and you can add any date you like. 15 00:01:05,280 --> 00:01:08,820 Go ahead and do the same for the second article by copying this footer, 16 00:01:08,820 --> 00:01:11,465 and pasting it below the Read more link. 17 00:01:15,980 --> 00:01:18,240 And I'll change this date to say June 19th. 18 00:01:22,790 --> 00:01:27,770 Now just like footers, you can include multiple headers in your page 19 00:01:27,770 --> 00:01:32,680 each of which represent introductory content for just that section of the page. 20 00:01:32,680 --> 00:01:36,550 And it's common to place the title of an article inside a header 21 00:01:36,550 --> 00:01:39,745 along with other information like the author, date, or category. 22 00:01:39,745 --> 00:01:44,950 So, let's wrap both of our articles titles 23 00:01:44,950 --> 00:01:47,914 with header tags and we'll also include an author name. 24 00:01:47,914 --> 00:01:56,240 So I'll wrap the h3 inside a header element, 25 00:01:57,270 --> 00:02:02,900 and right below the h3, I'll add a paragraph with the author name. 26 00:02:02,900 --> 00:02:05,252 So let's say by Nick Pettit. 27 00:02:08,534 --> 00:02:10,989 And we'll do the same for our next article. 28 00:02:27,435 --> 00:02:33,012 Finally, let's use a header in our Article page to contain the articles title, 29 00:02:33,012 --> 00:02:35,320 author name, and publish date. 30 00:02:37,210 --> 00:02:42,315 So, I'll wrap the h2 inside header tags. 31 00:02:45,962 --> 00:02:51,570 And then inside, let's add a paragraph with author name. 32 00:02:51,570 --> 00:02:53,305 Again, you can use any name you want here. 33 00:02:57,090 --> 00:03:01,435 And right below, add a second paragraph, and 34 00:03:01,435 --> 00:03:08,914 we'll include the publish date here, so say published June 19, 2017. 35 00:03:18,242 --> 00:03:22,333 Remember when writing HTML we're not only communicating with computers and browsers, 36 00:03:22,333 --> 00:03:24,430 but also communicating with humans. 37 00:03:24,430 --> 00:03:28,800 Writing clear semantic markup, also means that other developers looking at your code 38 00:03:28,800 --> 00:03:32,620 will spend less time focusing on the what, and more time on the why and how. 39 00:03:33,690 --> 00:03:36,630 The site is missing perhaps the second most important component 40 00:03:36,630 --> 00:03:38,000 of the web, images. 41 00:03:38,000 --> 00:03:42,000 So in the next stage you'll learn to add images to draw users into your page and 42 00:03:42,000 --> 00:03:43,920 help to guide them through information. 43 00:03:43,920 --> 00:03:47,700 And we'll continue with our journey into semantic markup by getting to know text 44 00:03:47,700 --> 00:03:50,750 formatting elements that give special meaning to content and more. 45 00:03:50,750 --> 00:03:51,250 See you then.