Preview
Video Player
00:00
00:00
One Solution
4:44This video covers one solution to the "Practice Semantic HTML" challenge.
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