Main content
Computer programming - JavaScript and the web
Course: Computer programming - JavaScript and the web > Unit 2
Lesson 9: Further learningHTML validation
Browsers can be forgiving and might still display a webpage even if there are errors in the code. However, to ensure your webpage works consistently across different browsers, it's a good idea to validate your HTML using the W3 validation service. Let's walk through how to use the W3C validator service and fix common errors, like missing alt attributes for images.
Want to join the conversation?
are there any other HTML Validation sites out there? if so, are they better or worse than validator.w3.org?(18 votes)
I think Firefox one, but I haven't tried it. There are others too if you search for them.(1 vote)
Do you have to pay for validation?(6 votes)
No, you do not have to pay for validation. I would think that it was crazy if you had to pay!(6 votes)
Pamela, how do you find a code on a webpage?(4 votes)
Pressing F12 should bring up the source code on most browsers. =)(12 votes)
What are the 2 warnings? How come Pamela didn't pay attention to them?(4 votes)![duskpin sapling style avatar for user Ruby Phoenix [inactive]](https://cdn.kastatic.org/images/avatars/svg/duskpin-sapling.svg)
Pamela ignored the warnings because a warning is different from an error. An error stops your code from working properly. A warning is just a minor problem with the code. The code will work fine even with those minor problems, though it would be better to fix them.
I can't say what the warnings were without actually running the code in the validator. :)(9 votes)
What do I do if it says i havent completed the lesson?(4 votes)
Refresh your page. It happens to me too. When I complete a video or finish a challenge or whatever and it doesn't mark it as complete, then I refresh the page and it marks it.(5 votes)
- I did that with one of my webpages but I got this warning.
Warning: This document appears to be written in English. Consider adding lang="en" (or variant) to the html start tag.
From line 1, column 16; to line 2, column 6
TYPE html>↩<html>↩<head
For further guidance, consult Declaring the overall language of a page and Choosing language tags.
If the HTML checker has misidentified the language of this document, please file an issue report or send e-mail to report the problem.
what does it mean?(3 votes)
It's a common warning, you just need to add the lang attribute to the HTML tag.(4 votes)
- I type validtor.w3.org but it says that the site cannot be reached, but other sites can be reached(1 vote)
There's a typo. You said validtor, with no 'a'(1 vote)
what happens if you don't have an alt atributte(1 vote)
Blind People and people with browsers that don't support Images will not be able to know that if there is an image in your webpage. I hope it helped :)(3 votes)
I used the <time> tag and wrapped it up in <ul>.
The HTML validatpr says -
*Error: Element time not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)*
So how can I specify machine-readable time while inside a list?(2 votes)- so lets say i want to change the color of div1 when i hover over div2, how would i do that? here is the code i tried
#div1:hover #div2 {
}(2 votes)- Hi! Yeah, like Jamthom8 says, you'll need to use JavaScript for that. But we now do have a jQuery tutorial! Check it out here: https://www.khanacademy.org/computing/computer-programming/html-js-jquery
Here's a bit more info about why that doesn't work. CSS is actually quite limited in what you can select. For example, you also can't say "make an element red when its child element is hovered," which seems quite reasonable. It might seem even more surprising that while you can say "make this element is red when my next sibling is selected," you can't say "make this element red when my previous sibling is selected"! Why all these restrictions?
The answer is that CSS can get pretty complicated as it is, and browsers need to be really good at scanning the CSS and applying your rules really fast. Because of the restrictions on the CSS, the browser only needs to look through your CSS once. That is, it never has to "backtrack" and say "okay, this selector matches, so now I go back to that element I saw before and…" because that's just too complicated to be fast enough.
The (yet unreleased) CSS4 specification has a few nice additions. But those might change between now and the time it's released.
So, yeah, go for jQuery!(2 votes)
Video transcript
- [Voiceover] On Khan Academy, we pop up the oh noes guide to tell you when there's something wrong with your webpage. But we only tell you about the big things. There could be other things wrong with your webpage too, things that aren't quite right according to
the HTML specification. But the browsers let you get away with it because browsers like
to be really forgiving. They just want to make it work. So then you end up not knowing that there's something
wrong with your webpage. That's why it's a good idea to run your webpage through the
W3 validation service. That will actually check and tell you if your page is valid and if there's something not quite right about it. To do that, go to validator.w3.org. It'll give you options to enter a URL, upload a file, or just copy and paste. That's what I'll do. I'll take the most recent webpage that I was showing in a talk through and paste it in here and then check. Ta-da! It was successfully checked as HTML 5 and there were no issues with it. Fantastic. Let's try one more. This is our HTML internal links example. I want to paste this in here and check. Uh-oh, there was one error, two warnings. Let's go down. It says that an image element must have an alt attribute. Uh-oh, this is a classic thing to forget is that alt attribute. We see the images, but not everybody does. So what I should do is
go back into that HTML and add the alt attribute. So let's say the image was here, alt equals photo of Tim Berners-Lee next to computer and let me copy and go back up, paste. I will re-validate. Ta-da! It's valid HTML. When possible, you should be trying to make webpages that are valid HTML because that way you can have a lot more confidence that the browser is going to interpret them exactly like you expect all the time. Now go try and validate
a few of your pages and see how they turn out.