- 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
Sectioning Content with <article>, <nav> and <aside>
4:23Let's continue organizing & structuring our content into logical bits using HTML's content sectioning elements. In this video, you'll learn how to use the <article>, <nav>, and <aside> tags in your projects.
All right, let's keep
on organizing and
0:00
structuring our content into logical bits
using HTML's content sectioning elements.
0:02
In this video, you'll learn how
to use the article, nav, and
0:07
aside tags in your projects.
0:11
So the article section of our page
contains groups of individual
0:12
blog entries that link to the full post.
0:17
Now even though they all
have a common theme, VR,
0:19
each entry represents an independent
stand-alone article in our webpage,
0:22
so we should use markup
to contain each entry.
0:27
The article sectioning element describes
self-contained pieces of content
0:30
like our blog entries.
0:36
So let's place opening and closing article
tags around each of the two entries.
0:37
So I'll place the opening article
tag just above the h3 of our
0:42
first blog entry, and
the closing article tag below its link.
0:47
I'll select and indent the content,
and do the same for our next entry.
0:53
So each article now represents a complete
or self-contained unit on the page
1:05
that can make sense on its own, even when
displayed on another website or blog.
1:11
So for example, an article in
a magazine or newspaper can be
1:16
plucked out of the pages and still be read
and understood by readers, even though
1:21
a reader may not know which magazine or
newspaper the article came from.
1:25
The article still makes sense on its own
because it contains a heading, content,
1:29
and information about the article
like the publish date and author.
1:33
So an article element should wrap
content that could be syndicated and
1:37
pulled into another website, or
linked to via social media, or
1:42
a news aggregation site like reddit.com.
1:46
And this includes individual blog posts,
magazine and news articles,
1:48
forum posts or any
independent chunk of content.
1:52
In addition,
1:56
article elements should always include
a heading that identifies the article.
1:57
Now another sectioning element, with
a very specific purpose, is the nav tag.
2:03
When a section of your page contains
a list of links to other pages, or
2:09
to parts within the page, you should
use markup to communicate that it's
2:13
an important section
containing navigation links.
2:16
The nav element describes just that,
a navigation or set of related links.
2:19
Currently, our site
navigation uses the ul or
2:25
unordered list tag to
display the list of links.
2:29
So let's wrap the ul in the header
with opening and closing nav tags.
2:32
You should use the nav element only for
major sections of navigation, not for
2:46
every link to another page or website.
2:51
However it is okay to have more
than one nav element on a page.
2:54
For example, you might have a navigation
element that includes links to the major
2:57
parts of your website in the header and
a nav element in the footer
3:01
that links to pages with different
information about your company.
3:06
The nav element also helps
users who navigate and
3:10
read your site using
assistive technologies,
3:14
like screen readers, quickly and easily
find the navigation sections of your site.
3:16
Lastly, let me show you the aside tag.
3:21
It's used for
3:24
sectioning content that's sort of related
to the main topic of the page, but
3:24
could be removed without affecting a
user's understanding of the main content.
3:28
So this is content you'll often see
presented as a sidebar on a website.
3:33
For example,
you could use the aside element to include
3:37
your Twitter feed on a page or a list or
related articles or resources.
3:40
In fact,
3:44
we have a list of top resources just
above the contact section of our page.
3:45
And this content isn't directly related to
the main content sections of our site, but
3:50
it does hold content that is
related to the entire page.
3:55
So let's group the h3 and
3:59
ol elements inside a set of opening and
closing aside tags.
4:01
So when you need to section content that's
not the main focus of the page but is
4:12
still related or complimentary to the page
as a whole, place the content in an aside.
4:17