Checking data for validity. Layout course - page validation Validator service

Performs several checks of your code. The main ones:

Syntax validation - checking for syntax errors. is valid syntax even though it is not a valid HTML tag, so syntax checking is minimally useful for writing good HTML.

Checking the nesting of tags - tags must be closed in the reverse order relative to their opening. For example, this check catches errors with .

DTD validation - checking that your code matches the specified Document Type Definition. This includes checking tag names, attributes, and tag "embedding" (tags of one type inside tags of another type)

Check for extraneous elements - the check identifies everything that is in the code, but is missing in the DTD. For example, custom tags and attributes.

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.

The main argument against validation is that it is too strict and does not correspond to how browsers actually work. Yes, HTML can be invalid, but all browsers can treat some invalid code the same way. If I'm willing to take responsibility for the bad code I write, then I don't have to worry about checking. The only thing I have to worry about is that it works.

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.

Valid HTML can be something to be proud of, but it is not in itself an indicator of skill. Your valid code doesn't always perform better than my invalid code. HTML5 Validation HTML5 validation fixes some of the problems that were with HTML 4 validation. It explicitly allows custom attributes (they must start with data-). This will allow my code to pass the HTML5 validation check. Of course, there are some things about the HTML5 validator that I don't agree with, but I believe that it meets practical needs much better than the HTML 4 validator. Conclusion I believe that some parts of HTML validation are extremely important and useful, but I don't want to to be her hostage because I use my attributes. I'm proud that I use ARIA in my work and I don't care if it's considered invalid code. Again, out of the four validator checks, I only have problems with one. And an HTML5 validator will save me from most of these problems.

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.

Hello everyone, today is the final lesson of the HTML/CSS layout course.

As I promised, in this lesson we will learn how to validate a page. Let's figure out what it is, what it's needed for, and what tools and services are available for it.

What is page validation

Let's start with what page validation actually is. Page validation is checking its HTML and CSS code for compliance with web standards, as well as the selected doctype. The standards in question are prescribed by the W3C and all modern browsers try to follow them.

If the validity check is successful, that is, the document is valid, then with a high degree of probability it will be displayed equally in all browsers).

Valid layout is usually “clean”, beautiful code, which, among other things, is “liked” by search engines. Therefore, checking the code for validity is a mandatory step when creating websites.

Checking the site for validity

How to check a site for validity? The easiest way to check a site for compliance with web standards is to use an online validator. Checking the validity of html is possible at: http://validator.w3.org/. Be sure to use this service to find errors in your HTML code.

CSS validation is done using the CSS validator located at: http://jigsaw.w3.org/css-validator/.

I showed in more detail how to work with these services in the video below.

Also, checking the code for validity can be done using plugins for checking the validity of the code. For example, it is more convenient for me to use them, since they allow you to check the validity on the go.

Here's the video tutorial:

Hello, dear friends! Glad to see you on my blog! Today we will talk about the validity of HTML on the site as a whole and its individual pages. Validity is the compliance of code with certain standards. The World Wide Web Consortium (W3C), an international community of organizations, employees, and the public, works to develop web standards.

The consortium's mission is to unlock the full potential of the World Wide Web by developing and implementing protocols and guidelines that enable the long-term growth of the Internet.

The official W3C website provides very useful online tools for webmasters, one of them is a validator - a free service that allows you to check a site’s adherence to modern web standards.

Unfortunately, the service is entirely in English, but if you know a little about development and layout, you will certainly understand its essence and message 😉

So, on the main page there are three tabs:

Validate by URI - checking the specified URL;

Validate by File Upload - checking the uploaded file;

Validate by Direct Input - verification by direct input of source code.

To launch the analyzer, you need to switch to the required tab; as an example, I will consider checking by URL. Additional options are hidden under the More Options link; click on it to access the settings:

