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.