How to make a valid HTML code online. Validation data

Hello everyone! Today I will tell you what is site code validity, Why is it generally needed and how to check and fix it with various online servicew3C Validators (HTML, CSS). So let's start, perhaps with theories. What actually is this term in general?

Code validity is the degree of compliance of the code of your site adopted international standards, abbreviated W3C. In other words, a long time has been taken a number of general rules for writing code, which in case of no compliance with W3C standards may entail an incorrect display of your site in various computer and mobile browsers. Also in some particularly rare cases, this may entail sanctions from search engines, as well as overlapping various filters that can slow down the development of your project. But it happens very rarely, as even the Yandex itself and Google code Not 100% valid, that is, there are errors in it.

Actually, you probably had a question: why do I need to spend my own time to edit my site's code, so that he become valid if he still does not affect anything? As I already wrote above, it is necessary for your site correctly (without bugs and errors) to be displayed in various browsers. Today, as you know, more and more acquire popularity different kinds Telephone models: iPhone, Android, smartphone and others, which have already enjoyed the entire population of the Earth. Today, every third person has its own mobile phoneThrough which he can enter the network and visit your site. It is about 20-30 times more than those who have their own computer, laptop, tablet.

That is, you understood the essence. The audience of people who use mobile devices the largest on which it is necessary to navigate. And if you still remember how many over the past 10 years it happened mobile devices And how much more models continue to leave every six months, it becomes clear that such traffic (visitors) will miss very stupid. In addition, new technologies are not standing on the spot, and with the arrival of the updated HTML5 language, your old player made in 200_g may be generally, so to speak, one big kryakayber on the background of the universal network.

How to check the validity of the HTML and CSS code of your site?

On the Internet, such services abound, however, they are almost all curves, and even on english languagewhere even with will not be very easy to understand what is being discussed. But still there is one of them more normal, which not only gives an explanation, but also shows a mistake in which line of the code. So, get acquainted - jigsaw.w3.org.

Going to this site, you can check the code of your site on validity in three ways. In the "URI Check" tab, enter the address of your site, and the service will give you the entire list of errors found in the codes only on the main page! If you, like me, do not really understand the codes and when viewing your site code, you can not find that line that you need to fix, then you can simply download your CSS style file (site design) in the "Check Uploaded File" tab .

In this case, you will already know what file you need to go. By the way, it is also easier to do. If you have a site on some engine, for example, you will be enough to go to the admint of the blog in " appearance»" Editor "select a file, for example, header (header.php), copy the code and paste it on the service in the" Checking Text "tab. I personally checked my blog.

So, on my site personally found 44 errors, which is very few compared to other sites. By the way, Yandex Uncle has 155 mistakes, ah-ah. Well, okay, we will not be about sad.

To make it easier for you to correct inaccuracy data in codes, let's show you personally a few examples on my blog. To begin with, pay attention to Line 26. This indicates the line of code. To find it faster, place this code that you inserted in the jigsaw.w3.org service in any HTML editor displays the lading inscriptions.

Note that there is always some tag in red in the code. This is the place where you need to search and enter the code. Most often it should be removed at all, or add missing tags to it. Also in the title and at the bottom of the inscription there are tips in English, what needs to be done to correct the error.

Example 1. . Here you need to remove quotes allocated in red <> . They should not be inside the code, where they are already there at the beginning and at the end.

Example 2. . At the end of the code lacks a closing tag /> . Note, if the current code is another line, too, with an unlocked tag, then it is also necessary to close, otherwise the error does not disappear.

Example 3. . Here you just need to remove the repeating line: " href \u003d ""> .

By the way, the errors should be corrected primarily allocated by the cross, and not exclamation familiarSince these mistakes are not so important. Also before correcting something, do, since with the most likely you can break it. After fully cleaned the code, I recommend to see how your site is displayed in different browsers On different platforms of PCs and phones. With this you can help free online service Browsershots.org.

How else can you quickly check the validity of the HTML and CSS code of your site?

If you were little jigsaw.w3.org, then here you have another couple of additional services to test validity hTML code Site: www.validome.org, watson.addy.com,

In conclusion, I want to say that if you have found a couple of mistakes, you can not worry about this, as it is not so important today. In general, it has long been experiments on this topic, of which it became clear that the bad code does not seek to issue a site in the search. But, alas, the Internet is this environment where everything quickly changes. Today it may not matter, and tomorrow Yandex will twist this additional algorithm and position in the search can be asked (fall). So, if you have too much time to pick up in the code of your site, then it is better to do this now.

