1
00:00:00,378 --> 00:00:04,660
Hopefully we were able to rewrite most
of index.html using semantic markup.

2
00:00:04,660 --> 00:00:05,759
If not, that's okay.

3
00:00:05,759 --> 00:00:08,720
Now I'll show you my solution,
which you can compare to what you wrote.

4
00:00:08,720 --> 00:00:11,790
You can also reference all my code
when you download the project files.

5
00:00:11,790 --> 00:00:15,250
Now, one thing you could have done for
starters is check the HTML against

6
00:00:15,250 --> 00:00:19,710
the markup validation service
over at validator.w3.org.

7
00:00:19,710 --> 00:00:22,990
This lets you check your HTML for
well-formed markup, and

8
00:00:22,990 --> 00:00:26,940
point out any errors, like missing
closing tags and other technicalities.

9
00:00:26,940 --> 00:00:31,688
I'll click the Validate by Direct Input
tab, then copy all the code from

10
00:00:31,688 --> 00:00:36,900
index.html, paste it into the text area,
then click Check.

11
00:00:36,900 --> 00:00:40,240
Here you'll see some of the low-hanging
issues, which you can fix right away.

12
00:00:40,240 --> 00:00:43,730
For example, there seems to be
an issue with a paragraph tag,

13
00:00:43,730 --> 00:00:47,130
there's a missing alt attribute
in the image element.

14
00:00:47,130 --> 00:00:49,860
And there's a paragraph
element nested inside a span,

15
00:00:49,860 --> 00:00:53,470
which is not allowed in HTML because
a span is an inline element,

16
00:00:53,470 --> 00:00:56,090
while a paragraph is
a block-level element.

17
00:00:56,090 --> 00:01:00,000
Now, the tool doesn't validate
the semantics of your HTML, so

18
00:01:00,000 --> 00:01:01,430
now I'll walk you through what I did.

19
00:01:03,010 --> 00:01:07,880
First, up top,
in the introductory content, I replaced

20
00:01:07,880 --> 00:01:13,170
the p tags with header tags to describe
the header portion of the page.

21
00:01:13,170 --> 00:01:18,230
I made the heading an h1 instead of an h2,
since this is the title of the page,

22
00:01:18,230 --> 00:01:22,380
and I placed the description
inside a paragraph.

23
00:01:22,380 --> 00:01:27,440
The main navigation was inside
a span element that contained

24
00:01:27,440 --> 00:01:32,740
links followed by br elements to
produce a line break after each link.

25
00:01:32,740 --> 00:01:36,890
So I recoded the navigation
using a nav element and

26
00:01:36,890 --> 00:01:38,700
a ul to hold the list of links.

27
00:01:40,190 --> 00:01:43,390
Next, I placed the about content

28
00:01:43,390 --> 00:01:48,090
inside a section element to represent
a standalone section of content.

29
00:01:48,090 --> 00:01:52,700
I replaced the h1 heading tags with an h2

30
00:01:52,700 --> 00:01:56,190
because h1 should only be used for
the most important heading.

31
00:01:56,190 --> 00:01:59,180
You should avoid using h1
more than once on a page.

32
00:01:59,180 --> 00:02:02,660
The image tag was missing
the required alt attribute, so

33
00:02:02,660 --> 00:02:07,110
I added one with a description of
the image, Pixie the spiny hedgehog.

34
00:02:07,110 --> 00:02:12,270
And below the paragraph,
notice how an h3 was

35
00:02:12,270 --> 00:02:17,070
used just to make the text bold, and HTML
has a tag just for that, which is strong.

36
00:02:17,070 --> 00:02:21,010
So I placed that text inside a paragraph,
and

37
00:02:21,010 --> 00:02:24,540
to indicate that it should have strong
importance, I wrapped it in strong tags.

38
00:02:26,340 --> 00:02:31,990
Next, I placed The Hedgehog Facts
inside a section element.

39
00:02:31,990 --> 00:02:36,740
It was inside a development, which you
could have used as well because the div is

40
00:02:36,740 --> 00:02:39,670
a wrapper element that groups
together related content.

41
00:02:39,670 --> 00:02:41,910
But I chose to make it a section.

42
00:02:41,910 --> 00:02:48,650
The section needed a heading, so I placed
the text Top Hedgehog Facts in an h2.

43
00:02:48,650 --> 00:02:52,890
And a list of facts was
written using line breaks and

44
00:02:52,890 --> 00:02:56,320
hard coded numbers at
the start of each line.

45
00:02:56,320 --> 00:03:00,530
So to describe an unordered list,
I used the ol element and

46
00:03:00,530 --> 00:03:02,910
placed each fact inside a list item.

47
00:03:04,280 --> 00:03:08,935
After that, the Hedgehog as
Pets content also goes inside

48
00:03:08,935 --> 00:03:12,358
a section element instead of a paragraph.

49
00:03:12,358 --> 00:03:17,026
Now, the previous markup displayed
the section heading as text

50
00:03:17,026 --> 00:03:21,530
inside b tags to make the text bold and
a br to create a new line.

51
00:03:21,530 --> 00:03:25,739
Now, the b element doesn't really convey
any special semantic information like

52
00:03:25,739 --> 00:03:28,500
strong does to indicate
importance in text.

53
00:03:28,500 --> 00:03:31,310
In this case,
I needed to describe a heading, so

54
00:03:31,310 --> 00:03:35,690
I made it a level heading
three with h3 tags.

55
00:03:35,690 --> 00:03:40,710
And instead of separating the lines
of text using multiple br elements,

56
00:03:40,710 --> 00:03:43,390
I placed the related blocks
of text inside a paragraph.

57
00:03:45,490 --> 00:03:51,220
And notice how all three sections of
content are nested inside a main element,

58
00:03:51,220 --> 00:03:54,120
which is used to group
the main content of the page.

59
00:03:55,570 --> 00:03:59,440
Finally, at the bottom of the page,
I placed the footer content inside,

60
00:03:59,440 --> 00:04:04,350
you guessed it, a footer element
instead of a span element.

61
00:04:04,350 --> 00:04:06,730
A footer is a block-level element, so

62
00:04:06,730 --> 00:04:11,110
now there will be no issues
with the nested p element.

63
00:04:11,110 --> 00:04:13,940
And you learned that HTML
entities are used when you

64
00:04:13,940 --> 00:04:16,510
need to display a special
character on a web page.

65
00:04:16,510 --> 00:04:20,910
These are often characters or symbol that
can't easily be typed into a keyboard.

66
00:04:20,910 --> 00:04:24,820
So to make sure that the copyright
symbol displays correctly to all users,

67
00:04:24,820 --> 00:04:27,770
I used the HTML entity for
the copyright symbol.

68
00:04:28,790 --> 00:04:31,720
All right, so that's it for
this practice workshop.

69
00:04:31,720 --> 00:04:33,910
I hope that you were able to
complete it successfully.

70
00:04:33,910 --> 00:04:35,390
If not, why not start over and

71
00:04:35,390 --> 00:04:37,945
try to write it again without
looking at my version?

72
00:04:37,945 --> 00:04:41,820
You're also going to learn a whole lot
more about writing HTML here at Treehouse.

73
00:04:41,820 --> 00:04:43,250
Thanks everyone, and happy learning.