"Console Foundations" was retired on March 4, 2019. You are now viewing the recommended replacement.
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