Tip:
Highlight text to annotate it
X
Let’s use the Google Chrome HTML Validator
to make sure our code is
valid.
The first thing I’ll do is open up Google Chrome
[repositioning browser window]
and drag the file into the browser.
Now, I also want to be able to edit
this file, so I can fix any changes. So, I’m going to right-mouse click
on the file icon and I can either edit with NotePad++
right here or I can select “Open with” and choose one of these.
You can see that NotePad++ is here as well as in here.
I’m just going to pick my first choice. There’s my editor
and then I’ll line these up.
Each time I go back and forth between these two windows
I can make a change in the editor,
and then when I click on the browser window I do a CTRL r (refresh)
and that will update/refresh the web page display.
To validate the code, click on the Validator icon (upper right corner)
and the message says it can’t validate the page.
The reason is because the file is on our local system
and the validator cannot access our local system due to security reasons.
So, what we are going to do is use the “File Upload Interface” link
and choose a file
and that’s going to be the file named “firstPage.html"
and then we will tell the validator to check it.
You can see that we were successful although you can see that we have one warning.
So, let’s scroll down here and see what that warning is.
The warning basically says that HTML5 is still experimental,
they haven’t finished with the specification yet
so they can’t make a validator that is completely accurate because they
don’t know what the rules are going to be.
Now, let’s go in and make a mistake. One of the common
things that happen is that people try to add a list to a paragraph of text.
The reason this doesn’t work
is because a tag is a block type of object
and an or is also a block.
You can’t put a block inside of a block
because the browser wants to put them in separate spaces.
but you can’t put one inside of the other.
We are going to make that change, putting the inside a element.
We are going to save the file using CTRL s.
Moving over to our browser, we will check the display first
doing a CTRL r
for refresh, and you’ll see that
indeed it works fine. But..... if we validate the code
we will see that we have errors in the code.
Now the error is kind of strange. It says that no element
is “ in scope but a p end tag is seen.”
You are going to find that these errors are not really clear, but you will learn
that this error shows up when you have a block element inside another block element.
You can see that the error is on line #23 so you can zero in.
It is either going to be on the line that it says, or before it.
It is not going to show as an error after the line number given.
So, let’s get rid of our element
and save the file with CTRL s.
Go back to the browser and “Choose File"
Check the file.
You can see that the .html file is once again valid.
Now, another thing that might happen is someone will
leave off the stop tag or stop marker.
Let’s see if the validator catches that or not. Remember the rule, “Every start tag must have a matching stop tag."
So, here is the start part and here is the stop part.
Now, on the double element that is easy, there’s a distince start tag and stop tag.
But, here on line #25 they are combined with the . We are going to take away that /
and see if the validator catches that.
I’ll go back “Choose File” and “Check"
You can see that the HTML validator
says that the page is still valid.
In the old days of XHTML that was an error.
Let’s take away an stop h1 (on line #14)
And, the validator found an error...
Again, the error is
a little strange, “The element ul not allowed as a child of element h1”
as a child element of element h1"
So, what the validator is saying is the h1
is trying to include a and a
and another
Well, the simple form of what that error message is saying is
“you left off the stop tag on the ”
Let me show you what that page looks like with the missing....
And you can see that everything is an h1
So, if we go back into the text editor
and put in the
and go back to the page and do a refresh
and do a validate
you can see that we have a valid document.
So, that’s using the W3C Validator
on your own files on your operating system.