Hello everyone!

HTML code validation is needed for, because search robots see an exceptionally html code. For this reason, the site code is desirable to bring in full order. This will help us special online services that perform code check and indicate specifically for errors.

One of these services is Validator Validator.w3.org, it is probably the best. It is completely in English, so some may have problems when working, but you do not be afraid: the validator will show you and the line number, and the error itself.

Valid code is a code that meets all standards..

For the lesson, you need the following material:

The above-mentioned online service conducts an inspection of the HTML code online on the entire site entirely. You just need to specify the domain of your site and click the "Check" button, so you start checking the HTML code of the site.

Also, the validator provides one very interesting opportunity - checking the site files from the local computer. In my opinion, this tool will be useful to those who make websites to order. Before passing an order, you need to double everything, because you want your work to be always happy. You can check the files by clicking on the "Validate by File Upload" tab:

How to fix errors in HTML code?

The Validator W3C service indicated me two mistakes and made 8 warnings. I will try to fix them and at one show you how it is done.

Correct the error "Element Style Not Allowed As Child of Element Div in This Context. SUPPRESSING FURTHER ERRORS FROM This SUBTREE.) " This error tells me that in the HTML code, namely in the tag

You do not need to prescribe styles. Consequently, styles that are registered in this block
You need to transfer to the STYLE.CSS file and all.

The validator also indicates where the error is:


Thus, you can find and correct the errors of the HTML code. But the sites consist not only from the markup code, but also CSS, so we also conduct a test of cascading web resource styles.

CSS validation code for validity

In the W3C Validator, you can also check the CSS code for validity. You can do this at this link. The principle of operation is the same: specify the URL, or select the file on the computer and click on the "Check" button.

Unlike the same HTML validator, CSS Validator in Russian.

CSS errors and warnings

When checking CSS code for validity, the service issues a large number of Errors and warnings. I got 23 errors and as many as 281 warning. At first glance it may seem that it can even scare, however, most of these errors and warnings are shown only due to the fact that the service does not know certain properties that are used for different browsers.

In my case, most of the warnings from 281 are CSS properties for a normal display in various browsers:

The service is positioning similar tags as "Unknown Expansion of the Supplier". Therefore, if when checking your CSS files, you see a large number of such errors, do not be afraid. Everything is fine.

I will not list the most common errors and ways to eliminate them, since all solutions can be different and you need to watch the HTML code itself to understand what's the matter.

If you can not eliminate some error, then share the problem in the comments to the lesson, you can find a solution together.

I hope that the lessons who went out throughout this week were useful for you and helped in solving certain problems.

Well, now, goodbye!

Previous article
Next article

Hello, dear friends! Glad to see you on my blog! Today it will be about hTML validity On the site as a whole and its individual pages. Validity is a correspondence code to certain standards. The WORLD WIDE WEB (W3C) consortium works on the development of web standards - this is an international community in which organizations, staff members and the public.

The mission of the consortium is to reveal the full potential of the World Wide Web, developing and implementing protocols and guidelines providing long-term network growth.

On the official W3C website, very useful online tools for webmasters are provided, one of them is the validator - this free service, allowing you to check the site commitment to modern web standards.

Unfortunately, the service is completely in English, but if you disassemble in the development and layout, you will certainly understand its essence and promise 😉

So, on the main page there are three tabs:

  1. Validate by URI - check the specified URL;
  2. Validate by file Upload - checking the downloaded file;
  3. Validate by Direct Input - check by direct input source code.

To start the analyzer, you need to switch to the desired tab, as an example, I will consider checking the URL. Under the link more Options, additional options are hidden, click on it to access the settings:

  • Character Encoding - symbol encoding. WordPress uses UTF-8, but you can leave the standard "Detect Automatically" value for automatic definition encoding.
  • Document Type is the type of document (HTML, XHTML, SVG, etc.). Check the ONLY IF Missing check box if the document type is not specified on the page and you need to specify it manually for verification.
  • List Messages SequentIally - display errors and warnings by a consistent list;
  • Group Error Messages by Type - Group errors and type warnings;
  • Show Source - Show source;
  • Show outline - show the structure of the document;
  • Clean Up Markup with HTML TIDY - Cleaning markup with HTML-TIDY;
  • Validate Error Pages - Check pages with errors, for example, with 404 errors;
  • Verbose Output - detailed output. To be honest, I did not notice the difference when you turn on this option, if you know what it is responsible - share in the comments, I will be very grateful.

