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