• Character Encoding - character encoding. WordPress uses UTF-8, but you can leave the default value “Detect automatically” to automatically detect the encoding.
• Document Type - document type (HTML, XHTML, SVG, etc.). Check the Only if missing checkbox if the document type is not specified on the page and needs to be specified manually for verification.
• List Messages Sequentially - display errors and warnings in a sequential list;
• Group Error Messages by Type - group errors and warnings by type;
• Show Source - show the source code;
• Show Outline - show the structure of the document;
• Clean up Markup with HTML Tidy - cleaning markup using HTML-Tidy;
• Validate error pages - check pages with errors, for example, 404 errors;
• Verbose Output - verbose output. To be honest, I didn’t notice a difference when enabling this option, if you know what it does, share it in the comments, I’ll be very grateful.

When all the settings are set, click the Check button to start the HTML validator. If the document has no errors, the following message will appear:

Document checking completed. No errors or warnings to show.

Translated into Russian, this means: “Document verification has been completed. No errors or warnings found." Great!

If the document does not pass the verification, we will see a simple message about its completion:

And of course, a list of messages that contain information about errors and warnings with explanations, as well as links to specific document lines, but only if the Show Source option was enabled.

The screenshot below shows a fragment of checking the Yandex main page. It’s strange to see this, I didn’t even expect it, because Yandex itself takes part in the development of W3C standards... Well, oh well, it’s really difficult to comply with absolutely all the standards, especially for such a large portal.

At the beginning of its journey, the Free Webmaster Blog contained a lot of errors and warnings. As I studied, I managed to reduce their number, and over time, get rid of them altogether. From now on I will adhere to W3C standards, although some plugins add a fly in the ointment... Time will tell!

So why do we need valid code? Validating web documents is an important step that can greatly help improve and ensure their quality, as well as save a lot of time and money. Some experts claim that the correct code can have a positive effect on search results! Test your site and share your results!

There is such a thing as validation or code validity. Validation is the process of testing code to ensure there are no errors. Code that does not contain errors is called valid. It’s not even correct to say “has no bugs”; it would be more accurate to say “code that does not contradict current W3C standards.” You can check HTML for errors using the service:

You can check CSS for errors using the service:

When implementing the layout, it occurs to every webmaster to check his site for the correctness of the code and validity. But most sites (even the most popular ones), if you check their code for validity, contain errors. Let's figure out what this is connected with.

Very often the concepts of “valid site” and “correct site” are different. In most cases, you can use code that will help the site display correctly in all browsers, but nevertheless, it will not be valid.

Validity and SEO

The validity of the code has a great influence on the search engine promotion of the site. There is information that search engines rank invalid sites lower than absolutely valid ones. In addition, invalidity implies incorrect display of the site in different browsers, which will scare away visitors, which means it will affect the bounce rate and behavioral factors and, as a result, may lead to the loss of the site’s position in searches. The validity of a site is one of the indicators of its quality.

Valid-invalid code

But, as noted above, it happens correct invalid code. A striking example of this are CSS hacks(i.e. properties that change the display of the desired element in different browsers). They are very often invalid. Of course, you can refuse to use such hacks, but, as a rule, valid code will be much longer and more complex, so in such cases it is better to choose to use hacks instead of chasing validity. As a rule, such code does not cause harm and is detected only when checked using a validator.

Checks html code, either specified using a link to a page, or simply in the form of an uploaded file or copied text. Gives a list of comments with recommendations for correcting them.
http://validator.w3.org/

CSS validation (css validator)

Checks document styles or a style sheet located in a separate file.
http://jigsaw.w3.org/css-validator/

Checking RSS and Atom feeds

Checks that RSS and Atom feeds are working correctly.
http://validator.w3.org/feed/

Check spelling on a web page

Highlights errors on the given URL page.
http://webmaster.yandex.ru/spellcheck.xml

Shows errors in the text copied into the verification window.
http://api.yandex.ru/speller/

Checking the web page structure

