FREELessons: 32Length: 5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.7 The Importance of Validation

[SOUND] Let's refer back to the markup that we created in the previous lesson. Wouldn't it be helpful if there is a way to be notified when we make errors when creating our markup? For example, let's say that we accidentally forgot to close off this div right here, and maybe there's a paragraph that you accidentally deleted but didn't mean to. Let's come back and reload the page, and it seems to look fine, and this is important. Browsers, especially newer browsers, are smart enough to make up for your bad coding. So even though you forgot a p tag, the browser will assume, okay, well they meant to do it. I will add that on for them. And the same thing with the div. Now in this case, likely leaving off the div would screw up your markup, but because the div was closed so low to the bottom, it probably didn't have an affect, but it will. So what we really need is a way to quickly run it through a validator, and it will make sure if we've done everything correctly. Well, we can do that. If we browse to, we can validate any webpage. Now, before we continue, it's important to understand that you must not always receive a 100% validation score. Validation is meant for you. It's a tool to make sure you didn't make any mistakes. However, if you know what you're doing, don't blindly follow it. It's not a rule. It's a tool. Next, I'm gonna click on More Options. And let's see if there's anything special. In this case, I'm going to specify we are working with an HTML5 page. But now, if we try to paste in our local URL, this isn't going to work. Validation is meant for pages that are online, and you can see right here, can not be checked. So there are some plugins for browsers like Chrome and Firefox you can use. However, you can also do things like direct input and file upload. So why don't we try file upload first? We're gonna browse to Desktop Learning, and I'm gonna upload that right there. And we will choose HTML5 and check. Now we can see that we made three errors and four warnings, and let's see what they are. First, we'll see using experimental feature. That's just letting you know. Next, no character encoding found. However, if we come back and we check this, we can see we do have character encoding, so that's fine. Next, we can see doc type override in effect, and what we see here is that we forgot the doc type on this specific page. So we can go ahead and add that in, even though, to be honest, it's not that important these days. But we will go ahead and add that in like so. Now we have errors. What we had up here were warnings. Now we're going to find the mistakes we've made, and we see element head is missing a required instance of child element title. And what this teaches us is that within the head, every page must have a title element, and we'll say My Fragment. So now you can see we can use this as a tool to check what mistakes we've made. Next, we've end tag article seen, but there was no open elements, and that's on line 37. Let's scroll down and see line 37 right here, and what it's saying is it found a closing article tag. But it could not find the opening. So this shows we do have it here, so sometimes it can get confused if you've made other errors. So let's continue on and skip that one. And now we have an unclosed div on line 13 for class of preview. So we see right here, there's no closing div, so let's add that on, and we'll do it right here. In this case, it thinks it's for the preview, but it's actually missing a closing for the body element. So now, let's revalidate. If it was on the web, we could press Revalidate, but we have to reupload our modified file, in this particular case. So now let's do it again. And now we can see, good job. It's been checked as HTML5, it's passed, and there was only one warning, and that warning is we're using experimental features. Of course, we are. So this is the way to validate your pages. You don't need to do it all the time, but it is a good habit to validate as you're working through a project. Maybe every few hours or so, make sure you haven't made any mistakes. Because if you're in a situation where it seems as if your CSS is not being applied correctly and you know you're doing everything right, maybe you've created your markup poorly. If you ever go on a forum and ask for advice about CSS not taking effect, one of the first things people will recommend is that you validate your HTML. Now, just as we can validate HTML, we can also validate CSS. If we scroll down, you can see, if you wish to validate specific content, there are other validators and tools available. So let's click on CSS, and now this is just the same. We can upload our style sheet. CSS > Style > Check and do note, in the real world, you would not upload your files. There are built-in plugins for code editors and browser plugins that will do this for you. And we can see there is one error. And the error is unknown pseudo element or pseudo class last child, and that's because it's validating this as CSS2, but last child is a CSS3 feature. So we know we're good to go there. Good. This project is wrapped. We're done with our small fragment. Great job. In the next lesson, I'm gonna teach you about zen coding. Now this is not a coding topic. It's a way to code faster. If you've ever noticed me over the course of these first few videos doing something like myClass, and then I hit Tab, you'll see that, that will expand to a div. And it's really, really helpful, especially when creating markup. So I will show you how to use it in the next lesson.

Back to the top