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
Explore the world of semantic HTML and understand its importance in web content structure. Learn to divide webpages into key sections like Header, Main, and Footer. Discover how to add semantic structure using tags like nav, and when to use div for logical grouping of HTML elements.
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
In our previous video, we explored
the core building blocks of web content,
0:00
headings, paragraphs, and lists.
0:04
These elements give your webpages
structure and readability.
0:07
But what happens when you wanna take
that structure to the next level?
0:11
In this video, we'll take the foundation
we laid with headings, paragraphs, and
0:15
lists, and build upon it by structuring
the website into logical sections.
0:20
We start this journey with semantic HTML.
0:26
Semantic HTML is all about giving
meaning to your web content.
0:29
It provides a clear structure that we and
other developers can easily understand.
0:33
Not only that, but
it's also helpful for search engines and
0:39
assistive technologies
such as green readers.
0:43
Semantic elements are HTML tags that
clearly define the contents within.
0:46
Some commonly used tags are header,
nav, main, and footer.
0:52
As you can imagine,
0:58
the header element might contain
elements to do with the top of the page.
0:59
The nav element will
hold navigational items.
1:04
The footer element might contain elements
to do with the very bottom of the page.
1:07
And the main element might contain
the main content of the page.
1:12
Let's have a look at our mockup and see
if we can find chunks of content that fit
1:16
nicely into these four semantic elements.
1:21
This header here when make
good content for the header.
1:24
In this back to list button
would make sense for the nav.
1:27
This single line here would be good for
the footer.
1:31
And this entire section here with the
white background would make up the main.
1:34
With that in mind, let's start to section
off our HTML to give it more structure.
1:39
Starting from the top,
let's wrap our heading one in header tags.
1:45
Next, we have our navigation.
1:55
We haven't written this
back to list link yet,
1:58
but we can definitely prepare a nav
section for it when we're ready.
2:01
Jumping down to the bottom, let's wrap
this single line with footer tags.
2:10
Now see if you can wrap the remaining
content with the main tags.
2:21
How did it go?
2:28
Here's what I did.
2:29
I simply wrapped everything
between the closing nav tag and
2:31
the opening footer tag with
main opening and closing tags.
2:35
Then I adjusted the indentation by
highlighting everything within the main
2:40
tags and pressing tab.
2:45
And there we have a very semantically
structured HTML document that tells
2:48
us what content is in what sections.
2:53
There's a lot of other semantic
elements that you can use, so
2:56
check out the teacher's notes for
a full list.
2:59
While semantic tags offer clarity and
meaning,
3:02
sometimes you need to
group elements logically.
3:05
Sometimes we want to give meaning to
groups of HTML that don't necessarily have
3:09
a matching or relevant semantic element.
3:14
That's where the div element comes in.
3:17
Div stands for division, or simply
a logical section in an HTML document.
3:20
It's a general purpose container
that doesn't have a specific
3:26
semantic meaning on its own,
like our semantic elements.
3:30
Instead, it's a handy tool for
logically grouping HTML elements.
3:34
In our case,
3:39
we may want to place different parts
of the recipe in div containers.
3:40
Let's have a look at our mockup.
3:44
We can group these elements because
it's the introduction to the recipe.
3:46
And this visual box here
would definitely group nicely
3:51
because they are about the ingredients.
3:54
And these elements will definitely
be grouped because there are about
3:56
the steps for the recipe.
3:59
Let's make that happen.
4:02
First, let's section off
the introduction element.
4:03
We don't have an image yet, so
let's work with the paragraph first.
4:06
Wrap the paragraph tag around another tag,
like so.
4:10
If we save and refresh the page, you'll
see that there's no visual difference,
4:15
and that's completely normal.
4:20
At this stage, div is simply being used
to logically group elements on our page.
4:23
Let's now do the same
with the ingredients.
4:29
Wrap opening and closing div tags
around elements related to ingredients,
4:32
the h3 and the entire unordered list.
4:37
Finally, we'll do the same for the steps.
4:42
Pause this video and
give it a go yourself.
4:45
Make sure you identify all the elements
that have a logical connection to
4:47
a recipe steps, and wrap it all
with opening and closing div tags.
4:52
See you in a bit.
4:57
How did it go?
5:00
This is what I did.
5:01
I started off by writing my div tags,
5:02
I then cut the closing div tag
by using the shortcut command X.
5:05
I fixed the indenting, then pasted the
closing div tag after the closing OL tag.
5:09
We've explored the power
of semantic elements and
5:17
the versatility of the div element
in structuring your web content.
5:20
Semantic tags provide meaning and clarity,
5:24
while the div element is your trusted
companion for logic grouping.
5:26
Together, they empower you to create
well-organized and accessible webpages.
5:31
Later, they will help us improve
the visual appeal of our webpage.
5:36
Keep these tools in mind as you
continue your web development journey.
5:40
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