When all settings are set, press the Check button to start the HTML validator. If the document does not have errors, the inscription will appear:

Document checking completed. No Errors or Warnings To Show.

Translated into Russian, this means: "The verification of the document is completed. Errors or warnings are not found. " Excellent!

In the event that the document fails, see simple inscription About its completion:

And of course a list of messages that contain error information and warnings with explanations, as well as links to specific lines of documents, but only if the SHOW SOURCE option has been enabled.

The screenshot below shows a fragment of verification main page Yandex. It is strange to see it, I did not even expect, because Yandex myself takes part in the development of W3C standards ... Well, okay, it is really difficult to comply with absolutely all the standards, especially for such a large portal.

At the beginning of its path, the free webmaster blog contained a lot of mistakes and warnings. As I studied, I managed to reduce their number, and over time and get rid at all. In hencefight, I will stick to the W3C standards, although some plugins add a spoonful to the honey barrel ... Time will tell!

So why do we valid code? Validation of web documents is an important step that can significantly help improve and ensure their quality, as well as save a lot of time and money. Some experts claim that the correct code can be favorable to influence in search results! Check your website and tell us about the results!

Hello. Immediately answer your question: Is it worth reading this lesson? Go to a very useful and free service, take the address of your site and, if you see that there are errors on your site, then it's worth reading a lesson. Examples of error display using this online validator:

There are no similar errors on my blog now, I got rid of them (there were more than 70 errors and more than 80 warnings). To make clarity, I will tell you what a valid code and why it is necessary for us.

Valid code is a code that matches standards.

You can check HTML, CSS on validity, all sorts of microns and more. Today I will tell about validity in HTML.

  • The valid code is optional, but the number of errors should be minimal, otherwise your site will not be crossbruster. The code validity is needed in primarily to ensure that your site is displayed correctly in all browsers.
  • Search robots "speak" with your site on hTML languageTherefore, it is important to give a clear and clear content on the site with all the "closed tags" and so on.
  • HTML validity affects SEO, but rather slightly (if, of course, you do not have hundreds, or even thousands of errors). I recommend to read interesting observations of the devise "The impact of HTML quality on their ranking."
  • When I did on my site a valid code, I found and corrected my stupid errors (repetition tags, missed letter, etc.).
  • It is not worthwing to "tear yourself * apo", if some error is difficult to fix, or its correction will bring the functionality of the site. The main thing is to be convenient to the user.

Below I will scan the basic errors to pointed the validator. If suddenly, the list below will not be your error, enter it in the comments, try to deal together and I will add a solution to this problem in this lesson. By the way, yes, the errors that the W3C validator indicates here:

In each error there is a hint - this is the line number in the source code page, and it can already be determined from it about which topic file is located. The source code of the page is viewed using Ctrl + U (in the main browsers).

Before you start work, make backup Template of your site.

Also to simplify the location of errors in the source code, you can use HTML Validator for Mozilla Firefox. By setting it by clicking on the source code of the page, you will see the same errors that indicates the validator.w3.org service. By clicking on the name of the error (in the lower left corner), you will automatically transfer to that line where this non-valid code is located.

Finding errors in HTML using W3C Validator and fix them

Look in your list below your error and click on it, you will automatically "scroll" where it is necessary.

1. NO SPACE BETWEEN ATTRIBUTS.

... Rel \u003d "shortcut icon" href \u003d "http://arbero.ru/favicon.ico"; Type \u003d "Image / X-Icon" simply remove the "semicolon".

2. The Width Attribute on the TD Element Is Obsolete. Use CSS Instead.

tD Valign \u003d "center" width \u003d "80" height \u003d "80"\u003e

Similar converting to mind

tD Style \u003d "Align: Center; width: 80; Height: 80;"\u003e

3. An IMG Element Must Have An Alt Attribute, Except Under Certain Conditions. For Details, Consult Guidance On Providing Text Alternatives for Images.

One of the most frequent mistakes. Just not enough alternative text for the picture. We prescribe a tag alt.

4. Section Lacks Heading. Consider using H2-H6 Elements To Add Identifying Headings To All Sections.

section id \u003d "Comments"\u003e

Inside the section, the section must contain something from the H2-H6 tags, if there are no, simply rename the word section on the div

5. The Hgroup Element Is Obsolete. To Mark Up Subheadings, Consider Either Just Putting The Subheading INTO A P Element After The H1-H6 Element Containing The Main Heading,

