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.