Checking the page for html errors. Why is valid code needed and how to eliminate validation errors
Perhaps every person who is actively interested in the development and search engine promotion of Internet resources has at least once encountered the term “validity of a site’s code.” So what does such a mysterious, at first glance, phrase mean?
Valid code means using a hypertext markup language (HTML) on a site that fully complies with all the rules and standards of the World Wide Web Consortium (or W3C for short).
Strict compliance with all these rules and standards gives the site a number of advantages, namely: cross-browser compatibility (correct display of site pages in all popular browsers), increased loading speed of web pages, positive perception of the resource by search engines and other factors.
With the development of electronics, which has been advancing by leaps and bounds in recent years, the requirements for validity as one of the quality criteria for Internet resources are becoming more and more stringent. This is primarily due to the emergence of a large number of mobile gadgets with displays of various sizes. And it goes without saying that a website with valid code should be displayed as correctly as possible on any smartphone or tablet.
How to check the validity of the site code?In order to check the code for its structure and purity (validity), you should use one of the many online checkers (validators). You can also check the validity of the site code on the official website of the World Wide Web Consortium:
validator.w3.org for HTML validity and jigsaw.w3.org/css-validator for CSS validity.
The validator.w3.org service makes it possible to check the validity of a site’s hypertext markup language in one of three proposed ways:
In order to select the desired method of checking the validity of the code, you just need to switch to the appropriate tab:
Below, using a clear example, I will demonstrate the results of checking the validity of such a popular resource among developers and SEOs as Habrahabr. To do this, insert the site URL into the appropriate validator field and click on the CHECK button. Voila! Just a few seconds and the validator gives us the result:
The result is very decent, since when checking the validity of the vast majority of sites there will be hundreds and sometimes thousands of errors.
How to fix code errors?If, when checking the validity of the code of your resource, a large number of errors were found, then in no case should you be upset. If only because there are not so many sites that fully comply with the rules and standards of the W3C. And all errors can be corrected fairly quickly. And often this can be done even without outside help.
Upon completion of checking the web page code, the validator issues a list of all errors and threats with detailed explanations and instructions for eliminating them. All this is accompanied by examples, so correcting code errors will not be difficult even for a beginner.
Does code validity affect search engine optimization?The validity of the code is one of the indicators of the quality of the site, not only because it guarantees the resource cross-browser compatibility, increased loading speed, and so on. The fact is that clean and structured HTML code is one of the most important components of competent internal website optimization. And the reasons for this are quite obvious:
- search engines in ranking algorithms, all other things being equal, give preference to higher quality sites;
- valid code is easily and quickly processed, and the likelihood of it being misread by search bots is minimal.
Undoubtedly, you need to work on errors in the code, but the errors can be different, not all can lead to poor ranking of the site, if you do not have +100500 or more errors, then this is not a reason to worry! Correct those that you (as the owner of your site) consider the most dangerous. This is my personal opinion and it may not share the opinion of any of the readers.
And here's what Google thinks about the validity of website code. The official position of the search engine regarding the impact of code validity on search engine optimization is presented in this short video.
The pages of all websites on the Internet are designed with a special code written according to standardized HTML rules.
What is validity?Validation is a check for compliance with established standards, and in the context used by webmasters, the correctness of page code: syntax errors, tag nesting, etc. If everything is done “correctly,” the page code should not contain incorrect attributes, structures and errors. Website validation allows you to identify shortcomings that need to be corrected.
Site validity is the compliance of the code with existing HTML standards.
You can find out whether there are any comments or errors in the code of a web page either online or without access to the Internet and using offline programs.
What are code validatorsA code validator is a program that can be used to check the HTML code of pages and CSS code for compliance with modern standards.
She finds and records incorrect elements, indicating their location and formulating what exactly is formatted incorrectly.Basic “signs” of valid layout
Valid layout contains code that fully complies with the requirements of the W3C (World Wide Web Consortium), which develops technology standards for the entire Internet.
If the code on the site pages is correct, then the site is displayed correctly (and not crooked) in all browsers.
There are no suspicions of unfair “downgrading” in the search results and there are no pages removed from the index.
Example. If, let’s say, the .. tags are incorrect (in particular, the closing element is missing), then the search engine will not correct anything - it will interpret it as it is written in black and white in the code. As a result, consequences may arise related to the promotion of the site.Is valid layout important in website promotion?
In theory, yes, but in practice it turns out that there are a lot of sites with validation errors in the top, and sites with errors generally move well. Problems with promotion can only occur if your site is not displayed correctly on a certain type of device or in a certain browser. If it looks great, but there are errors in validation, this will not have any impact on promotion.
Another specialist, Mike Davidson, also conducted a similar experiment and came to the conclusion that Google classifies pages based on the quality of their writing. For example, an unclosed tag can cause a piece of content to be perceived as the value of that tag.
This webmaster made a very important point:
It is impossible to say with certainty how strongly ranking depends on the validity of the code, but it is absolutely certain that existing shortcomings can lead to pages or the entire site being removed from the search engine index.
Why is valid code needed?Valid code allows pages to display correctly in browsers (and site CSS styles may not display correctly).
Moreover, it is quite possible that in one browser your site is displayed the way you configured it, and in another - completely differently. The image may be skewed and the content may become completely unreadable.
As a result, you lose traffic from this browser. In addition, the behavioral factor, which is one of the three most important factors in SEO, significantly affects search results.
Imagine that visitors come to your site and immediately close it due to the inability to perceive the information - thanks to errors in the code. Or they generally return back to the search engine because a solution has not been found. All this will do a disservice, because in the end the behavioral factor will change the site’s position for the worse.
How to check a site for validityTo check the integrity of the code, they most often use the very useful validator site “Markup Validation Service”, located at: http://validator.w3.org, created by W3C.
Here you have three validation options:
- enter the page URL;
- upload the code file from your computer;
- paste the finished code into the form.
The service not only points out html code errors and their location, but also gives advice on how to fix them.
If the code is already available on the Web, then you can validate it by entering its URL into the “Validate by URL” form and clicking the Check button. The HTML validator will enable code reading and report the results.
You must enter the exact URL of the URL page you are checking. The entire site will not be checked. Enter the website address - only its home page is considered a program. If any comments are found, a notification is issued about the invalidity of the program code and then the lines with the errors are indicated.
At the same address http://validator.w3.org you can check the code by selecting the “Validate by File Upload” tab and uploading a document with the written code.
Select the path to the required file and click Check. Then everything happens in the same way.
Using the form to enter a codeSometimes it’s more convenient to immediately insert the page code and check it online: select the “Validate by Direct Input” tab and send all the code to the server.
CSSCSS code validity can also be checked using an online validator: https://jigsaw.w3.org/css-validator/
Everything here is in Russian, for many this is a really pleasant surprise.
Again, you can choose to enter a URL, upload your file, or paste the code.
The site is checked for errors, as in the case of HTML, and we receive a response from the server. There are no verification settings, but you can examine the suggested generated valid code located after the list of code flaws.
We study the resulting code and bring the original one to the desired form.
Browser extensionsThere are all sorts of extensions for browsers to check validation. For Google Chrome there is the HTML Tidy Browser Extension plugin that checks the validity of the code, for Opera - the Validator extension, for Safari - Zappatic, for Firefor - HTML Validator.
Let's look at the latter in more detail. It performs the same verification as validator, only offline. You can get it here http://users.skynet.be/mgueury/mozilla/
Install the extension, restart the browser - and you can start working right away. If you have any problems with the installation, you can write to Mozilla Firefox support or look through the forum http://forum.mozilla-russia.org/doku.php?id=general:extensions_installing
Detailed video about installing HTML Validator and its use:
When loading any URL, the extension is automatically enabled and reads the code. The result is visible in the upper right corner.
The result looks like a small picture with the validation result:
By clicking on the result, you can open:
- source;
— errors - in the lower left block (or a message about validity);
— tips for correcting errors are in the lower right.
No matter how the code is checked, errors appear in a list. The line with the defect must also be indicated.
Before editing the code, it’s worth making a backup copy of the site template, just in case.
In the Firefox extension, when you click on the name of the error in the open extension window, you are automatically redirected to a line with invalid code.
These same errors contain tips on how to correct them.
Let me give you a couple of examples.
1. No space between attributes.
…rel=”shortcut icon” href=”http://arbero.ru/favicon.ico” type=”image/x-icon”
Here the corrections are to remove the “semicolon”.
2. End tag for element “div” which is not open
The closing div tag is redundant. Let's remove it.
Do you know English poorly (and everything is always described in it)? Copy the error code and paste it into a search engine. A similar topic has probably already been described by some webmaster or layout designer, therefore, you will always find a way to solve the problem on specialized resources.
Although, to be honest, I wouldn't spend much effort on bugs in the code. It’s better to just make sure that the site looks correct on all devices and browsers.
I want to devote today’s article to site validation (that is, HTML). First, let's define what this term means! Site validation is checking for syntax errors, checking tag nesting and other criteria. As a rule, validators (services for checking sites for errors in document structure) check HTML code for compliance with a certain standard, which is indicated at the very beginning of any HTML page in the first line. If you didn't know what it was for, now you will know! 🙂 But why, exactly, is this validation needed and what does it affect?
“What is site validation?”As I said above, validation is the compliance of HTML code with certain rules and standards. XHTML was replaced by , which made life much easier for developers. The thing is that in the XHTML version the syntax was very strict. If in HTML5 you can write a wrap tag
both without a slash and in this form
, then only the last option will be correct in XHTML. HTML5 is not so strict, and besides, many useful tags have appeared, but that’s not about that now :)
Now let's answer the second question.
Site validation allows you to monitor the correct display of the site in different browsers. For example, if you do not close the tag or make a typo somewhere in the code, then the same page may be displayed differently in different browsers. Also (CSS) may not display as you expected. Therefore, it is necessary to monitor this closely.
I also couldn’t help but say that validation affects search engines: search engines give preference to sites with valid HTML code. Keep this in mind!
Well, have I convinced you that website validation is really necessary? Then we're done with theory and let's move on to practice!
Validation Check MethodsI wrote detailed instructions about each of the methods in the form of text, and also, if someone is too lazy to read and delve into it, I made a video 😉.
1 way. Service validator.w3.orgThe essence of the first method is to use a service to check the validity of the site. How to check the validity of a site using the validator.w3.org service:
1. Go to the address: validator.w3.org. A page will open in front of us with 3 tabs. On the first tab “Validate by URI” you can check the validity of a site posted on the Internet, on the second “Validate by File Upload” - upload a file from your computer, and on the third “Validate by Direct Input” - paste the contents of the file directly into the input form. I will talk about the first option, that is, when the site is posted on the Internet (I think you won’t have any problems with other methods). Therefore, select the first tab as in the image below:
- Character Encoding - the encoding of your site. BUT! If it is already there between the tags (on your website in the browser, press the key combination CTRL+U and look for something like this line at the beginning of the document
). If there is something similar in the first line, then leave the value (detect automatically) here too.
If you don’t have any of what I described above, then you will need to set these values yourself. I didn't change anything here and left everything as is.
3. Then in the “Address” field enter the address of your site as I did:
Then click on the “Check” button, which is located in the middle of the gray block:
4. Next comes the validation of your site and after a while the validation result will appear. There will be a similar page with the message “This document was successfully checked as HTML5!” (which means that your site has successfully passed the validity check for a certain document type, that is, in my case, HTML5):
If you have an inscription on a red background, this means that you have errors in your HTML document. They need to be corrected. To do this, simply highlight the name of the error (in the video I show you how to do all this) and paste it, for example, into Google. Then simply read how other webmasters dealt with this error and correct it by following these tips. You also have another option - entrust this task to a knowledgeable person who understands the code, and let him do it for you.
Method 2. Browser plugins1. Plugin for Mozilla Firefox browser - Go
Follow the link above, select the Firefox browser version and click on the “Download” button. Then select the required operating system and install it as a regular add-on. (those who don’t understand, watch the video :)
2. Plugin for Google Chrome browser - Go
Here you need to click on the “Free” button and then click “Add” in the pop-up window.
3. Opera browser plugin - Go
The usual installation of the add-on also takes place here.
Performs several checks of your code. The main ones:
Keep in mind that these are logical checks, and it doesn't matter how the validator is implemented. If at least one of the checks fails, then the HTML is considered invalid. And therein lies the problem. Arguments The main argument for HTML validation is cross-browser compatibility. Each browser has its own parser, and feeding it what all browsers understand is the only way to be sure that your code will work correctly in all browsers. Since each browser has its own HTML error correction mechanism, you cannot rely on invalid code.
My Position This is one of the few times I publicly speak about my position on something. I have always been among the opponents of validation, based on the fact that the validator is too strict to be practical in real-world applications. There are things that are supported by most browsers (in, after) that are invalid, but are sometimes very necessary for proper operation.In general, my biggest validation problem is checking #4 (for extraneous elements). I'm a proponent of using custom attributes in HTML tags to store additional meta data related to a particular element. In my understanding, this is, for example, adding the foo attribute when I have data (bar) that I need to associate with a specific element. Sometimes people overload existing attributes for these purposes just to pass validation, even though the attribute will be used for other purposes. It makes no sense to me.
The secret of browsers is that they never check that the HTML code matches the specified DTD. The Doctype that you specified in the document switches the browser parser to a certain mode, but this does not load the doctype and check the code for compliance with it. That is, the browser parser processes HTML with some invalidity assumptions, like self-closing tags and block elements inside inline elements (I'm sure there are others).
In the case of custom attributes, all browsers parse and recognize syntactically correct attributes as valid. This makes it possible to access such attributes through the DOM using Javascript. So why should I worry about validity? I will continue to use my attributes and I'm very glad that HTML5 formalizes them.
The best example of a technology that results in invalid HTML but makes a huge difference is ARIA. ARIA works by adding new attributes to HTML 4. These attributes provide additional semantic meaning to HTML elements and the browser is able to convey this semantics to assistive devices to assist people with disabilities. All major browsers now support ARIA markup. However, if you use these attributes, you will have invalid HTML.
As for custom tags, I think there's nothing wrong with adding syntactically correct new tags to a page, but I don't see much practical value in it.
To make my position clear: I believe that checks #1 and #2 are very important and should always be done. I also consider check #3 important, but not as important as the first two. Check #4 is very questionable to me because it affects custom attributes. I believe that, at a maximum, custom attributes should be marked as warnings (rather than errors) in the validation results so that I can check to see if I entered the attribute name incorrectly. Marking custom tags as errors may be a good idea, but it also has some problems, for example when embedding content in other markup - SVG or MathML.
Validation for the sake of validation? I think that validation for the sake of validation is extremely stupid. Valid HTML only means that all 4 checks passed without errors. There are several important things that valid HTML does not guarantee:- valid HTML does not guarantee accessibility;
- Valid HTML does not guarantee good UX (user experience);
- Valid HTML does not guarantee a functioning website;
- Valid HTML does not guarantee the correct display of the site.
I know this is a controversial topic for many, so please refrain from being purely emotional in the comments.
UPD: thanks for the karma, I moved it to thematic one. I will repeat the words of the author: I understand that this is a controversial topic, but please refrain from purely emotional comments and give arguments.