- Semantic HTML: <header>, <footer> and <section> 7:29
- Sectioning Content with <article>, <nav> and <aside> 4:23
- Structuring Content Challenge 4 objectives
- Marking Up a Blog Post 6:33
- Grouping Content with <main> and <div> 6:47
- Grouping Content Challenge 3 objectives
- Using Multiple <header> and <footer> Elements 3:51
- Structuring Your Content Review 7 questions
Preview
Video Player
00:00
00:00
Using Multiple <header> and <footer> Elements
3:51You 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 learned 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
blockquote 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 blockquote 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