You have written a few HTML pages by now. Did you accidentally break nesting and
put emphasis on a whole page? Or did you type
<he> instead of
<h3>? How can
we guard HTML? Many editors try to catch errors for us, and most browsers are
pretty good at guessing what you meant. But what happens when Windows Edge
guesses differently than Google Chrome? How can we be certain that our HTML
meets standards and is error free? Luckily, the W3C – the people who define the
tags of HTML – have a validation service we can use. We'll explain the W3C and
their validator in this lesson.
The World Wide Web Consortium (W3C) is an international community that develops open standards to ensure the long-term growth of the web. It operates under a strict code of ethics and professional conduct and provides many free tools for developers.
Take a look at this file:
example_code.html in a new tab. We'll
call this the viewing tab. It looks relatively OK, right? There's some
oddness happening with the list at the bottom (we might not have wanted
everything hyperlinked), and there's an odd bullet point with no content, but
everything else looks pretty good.
Now let's try validating the code to identify where we went wrong.
As you scroll down the page, you should see a list of errors, or invalid HTML.
Like all other programming languages, HTML can contain all kinds of different errors. These can range from missing angle brackets to wrong or missing opening or closing tags, unnecessary or missing attributes, and many other issues. Our web browsers are pretty good at filling in the missing pieces but we can't always count on it being the same experience with every one. Tools like W3C's HTML Validator can catch these errors and prevent our user from having a poor experience.
Now that we have a page full of HTML validation errors, how do we start fixing them? There are several parts of the error message that will help us parse the error, and figure out exactly where it is and what we can do to fix it.
The first line of the error is our error description. This is a narrative that gives us a little bit more information about our error.
In this case, it's saying that there was an ending
</h2> tag, but there was a
different opening tag that came before it.
The second and third lines of this error give us the exact location of the error, as well as a highlighted snippet of our HTML to help us exactly locate where the error is.
example_code_passing_validation.htmlfile in a new tab. This will now be our new viewing tab
You should see a green bar denoting that there are no errors or warnings to show.
View HTML Validation on Learn.co and start learning to code for free.