- 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
Semantic HTML: <header>, <footer> and <section>
7:29HTML's role in web design and development is to provide structure and meaning to content. In this video, you'll begin learning HTML's set of elements that describe sections of content.
[MUSIC]
0:00
HTML's role in web design and
development is to provide structure and
0:05
meaning to content.
0:08
For example, a p tag identifies
content as a paragraph, and
0:09
an h1 tag means that the text inside it
is the top level heading of the page.
0:13
When you write markup that clearly
communicates the meaning of your content,
0:18
it is said that you're
writing semantic markup.
0:22
Now you'll hear the word
semantic markup or
0:24
semantic HTML mentioned a lot in web
design and front end web development.
0:27
Semantics is the meaning behind words,
phrases, or any text.
0:31
Now semantics, as it relates to HTML,
is the idea that markup should describe
0:35
the meaning of your content rather than
define its presentation or how it looks.
0:39
For instance,
you wouldn't want to place what should
0:44
be paragraph text inside an h1 tag
just to make the text large and bold.
0:47
H1 and p tags convey two
completely different meanings.
0:51
Writing semantic markup makes your website
more understandable to search engines.
0:55
Clearly identifying important
information using a heading tag, or
1:00
one of the other tags helps search
engines categorize your pages,
1:03
and help users find
the content your site provides.
1:06
In addition, carefully organizing your
content with HTML tags makes your site
1:10
more accessible to users who rely on
assistive technologies to use the web.
1:14
For example, users with visual
impairments use screen readers
1:18
which literally read out
loud the words on a page.
1:22
Writing semantic markups helps users with
screen reading software navigate a site
1:25
and engage with the content.
1:29
So as developers, it's our responsibility
to be thoughtful about the markup we
1:31
write, making sure that each tag we
use is appropriate for the content.
1:35
I'll teach you more about semantic
markup throughout this course.
1:39
Now let's get started with
HTML's set of elements that
1:43
help describe sections of content.
1:45
A typical webpage can be divided
into three major sections, a header,
1:48
footer and main content area.
1:53
The header is the introductory content
usually at the top of the page,
1:55
containing the site logo, navigation,
main heading and site description.
1:59
At the bottom of the page, a footer
contains information about the site.
2:04
Like the company address, site authors,
copyright date, and other site navigation.
2:08
The pages main content appears
between the header and footer.
2:13
This section contains the most
important content on the page.
2:17
Such as blog entries, videos,
news articles, photo galleries,
2:20
recipes, and so on.
2:25
It's the section users
come to the page to see.
2:27
Usually, the content inside the header and
footer is the same,
2:29
or very similar, from page to page,
while the content area changes.
2:33
You've seen how the body, head and
2:37
title tags use standard human readable
words to describe the content inside them.
2:39
Well HTML semantic sectioning and content
grouping elements are no different,
2:45
using words like header,
2:49
footer, section and article to indicate
their purpose in the document.
2:51
Back in index.html, let's divide
our page into logical sections, and
2:55
we'll start at the top by placing the
introductory content here inside a header.
2:59
So, above the h1 element,
type an opening header tag,
3:04
then place the closing header tag
right below the closing ul tag.
3:09
And to indent the content inside
the header tags all at once,
3:14
select the content then press Cmd or
Ctrl followed by the right or
3:18
closed bracket key once to
indent the code two spaces.
3:22
So now that we've grouped
the page's headline, tagline, and
3:26
navigation list in a header,
let's create a footer.
3:29
Footers are like headers, except they
usually appear at the bottom of a page.
3:31
So right above the closing body tag and
below the closing ol tag,
3:37
type a set of opening and
closing footer tags.
3:41
Inside the footer, let's include
a paragraph tag that contains the name of
3:47
the blog and the copyright date.
3:51
Now this strange looking ampersand
copy text is called an HTML
4:00
character entity and it's how you
add a copyright symbol in HTML.
4:05
I teach you more about these
characters in a later video.
4:10
In between the header and footer,
4:14
the page's main content area is usually
further divided into subsections
4:16
based on how you want to
logically group your content.
4:21
So for example, the intro paragraph and
call to action link below
4:24
the header are not closely related
to the blog entries below it.
4:29
So let's divide the main content area by
grouping the blog entries into a section
4:33
of their own.
4:38
And HTML has just the element for
that, section.
4:39
The section element groups together
related sections of content,
4:42
like a group of blog entries,
news articles, or video.
4:46
So just above the h2 tag,
type an opening section tag.
4:50
Then add the closing section tag
below the last blog entry or
4:56
just above the resources list so
that it wraps all the blog entries.
5:00
And again, it's a good idea to indent
the code inside the section by
5:08
selecting it and pressing Cmd or
Ctrl followed by the closed bracket key.
5:13
The first element of each section
should always be a heading that
5:20
indicates what the section is about or
its topic.
5:24
In this case, it's the latest
articles about virtual reality.
5:27
Next, let's add two more
sections to our page.
5:31
The About section and the Contact section.
5:34
So right above the article
section we just wrote,
5:37
let's add a set of opening and
closing section tags, and
5:40
inside this section, I'll nest an h2
to indicate what the section is about.
5:44
In this case it's the about content so
I'll type about this site.
5:51
Right below the h2,
I'll add a paragraph and
5:56
paste in some placeholder text that will
serve as the about text for our site, and
5:58
you can copy this snippet from
the teacher's notes of this video.
6:03
All right, let's give this a save and
have a look in the browser.
6:06
Here we have the about content.
6:10
So now let's add the Contact
section of the page, and
6:13
we'll do so below our article section.
6:16
So back inside index.html,
I'll scroll down to just above the footer,
6:18
and add a set of opening and
closing section tags.
6:24
Inside the section element,
I'll add an h2 with a text contact,
6:31
and right below a paragraph with the text,
Email us at,
6:37
I'll make up an email here,
coolvrexperience@gmail.com.
6:42
And there we have it.
6:56
Now there are no hard and fast rules
about when to use or not to use sections.
6:57
They're simply tags for
organizing your content and
7:03
you can decide when it makes sense to
group related content into a section.
7:06
And sections can also give your
page clearer structure and
7:10
can help assistive technologies
like screen readers,
7:13
used by the visually impaired users,
to identify distinctive parts of a page.
7:16
Now there are other sectioning elements,
like the article tag, that are used for
7:20
more specific types of content grouping.
7:24
I'll teach you those in the next video.
7:27