Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed HTML Basics!
You have completed HTML Basics!
Preview
The <main> element represents the main content inside the body of the page, and <div> is a generic container that groups content.
Content Snippets
"Virtual reality was once the dream of science fiction. But the internet was also once a dream, and so were computers and smartphones. The future is coming." - Mark Zuckerberg
https://www.facebook.com/zuck/posts/10101319050523971
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
The main element represents the main
content inside the body of the page.
0:00
The purpose of the main tag is to help
screen readers and other assistive
0:05
technologies identify exactly where
the main content of a page begins.
0:08
The main content of our homepage
consists of the about, articles, and
0:13
contact section, so let's place those
sections inside a main element.
0:17
So I'll scroll up to
the first about section and
0:22
type an opening main tag,
then I'll include the closing
0:26
main tag right below the articles
closing section tag.
0:31
And I'm also going to cut and paste our
contact section inside the new main element.
0:37
All right, so now I'll teach you a handy
shortcut you can use to quickly select and
0:45
indent large sections of
code like this all at once.
0:49
So to indent all the content
inside our main element
0:53
place your cursor after
contacts' closing section tag.
0:56
Then scroll up and press the Shift
key while clicking in front of
1:00
the first opening section tag,
that selects everything.
1:05
And now you can press Cmd or
1:09
Ctrl followed by the closed bracket
key to indent all the code at once.
1:11
You should use main only once per page,
and it shouldn't include content that
1:19
might be repeated across other
pages like a navigation bar,
1:23
copyright information,
a list of ads and resources, and so on.
1:27
So for example the header,
footer, aside, and
1:32
intro content in our page could apply
to every page on the website, and
1:35
aren't specific or unique to this page so
they go outside the main element.
1:40
Now you'll sometimes
have content that can't
1:47
be described by any of the semantic
HTML sectioning or grouping tags.
1:49
For example, the intro paragraph and
link below the header
1:54
do not create a new section of content and
are not the primary focus of the page.
1:58
And I also wouldn't consider this
an article because it's not a complete
2:03
self contained unit that
can make sense on its own.
2:07
So when no other element is suitable,
you can group content with a div element.
2:10
The div is a generic container that
has almost no semantic meaning,
2:16
it's just a wrapper that groups
together related content.
2:20
And an intro paragraph like ours is a good
example of where you can use a div element
2:24
in your page, so
let's place the intro paragraph and
2:29
link around opening and closing div tags.
2:33
Designers and developers also use
the div element as the wrapper for
2:36
the entire page, so let's add an opening
div tag below the opening body tag.
2:42
Then scroll all the way down
to the bottom of the file, and
2:50
include the closing div tag just
above the closing body tag.
2:54
And once again, to indent all the content
inside the wrapper div you can
3:00
place your cursor after
the closing footer tag.
3:05
Then scroll up and
3:09
press the Shift key while clicking
in front of the opening header tag.
3:10
Then press Cmd or
3:15
Ctrl followed by the closed bracket
key to indent all the code.
3:16
A wrapper div gives you more control over
the width of your layout to prevent your
3:20
content from appearing too wide or
too narrow, and it makes it easier to
3:24
center your layout on the page with
CSS as you'll learn in a later course.
3:28
So now I'll go ahead and apply
the wrapper div to our new articles page.
3:33
In the previous video you
learned that the <q> tag is for
3:47
marking up short inline quotes.
3:51
Well HTML offers a blockquote tag for
marking up long, multi-line quotations.
3:53
For instance,
3:59
if you're writing a blog post where you
quote an excerpt from a book, article, or
4:00
another source, you should wrap
that quote inside blockquote tags.
4:04
So over in index.html let's include
4:08
a code about virtual reality
inside the aside element.
4:11
So right below the closing ol
tag type a set of opening and
4:15
closing blockquote tags.
4:20
And inside the blockquote I'll include
a well known virtual reality quote by
4:25
Mark Zuckerberg, the co-founder and
CEO of Facebook.
4:29
Now you can copy this code and
4:33
the next few snippets from
the teacher's notes of this video.
4:35
Inside the opening blockquote tag you
can optionally use the cite attribute
4:38
to include a reference to
the text you're quoting.
4:43
So as the value you include the link to
the source of the quote, which is going
4:46
to be this Facebook page here, and you can
find this link in the teacher's notes.
4:52
So back in the opening
blockquote tag I'll paste in
4:57
the URL to the Facebook
page as the cite value.
5:01
You can also credit the source or
5:06
the author of the quote using
cite tags within the blockquote.
5:08
So I'll undo the cite attribute,
and inside our quote
5:12
I'll wrap the name Mark Zuckerberg inside
opening and closing attribute tags.
5:18
And inside this cite element I'll add
an anchor element to link to the source.
5:26
Which once again will be
this Facebook post here.
5:37
I'll give this a save, refresh
the browser, and there's our blockquote,
5:44
and if we click on Mark Zuckerberg it
takes us to the Facebook post, great.
5:50
And in a blockquote it's also
acceptable to attribute the author or
6:00
source within a footer element.
6:04
So right after the quoted text
I'll add an opening footer tag,
6:06
then place the closing footer tag
just after the closing cite tag.
6:12
So here the footer clearly relates
the quote to its author and source.
6:21
Now at this point you may be thinking
wait a second, isn't footer just for
6:27
the bottom section of the page,
we already have a footer.
6:31
Well you're not restricted to using
just one footer element per page.
6:34
In fact you can use multiple footers,
even headers in one page,
6:38
you'll learn why in the next video.
6:42
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