or Else Putting The H1-H6 Element Containing The Main Heading, But Separated from the main heading by Punctuation and / or Within, For example, Element with Differentiated Styling. To Group Headings and Subheadings, Alternative Titles, Or Taglines, Consider using the Header or Div Elements.

Similar to the previous item. Just change the phrase hgroup on DIV. You can use the tool "Find / Replace All" in text editorTo speed up similar processes.

6. Element "Noindex" undefined

To noindex tag Became a valid, write it in the form of comment, that is, so:

Neesindeximed

7. END TAG FOR ELEMENT "DIV" WHICH IS NOT OPEN

Closing Div Tag Excess. We remove it.

8. Document Type Does Not Allow Element "Li" Here; Missing One of "UL", "OL", "MENU", "DIR" START-TAG

Incorrect use of the tag "Li": There is no "UL", "OL" tag, etc. Check.

9. END TAG FOR "DIV" Omitted, But Omittag No Was Specified

Not enough closing Div tag.

10. THERE IS NO Attribute "Border"

alt \u003d "" width \u003d "1" height \u003d "1" border \u003d "0" /\u003e

Just remove the phrase Border \u003d "0".

11. Character "<" is the first character of a delimiter but occurred as data

Do not use the tag "<" перед обычными словами, используйте лучше разные кавычки.

12. SAW "WHEN EXPECTION AN ATTRIBUTE NAME. PROBABLE CAUSE: \u003d Missing Immediately Before.

Excess quotes, remove it.

13. The Align Attribute on the IMG Element Is Obsolete. Use CSS Instead.

Do not use the ALIGN value inside the IMG tag. Write it separately, in this form:

there is a picture (img src)

14. Bad Value for Attribute Href On Element Link: Illegal Character in Path Segment: Not A URL Code Point.

Conclusion

If you have some error on the site, which is not in this list - write in the comments. We'll figure it out, and I will add an article. I repeat, if some error fails to be fixed, you should not bother.

I have a mistake on my blog (although yesterday for some reason I was without errors):

The Text Content of Element Script WAS NOT IN THE REQUIRED Format: Expected Space, Tab, NewLine, Or Slash But Found< instead.

If you know how to fix it, I will be grateful. I am a little perfectionist. 🙂

Will you do HTML site code valid?

I wish you to get a valid HTML code on your site, the notification of which looks like this:

P.S. Do you often overload your body? Then you need a detoxification program. Restore the strength and energy balance.

Checks HTML code as specified by reference to the page and simply in the form of a downloaded file or copied text. Gives a list of comments with recommendations for their correction.
http://validator.w3.org/

CSS Check (CSS Validator)

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

Checking ribbons (feed) rss and atom

Checks the correct operation of the FIDS RSS and ATOM.
http://validator.w3.org/feed/

Spell check on web page

Highlights errors on a specified URL page.
http://webmaster.yandex.ru/spellcheck.xml

Shows errors in the text copied to the check window.
http://api.yandex.ru/speller/

Verification of the structure of the web page

