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
The most common HTML elements used to structure and organize content are headings and paragraphs.
Content Snippets
Virtual Reality is becoming well-known as a form of entertainment, but it's also finding its way into fields like education, industrial design, healthcare and so much more!
How Schools Use Virtual Reality to Improve Education
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices euismod turpis eget porta. Etiam nulla massa, pretium et massa nec, ornare dignissim nisi.
The Advantages of VR simulation
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices euismod turpis eget porta. Etiam nulla massa, pretium et massa nec, ornare dignissim nisi.
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
You've learned that HTML
provides structure and
0:00
meaning to content in the form
of tags called markup.
0:03
When you write markup,
0:06
you're telling the browser how
you want to display your content.
0:07
Remember what the page looked like
earlier before we added markup?
0:10
It was one long line of text, and
0:13
that wasn't a very pleasant
reading experience was it?
0:15
Structuring content with HTML,
organizes your content and
0:18
makes your users' reading experience
easier and more enjoyable.
0:22
Books, magazines, and newspapers
organize text using titles, subheadings,
0:25
and paragraphs.
0:30
HTML provides similar elements
to organize blocks of content.
0:31
The most common elements used to structure
content are headings and paragraphs.
0:35
Headings add organization and
0:40
structure to the page by
identifying sections of content.
0:41
So the site we're going to build is
about virtual reality experiences.
0:45
So, to make the text, Experience VR, the
main heading of the site, write an opening
0:49
tag in front of the text and place
the closing tag at the end of the text.
0:54
h1 is a heading element and
the 1 in the tag name means
1:00
that it's a level 1 heading, the main or
most important heading on the page.
1:06
Usually, the first heading
on a web page is an h1.
1:10
It's like the main headline in
a newspaper or magazine article.
1:13
So, when you save the HTML file and
refresh the browser,
1:16
you'll see the text Experience VR
in large bold letters and
1:20
the text outside the h1 element
appears below the heading.
1:24
Now that we've set
the page's main heading,
1:29
let's place the rest of
the text inside a paragraph.
1:31
Paragraphs in HTML are created using
the p tag, so type an opening p
1:34
tag at the start of the text and
place the closing p tag at the end.
1:39
Let's add one more
paragraph below this one.
1:48
Type a set of p tags and write the text,
1:51
Virtual Reality is becoming well
known as a form of entertainment,
1:54
but it's also finding its way
into fields like education,
2:06
industrial design,
healthcare, and so much more.
2:17
You can also copy this text from
the teacher's notes of this video.
2:26
I'll save the file, refresh the browser,
and notice how the browser places each
2:30
paragraph on a new line and
adds extra space to the top and
2:35
bottom sides to separate them from
adjacent paragraphs and other content.
2:38
h1 is not the only heading available.
2:43
There are six heading elements in HTML,
h1 through h6.
2:45
Each identifies a new section of content
and represents a different level of
2:50
importance on their page, h1 being
the highs level and h6 the lowest.
2:54
Back in our page,
let's markup a new section of content for
2:59
blog entries using a level 2 heading.
3:03
You define a level 2
heading using the h2 tag.
3:05
So, below the bottom paragraph,
type a set of opening and closing h2 tags,
3:09
and inside, the text, Latest VR Articles.
3:14
I'll give this a save.
3:19
And over in the browser the h1 is
the highest level heading on the page.
3:21
So the browser makes it stand
out from all the other text.
3:26
And an h2 is slightly less important.
3:29
So, the browser displays
it a little smaller.
3:32
Now, from here, you could use an h3
tag to create a smaller heading, and
3:34
that's a subheading of the h2, an h4 tag
for an even smaller heading and so on.
3:39
And if you place all the available
headings next to each other on a page,
3:45
they would look like this.
3:49
From the largest or most important, to the
smallest, or the one of lowest importance.
3:53
I'll go ahead and undo that.
4:01
And now, let's add a couple of blog
entries below the subheading, or the h2.
4:03
We'll use an h3 to mark up the title,
and paragraph tags for the text.
4:09
So, below the h2 I'll
type a set of h3 tags.
4:14
And the text for
4:19
this one will be How Schools Use
Virtual Reality to Improve Education.
4:20
Right below,
I'll add a set of paragraph tags and
4:33
I'll paste in some place holder
text as the paragraph text.
4:37
You can also copy these exact heading and
paragraph
4:41
text snippets from the teacher's notes of
this video or feel free to write your own.
4:44
I'll add one more log entry
right bellow the paragraph,
4:47
again I'll type a set of h3 tags.
4:51
And the text for this one will be
the Advantages of VR Simulation.
4:55
Add a paragraph tag down below.
5:09
And for this text I'll go ahead and
just copy and
5:12
paste in the place holder text from above.
5:15
All right, so
our page is starting to take shape.
5:20
And up next you'll learn about
creating lists with HTML.
5:22
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