- 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
Marking Up a Blog Post
6:33Let's create a new page (a blog post) for the site. In the process, you'll use most of the HTML tags you've learned to mark up the content in a semantic way.
All right, let's create a new page,
a blog post for our site.
0:01
In the process I'll show you how to
use all the tags I've taught you so
0:04
far to mark up the content in a logical or
semantic way.
0:07
In our workspace, let's create a new
HTML page by clicking File, New File, and
0:11
we'll name this page article.html.
0:17
To set up the page quickly, we can use the
HTML from the index.html file then add to it.
0:22
So I'll select all the code
here inside index.html
0:28
by pressing Ctrl or
Cmd+A then Ctrl or Cmd+C.
0:33
Then I'll switch over to article.html and
press Ctrl or Cmd+V to paste the code.
0:37
So in this new page we're going to
mark up an article or blog post.
0:44
So the first thing we'll update is the
title of the page here in the title tag.
0:48
Let's change it to VR Article.
0:54
And inside the body we'll
keep the header and
0:58
footer elements, but let's select and
delete all the content in between.
1:03
So everything from this paragraph down to
the section element just above the footer.
1:08
This page is going to consist of
standalone content that could be
1:16
syndicated or pulled into another website.
1:20
So, which HTML sectioning element
should we use to wrap our content here?
1:23
Well, remember an article is a self
contained component in a page, so
1:28
below the closing header tag,
I'll type a set of opening and
1:33
closing article tags to
wrap all my content.
1:38
And next,
we'll need to add the article heading.
1:41
So I'll include an h2
with the text VR Article.
1:44
Then, right below the h2,
1:54
I'll quickly add content by pasting a few
paragraph elements with placeholder text,
1:55
and you can copy these paragraph snippets
from the teacher's notes of this video.
2:00
So now when you click the Preview button,
in workspaces,
2:05
the browser always opens
the index.html file on the site.
2:10
So to preview our new article page in the
browser, you need to replace index.html
2:14
with the name of this file article.html
in the URL in the address bar.
2:20
Now, your workspace preview URL
may look different than mine.
2:25
So, right after treehouse-app.com
I'll type a forward
2:29
slash followed by article.html.
2:34
And we're able to see our
new article webpage, great.
2:38
In the previous video, you learned that
the aside element represents a section of
2:43
content, that's complementary
to the main content and
2:48
could be considered
separate from that content.
2:51
An aside element can also have different
meanings based on whether it's placed
2:55
inside or outside an article element.
2:59
So, for example, an aside that's
nested inside an article holds content
3:02
that's related to the article, but
not the primary focus of the article.
3:06
A pulled quote from the article,
for instance,
3:10
can be placed inside an aside because it's
directly related to the article's content,
3:13
but not essential to the overall
meaning of the article.
3:18
So in other words, you could remove
the quote from the article and
3:20
the content would still
be understood without it.
3:23
So in between the two paragraphs here in
our article, let's add an aside element.
3:26
And inside this aside,
we'll mark up the quote using the q tag,
3:34
which indicates that the text
is a short inline quotation.
3:39
So inside the <q> tag,
let's write the text
3:45
This is a pull quote
from the VR Article.
3:48
And as you can see the <q> tag adds
quotes around the pull quote.
3:57
Now an aside element that's placed
4:03
outside an article should describe content
that's related to the entire page.
4:06
So for example a side navigation or
a list of the top articles or
4:11
related posts in a page.
4:15
So back at our page below
the closing article tag.
4:17
Let's add an aside tag that contains
a list of links to more articles about VR.
4:22
So inside the aside I'll add an h3
with the text, More articles about VR.
4:30
And below the heading I'll display
the list of links using an unordered list.
4:40
Although this is a list of links, it's not
considered a major navigation component,
4:48
so I'm not gonna place
the list inside a nav element.
4:53
So first I'll add an li, and
inside that I'll nest a link.
4:58
And I'll make it a placeholder link.
5:04
With the text Make a VR Game.
5:08
Let's go ahead and copy this one.
5:14
Paste it below.
5:16
Let's change the text to
something like Learn VR in Unity.
5:18
I'll add one more.
5:26
And you can add as many as you like.
5:27
So this one will be
Build User Interfaces in VR.
5:29
I'll give this a save,
5:42
refresh the browser, and great,
5:44
you've just coded your very first
blog post using semantic markup.
5:46
Well done!
5:50
So now, to point the read more links on
the homepage to our new article page,
5:52
we can include the name of
the file as the href value,
5:57
over in index.html.
6:01
So let's scroll down to our VR Articles,
6:03
and for our first article,
6:06
type article.html as the href value.
6:10
And I'll just go ahead and copy it and
paste it into the second value.
6:14
Refresh.
6:20
And when I click the Read more links,
they take me to the new VR Article page.
6:21
Awesome!
6:27
And you'll learn a whole lot more about
the different ways you can link to a web
6:29
page in a later video.
6:32