Shows the structure of the web page. Relevant to verify HTML5 documents. Incorrectly displays Cyrillic (:.
http://gsnedders.html5.org/outliner/

Content check for uniqueness

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

Checks the uniqueness of the text entered into the form. In the free version it is possible to expect results.
http://www.miratools.ru/promo.aspx

Checks the uniqueness of both the entered text and the text according to a given URL, shows the level of uniqueness in percent. Has its own verification algorithm.
http://content-watch.ru.

Desktop programs for checking the unique content of the content from the stock exchange system. Work long, but qualitatively. 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.

Check CMS Site

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

Site Usability Check for various user groups

Verification of accessibility from mobile devices

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

Check the convenience of the site for phones from Google.
https://www.google.com/webmasters/tools/mobile-friendly/

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

Website emulator exit from a mobile phone. Shows the site through the eyes of the selected model.
http://www.mobilephoneemulator.com/

Verification of accessibility for people with disabilities

Page check service for visually impaired. Available on-lin and in the form of a plug-in for Firefox.
http://wave.webaim.org/

Viewing the content of the site by the eyes of the search robot

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

Distribution of Lynx text browser for Win32 systems. Before use, you need to edit Lynx.bat, specifying the path to the directory with Lynx.
http://www.fdisk.com/doslynx/lynxport.htm.

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

Check the site reference structure

Check broken links

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

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

Checking overgrinking and page titles

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

Check the reference structure and weight of the internal pages

The program scans the site, builds the internal reference matrix, adds external (incoming) references from the specified URLs and, based on this data, calculates the internal weights of the site pages. The program can be used to find external (outgoing) links to list the URL of the site pages.

Checking server response codes, visibility of the site by search robots, site specifications

Check HTTP headers and server response, visibility pages for robots

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

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

Shows the volumes and contents of the data transmitted when page loading.
http://www.websiteoptimization.com/services/analyze/

Checks the redirects, using the Canonical attribute, meta tags, some aspects of the site security. Gives recommendations for improving page download.
http://www.seositecheckup.com.

Checking Domain Information and IP Address

WHOIS-SERVICE OF THE DOMUENK CENTER RU CENTER. Gives information on IP addresses and domains around the world. Sometimes freezes.
https://www.nic.ru/whois/?wi\u003d1

WHOIS service from Russia (RIPN). Gives information for domains in the RU zone and IP addresses from the RIPE base (Europe).
http://www.ripn.net:8080/nic/whois/

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

Check is not enabled if the IP address is included in the black list for email distribution.
http://whatismyiPaddress.com/blacklist-check.
http://ru.smart-ip.net/spam-check/

Check MX records for a domain. Check SMTP server for a domain. Verify IP in black lists for mailing.
https://mxtoolbox.com/

Search based on registered trademarks in the United States.
http://tmsearch.uspto.gov/

Checking Robots.txt files

Checks accessibility to indexing site pages 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 the availability of the site. It gives the opportunity to connect one site for free with minimal check options.
http://www.siteuptime.com.

Checking the site download speed. Sends an email report. It has paid site availability monitoring services.
http://webo.in

Check the download speed of the site pages.
http://www.iwebtool.com/speed_test

Check indexing and displaying the site by search engines

Site visibility in search engines

Service showing keywords for the site for which it is in the top 20 (first twenty) of the issuance of Google in time. Search and advertising traffic data.
http://www.semrush.com/

Position in the top50 Yandex and Google. Titz site and PR of the main page, the presence in important directories, visibility in the top of the RF requests.
http://pr-cy.ru/

Check bans and confidence in the site

Checking the trust site. The service claiming that it measures the trust for Yandex (to check anyway no one can :).
http://xtool.ru/

Checking the overlay filters Panda and Penguin from Google. The service allows you to visually determine whether the site has fallen into the dates of the update of Panda and Penguin.
http://feinternational.com/website-penalty-indicator/

Check page Rank Pages of the site (when copying the URL to the tool you need to erase the last letter and then write anew).
http://www.prchecker.net/

Checking the history of the site development

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

History of site positions in Google Top (key phrases, pages, headers), PR, TIC indicators, Alexa Rank, Numbers backlinks for popular sites.
http://savedhistory.com.

SEO plugins for checking sites

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

SEOQUAKE - addition to Firefox. Shows the most important characteristics of the site: TIC, PR, backlinks, Alexa Rank. It works both with the issuance of Google and the issuance of Yandex. It makes it possible to quickly analyze competitors.
http://www.seoquake.com/

IecontextHTHTML - addition to Internet Explorer. Checks the indexation of links to Yandex and Google, shows a list of external and internal links, allows you to import data from web pages.

The visibility of the site in the townships in depends on the location of the location

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

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 the search parameters.
http://searchlatte.com/
http://isearchfrom.com/

Checking positions in Yandex and Google

The service makes it possible to be deeply verified (up to 500) positions of the site by regions in Yandex.

Network Analysis of the site, checking backlinks

Analysis of backlinks

Exercising an analysis of the reference weight of the site, generates sections on various criteria: type of reference, antkori, pages. Shows the weight of backlinks. The service is available only for registered users.
http://achrefs.com.

Checking pouring backlinks to the site

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

Check the popularity of the site in social media

PlusoneChecker

Shows the number of Likes (Plusone) on Google+. You can enter a list of verified URLs.
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 first page of the site 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 forms reports "Shares" of the main foreign social networks for these pages. Registers users through a twitter acout. Reports can be seen the next day.
https://socialcrawlytics.com

Checking the site for viruses

Dr.Web.

Checks the specified URL into a suspicious code, shows loadable scripts and the results of their verification.
http://vms.drweb.com/online/

Virus Total

Checks the URL to the viruses of 30 scanners.
https://www.virustotal.com/#url

Alarmer

Site protection system from viruses. Daily scans the site files and sends a report on their email changes.