Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
HTML'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.
Video Snippets
<section>
<h2>About this Site</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vehicula metus in bibendum laoreet. Aenean libero est, egestas eu eros pretium, sodales iaculis est.</p>
</section>
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up