Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:15Length:1.2 hours
  • Overview
  • Transcript

4.1 The W3C's HTML Validator

In this lesson, I’ll show you how to use the W3C’s HTML validation tool and explain why it is important to create valid HTML.

Related Links

4.1 The W3C's HTML Validator

Welcome back. In our last lesson we took a look at the last part of forms and how to get different types of user input. In this lesson we'll take a look at proper page structure and the HTML validator. Let's get started. I'm often asked if validation is really necessary. Many people say look, my site looks great and it works fine, isn't that enough? Why do I need to validate it? Well, the answer is simple. Validation is a sign of a professional HTML developer. It's a way that you know that they have good tech practices, they've written maintainable code, and they care about search engine optimization. So it's important that you do it on each one of your webpages. So what is validation and how do we achieve it? Well, it's simple. We use the W3.org's validator. So we're gonna open a new tab and we're gonna go to validator.w3.org. With the validator, we have three options. We can validate by URL, if our website's already online. We can validate by uploading our file, or we can validate by copying and pasting the HTML directly in. I'm going to go ahead and validate by file upload, and I'll just show you on the index.html page, but we should do this for every page in our site. So I'm going to choose the file. And I'm gonna choose index.html. And then I'll click Check. We see that we received three errors and four warnings. Warnings should be read and understood and fixes made, if possible. But the big things we wanna focus on are these errors. So let's scroll down beyond the warnings to these red X's and take a look at the errors. The first error comes in Line 1, Column 1, and it says we don't have a documentation type. So let's open a new tab and do a quick search for doc type declarations. We see the second link down is a W3 link, so that should give us some pretty good answers. If we scroll down a little bit, we see the proper HTML5 doc type, even though it's not a standard yet, is probably what we're looking for. So I'm simply going to copy and paste this into index.html and because it says the error occurred at line one on page one, I'm gonna put it above the HTML. And in fact, this is a practice you should be getting used to. As HTML5 becomes more and more ubiquitous, declaring the doc type in this structure is going to be the primary focus of most HTML developers. Let's go ahead and save that and toggle back, and let's go ahead and come back to our validator.w3.org and let's go ahead and upload the file again. And when we click Check we see that we've gone from three errors down to two, so that error must be taken care of. And if we scroll down to the next error we see that character encoding was not declared. So what does this mean? Well it means that you should always tell the browser exactly how you want your code translated. Most of the time that's a very simple use of a meta tag. So what we're gonna do is toggle back over to our browser, and inside the head tag we're going to type meta and as an attribute we're gonna add charset='utf-8'. And if we save this down, toggle back, come back to the validator.w3c.org, get rid of that check at the top. Choose to validate our HTML by uploading a file, choosing the index page, clicking Open and then Check. We see we're down to one error. Let's scroll down and take a look at that last error. It tells us on line 12, column 51 an image element exists, but it does not have an alt attribute. This is not only an important validation error, but it's also an important SEO and accessibility issue as well. Make sure anytime you add an image, you add an alt tag to describe that image. So we'll toggle back to Sublime and right here where we see logo.png I'm gonna simply add an alt tag and I'm gonna say Logo. I'll save that, come back. We'll do the validator.w3c.org. We'll do the file upload, choose the file. Choose index and hit Open and then Check. The document has successfully checked as HTML5. We only have one warning and everything else is passing. Focusing on the errors first got rid of almost all of our warnings and took care of the errors, great job. For some additional practice between this video and the next, go through each one of the additional web pages on this site and add the three changes that we did to index.html to make sure they pass the W3's Validator. In the next video we'll take a look at HTML5 and the new elements and attributes that it brings to the table. Thanks for watching.

Back to the top