HTML Validation Tutorial

[? Music ?] [Treehouse presents] 0:00 [Quick Tips] [HTML Validation with Nick Pettit] 0:02 Hi, I'm Nick. 0:05 In this Treehouse Quick Tip, we're going to learn how to validate our HTML. 0:07 Let's say you just finished creating the perfect HTML website, 0:11 or maybe you're working on one that's in progress. 0:15 Before you continue, it's a good idea 0:19 to check your code to make sure that it's valid according to the HTML specification. 0:21 Validating your code is always a good idea, 0:27 especially when you're just getting started with HTML, 0:30 because it will help you spot errors that might cause a web browser 0:34 to not render your page in the way that you might expect. 0:38 Let's take a look. 0:42 First, head on over to validator.w3.org. 0:44 The W3C, or Worldwide Web Consortium, 0:47 is the organization that creates technology standards for the Web, 0:51 like HTML, CSS, and more. 0:55 They have several validators, and for HTML, 0:58 there are 3 ways to check your markup. 1:00 First, you can copy and paste the address of your website 1:04 right into the validator and check it that way. 1:07 The 2nd method is to validate by file upload. 1:11 You would upload your HTML file and then hit Validate. 1:15 Finally, you can validate by direct input 1:19 and check for errors that way. 1:22 We're going to use this method and copy and paste some of our code. 1:24 Switching over to my text editor here, 1:28 I have some HTML code that I've been working on, 1:30 and I want to check it for errors, so I'm going to go ahead and 1:33 select all of my text, copy it. 1:37 I'm going to jump back and paste it in here, 1:39 and then I'm going to click the button here that says "Check." 1:43 I've intentionally included an error in our code. 1:48 In fact, the validator says that we have a few errors. 1:51 But in most cases, you can clean up lots of these errors 1:54 by just fixing 1 or 2 of them. 1:57 If we scroll down here, it says that we have an unclosed element h2. 2:00 It looks like "Cupcake of the Week" is missing a closing tag here. 2:08 If we switch over to our HTML, you can see that we are indeed 2:13 missing this closing h2 tag, 2:18 so we'll go ahead and add it in. 2:21 We'll copy all of our text again, scroll up to the top, 2:23 and paste it in, and then we'll go ahead and hit 2:27 "Revalidate," and now it says this document was successfully checked 2:32 as HTML5. 2:38 The result has passed, and while there are 2 warnings, 2:41 we don't really usually need to worry about those. 2:44 Most of the time, that just relates to using the direct input method. 2:47 It's always a good idea to validate your code 2:52 before you deploy it live to the Web. 2:56 It's a quick and easy way to spot common mistakes. 2:58

You need to sign up for Treehouse in order to set up Workspace

Sign up