Shows the structure of a web page. Relevant for checking HTML5 documents. The Cyrillic alphabet does not display correctly (:.
http://gsnedders.html5.org/outliner/

Checking content for uniqueness

The free version shows up to 10 pages on the Internet with partial text matches with your page.
http://www.copyscape.com

Checks the uniqueness of the text entered into the form. In the free version, you can wait for results.
http://www.miratools.ru/Promo.aspx

Checks the uniqueness of both the entered text and the text at the given URL, shows the level of uniqueness as a percentage. Has its own verification algorithm.
http://content-watch.ru

Desktop programs for checking the uniqueness of content from copywriting exchanges. They work for a long time, but with high quality. Etxt has versions for three operating systems: Mac, Linux and Windows.
http://advego.ru/plagiatus/
http://www.etxt.ru/antiplagiat/

Shows sites with similar content and similar internal structure.
http://similarsites.com

Checking the site's cms

Checks for signs of the most famous cms.
http://2ip.ru/cms/

Checking website usability for different user groups Checking accessibility from mobile devices

Evaluates the ability to view the page from mobile devices and displays a list of comments and errors.
http://validator.w3.org/mobile/

Checking the site's usability for Google phones.
https://www.google.com/webmasters/tools/mobile-friendly/

Shows the site loading speed on mobile devices.
https://testmysite.withgoogle.com/intl/ru-ru

The site is an emulator for logging out from a mobile phone. Shows the site through the eyes of the selected model.
http://www.mobilephoneemulator.com/

Checking accessibility for people with disabilities

Page verification service for the visually impaired. Available online and as a plugin for Firefox.
http://wave.webaim.org/

Viewing site content through the eyes of a search robot

Shows site text close to what the search indexer sees.
http://www.seo-browser.com/

Lynx text browser distribution for win32 systems. Before use, you need to edit lynx.bat, indicating in it the path to the directory with lynx.
http://www.fdisk.com/doslynx/lynxport.htm

Removes all markup and shows page text, meta tags and title tags, number of external and internal links. Shows a preview of the page in Google.
http://www.browseo.net

Checking the link structure of the site Checking broken links

Shows a list of outgoing links for a URL and checks their responsiveness. It can check recursively, that is, move from one document to another independently.
http://validator.w3.org/checklink

Freeware tool for checking broken links. To work you need to install it on your computer. Recursively scans the site, makes reports, can be useful for creating a site map.
http://home.snafu.de/tilman/xenulink.html

Checking linking and page titles

Scans up to 500 website pages in the free version. Checks the number of external and internal links. Displays information about scanned pages: nesting, response codes, titles, meta information and headings.
http://www.screamingfrog.co.uk/seo-spider/

Checking the link structure and weight of internal pages

The program scans the site, builds a matrix of internal links, adds external (incoming) links from given URLs and, based on this data, calculates the internal weights of the site's pages. The program can be used to find external (outgoing) links for a list of website page URLs.

Checking server response codes, site visibility by search robots, technical characteristics of the site Checking HTTP headers and server response, page visibility for robots

Checks server response codes, predicts page loading speed depending on the volume in bytes of its data, shows the contents of the html head tag, internal and external links for the page, and page contents through the eyes of a search robot.
http://urivalet.com/

Checks server response codes. Makes it possible to check redirects (response codes 301, 302), Last-Modified header, etc.
http://www.rexswain.com/httpview.html

Shows the volume and content of data transferred when the page is loaded.
http://www.websiteoptimization.com/services/analyze/

Checks redirects, use of the canonical attribute, meta tags, and some aspects of site security. Gives recommendations for improving page loading.
http://www.seositecheckup.com

Checking domain and IP address information

WHOIS service of the RU center domain registration center. Provides information on IP addresses and domains around the world. Sometimes it freezes.
https://www.nic.ru/whois/?wi=1

Whois service from RosNIIROS (RIPN). Provides information for domains in the RU zone and IP addresses from the RIPE database (Europe).
http://www.ripn.net:8080/nic/whois/

Determines where the domain is hosting and also shows the site's IP address.
http://www.whoishostingthis.com

Checking whether the IP address is included in the blacklist for sending emails.
http://whatismyipaddress.com/blacklist-check
http://ru.smart-ip.net/spam-check/

Checking MX records for a domain. Checking the SMTP server for a domain. Checking IP in mailing lists.
https://mxtoolbox.com/

Search the database of registered trademarks in the USA.
http://tmsearch.uspto.gov/

Checking robots.txt files

Checks the availability of site pages for indexing by the Yandex robot.
http://webmaster.yandex.ru/robots.xml

Checks the correctness of the robots.txt file.
https://www.websiteplanet.com/webtools/robots-txt

Site inspection

Monitoring site availability. Allows you to connect one website for free with minimal verification options.
http://www.siteuptime.com

Checking site loading speed. Sends a report by email. It has paid services for monitoring site availability.
http://webo.in

Checking the loading speed of website pages.
http://www.iwebtool.com/speed_test

Checking the indexing and display of the site by search engines Visibility of the site in search engines

A service that shows keywords for a site for which it is in the TOP 20 (top twenty) Google results over time. Data on search and advertising traffic.
http://www.semrush.com/

Position in TOP50 Yandex and Google. TIC of the site and PR of the main page, presence in important directories, visibility in the top for high-frequency queries.
http://pr-cy.ru/

Checking bans and site trust level

Checking the trustworthiness of the site. A service that claims that it measures trust for Yandex (no one can check it anyway :).
http://xtool.ru/

Checking the overlay of the Panda and Penguin filters from Google. The service allows you to visually determine whether a site crashed on the dates of Panda and Penguin updates.
http://feinternational.com/website-penalty-indicator/

Checking the Page Rank of site pages (when copying a URL into the tool, you need to erase the last letter and then write it again).
http://www.prchecker.net/

Checking the site development history

Shows the history of the site's development and makes it possible to view screenshots of old pages.
http://www.archive.org/web/web.php

History of site positions in TOP Google (key phrases, pages, headings), PR indicators, TIC, Alexa Rank, number of backlinks for popular sites.
http://SavedHistory.com

SEO plugins for checking sites

SEO Doctor is an add-on for Firefox. Shows links on the page and provides a convenient interface to various SEO services.
http://www.prelovac.com/vladimir/browser-addons/seo-doctor/

SeoQuake is an add-on for Firefox. Shows the most important characteristics of the site: TIC, PR, backlinks, Alexa Rank. Works with both Google and Yandex results. Provides the ability to quickly analyze competitors.
http://www.seoquake.com/

IEContextHTML is an add-on for Internet Explorer. Checks the indexing of links in Yandex and Google, shows a list of external and internal links, and allows you to import data from web pages.

The visibility of a site in search engines depends on its location

An updated list of free proxy servers, including Russian ones.
http://www.checker.freeproxy.ru/checker/last_checked_proxies.php
http://spys.ru/proxys/ru/

An anonymous free proxy with the ability to introduce yourself from three countries. Works with Google search.
https://hide.me/en/proxy

Google search emulators in different countries by setting search parameters.
http://searchlatte.com/
http://isearchfrom.com/

Checking positions in Yandex and Google

The service allows for a deep check (up to 500) of a site’s position by region in Yandex.

Network analysis of the site, checking backlinks Analysis of backlinks

Analyzes the site's link mass, generates slices based on various criteria: link type, anchors, pages. Shows the weight of backlinks. The service is available only to registered users.
http://ahrefs.com

Checking for backlinks to the site

Checks the presence of backlinks to the site in the proposed list of URLs (up to 100 pages).
http://webmasters.ru/tools/tracker

Checking the popularity of a website in social media PlusOneChecker

Shows the number of likes (plusone) on Google+. You can immediately enter a list of URLs to be checked.
http://www.plusonechecker.net/

Facebook Graph API Explorer SharedCount

Shows popularity on Twitter, Google+, Facebook, LinkedIn, Pinterest, Delicious, StumbleUpon, Diggs.
http://sharedcount.com

Cool Social

Shows the popularity of the site's first page on Twitter, Google+, Facebook, Delicious, StumbleUpon. For Russian sites, the data is sometimes incorrect.
http://www.coolsocial.net

Social-Popularity Social Crawlytics

Scans the site and generates “Shares” reports of the main foreign social networks for these pages. Registers users through a Twitter account. You can see reports the very next day.
https://socialcrawlytics.com

Checking the site for Dr.Web viruses

Checks the given URL for suspicious code, shows loaded scripts and the results of their check.
http://vms.drweb.com/online/

Virus Total

Checks URLs for viruses with 30 scanners.
https://www.virustotal.com/#url

Alarmer

Website protection system against viruses. Scans site files daily and sends a report on their changes by email.