Preview
Video Player
00:00
00:00
Headings and Paragraphs
5:26The most common HTML elements used to structure and organize content are headings and paragraphs.
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