One Solution4:44 with Guil Hernandez
This video covers one solution to the 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 development, 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 unordered 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 symbol 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 up