Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Practice Semantic HTML!
You have completed Practice Semantic HTML!
Preview
This video covers one solution to the "Practice Semantic HTML" challenge.
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
Hopefully we were able to rewrite most
of index.html using semantic markup.
0:00
If not, that's okay.
0:04
Now I'll show you my solution,
which you can compare to what you wrote.
0:05
You can also reference all my code
when you download the project files.
0:08
Now, one thing you could have done for
starters is check the HTML against
0:11
the markup validation service
over at validator.w3.org.
0:15
This lets you check your HTML for
well-formed markup, and
0:19
point out any errors, like missing
closing tags and other technicalities.
0:22
I'll click the Validate by Direct Input
tab, then copy all the code from
0:26
index.html, paste it into the text area,
then click Check.
0:31
Here you'll see some of the low-hanging
issues, which you can fix right away.
0:36
For example, there seems to be
an issue with a paragraph tag,
0:40
there's a missing alt attribute
in the image element,
0:43
and there's a paragraph
element nested inside a span,
0:47
which is not allowed in HTML because
a span is an inline element,
0:49
while a paragraph is
a block-level element.
0:53
Now, the tool doesn't validate
the semantics of your HTML, so
0:56
now I'll walk you through what I did.
1:00
First, up top,
in the introductory content, I replaced
1:03
the p tags with header tags to describe
the header portion of the page.
1:07
I made the heading an h1 instead of an h2,
since this is the title of the page,
1:13
and I placed the description
inside a paragraph.
1:18
The main navigation was inside
a span element that contained
1:22
links followed by br elements to
produce a line break after each link.
1:27
So I recoded the navigation
using a nav element and
1:32
a ul to hold the list of links.
1:36
Next, I placed the about content
1:40
inside a section element to represent
a standalone section of content.
1:43
I replaced the h1 heading tags with an h2
1:48
because h1 should only be used for
the most important heading.
1:52
You should avoid using h1
more than once on a page.
1:56
The image tag was missing
the required alt attribute, so
1:59
I added one with a description of
the image, Pixie the spiny hedgehog.
2:02
And below the paragraph,
notice how an h3 was
2:07
used just to make the text bold, and HTML
has a tag just for that, which is strong.
2:12
So I placed that text inside a paragraph,
and
2:17
to indicate that it should have strong
importance, I wrapped it in strong tags.
2:21
Next, I placed The Hedgehog Facts
inside a section element.
2:26
It was inside a div element, which you
could have used as well because the div is
2:31
a wrapper element that groups
together related content,
2:36
but I chose to make it a section.
2:39
The section needed a heading, so I placed
the text Top Hedgehog Facts in an h2.
2:41
And a list of facts was
written using line breaks and
2:48
hard coded numbers at
the start of each line.
2:52
So to describe an ordered list,
I used the ol element and
2:56
placed each fact inside a list item.
3:00
After that, the Hedgehog as
Pets content also goes inside
3:04
a section element instead of a paragraph.
3:08
Now, the previous markup displayed
the section heading as text
3:12
inside b tags to make the text bold and
a br to create a new line.
3:17
Now, the b element doesn't really convey
any special semantic information like
3:21
strong does to indicate
importance in text.
3:25
In this case,
I needed to describe a heading, so
3:28
I made it a level heading
three with h3 tags.
3:31
And instead of separating the lines
of text using multiple br elements,
3:35
I placed the related blocks
of text inside a paragraph.
3:40
And notice how all three sections of
content are nested inside a main element,
3:45
which is used to group
the main content of the page.
3:51
Finally, at the bottom of the page,
I placed the footer content inside,
3:55
you guessed it, a footer element
instead of a span element.
3:59
A footer is a block-level element, so
4:04
now there will be no issues
with the nested p element.
4:06
And you learned that HTML
entities are used when you
4:11
need to display a special
character on a web page.
4:13
These are often characters or symbols that
can't easily be typed into a keyboard.
4:16
So to make sure that the copyright
symbol displays correctly to all users,
4:20
I used the HTML entity for
the copyright symbol.
4:24
All right, so that's it for
this practice workshop.
4:28
I hope that you were able to
complete it successfully.
4:31
If not, why not start over and
4:33
try to write it again without
looking at my version?
4:35
You're also going to learn a whole lot
more about writing HTML here at Treehouse.
4:37
Thanks everyone, and happy learning.
4:41
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