How To Validate HTML, JavaScript, CSS On Web Pages with W3C Validator? – POFTUT

How To Validate HTML, JavaScript, CSS On Web Pages with W3C Validator?


Validating web pages and contents like HTML, JavaScript, and CSS are important for web sites and application owners. As they are popular technologies they have a lot of different implementations where they can be a bit different from the standard. W3C provides a validator to check and provide feedback about the given web page.

What is W3C (World Wide Web Consortium)?

World Wide Web Consortium (W3C) is an international community where its members, staff try to drive Web standards forward. The main standard W3C working is HTML which is created by Tim Berners-Lee. As a standardizing entity, W3C provides standards and tools to set and check HTML. W3C provides HTML, JavaScrip and CSS validator for web pages.

W3C Validator

The W3C Markup Validator is provided from the Markup Validation Service page. We can see that the W3C Markup Validation service provides some options about delivering web pages and the validation configuration.

https://validator.w3.org/

W3C Validator
W3C Validator Web Page

Validation Delivery Ways/Methods

From the screenshot, we can see that a web page can be delivered in 3 different ways.

Validate By URI/URL

Validate by URI will accept the URI or URL of the web page on the internet. Then we will click to the Check button. This delivery method is also the default and most popular way.  In this example, we will check the www.poftut.com web page which is Poftut’s home page.

Validate By URI/URL
Validate By URI/URL

Validate By File Upload

We can also deliver the web page from the local system by uploading it to the Markup Validation Service. We will select the Validate by File Upload and then click to the check. Keep in mind that some Internet Explorer versions may not work with this method.

Validate By File Upload
Validate By File Upload

Validate By Direct Input

We can also provide the Markup Code (HTML, JavaScript, CSS) directly to the text editor of the Markup Validation Service. We will use Validate by Direct Input like below.

Validate By Direct Input
Validate By Direct Input

HTML/Markup Validation Options

We have learned the methods to validate HTML/Markup. But there are some options that can be used during validation. We can list these options by clicking to the More Options like below.

HTML/Markup Validation Options
HTML/Markup Validation Options
  • Character Encoding will be detected automatically by default but alternatively, we can select from the list explicitly.
  • Document Type will be detected automatically by default but we can select from the list lie HTML 1.0, XHTML, etc.
  • List Messages Sequentially will list error/warning findings in an ordered list manner according to the finding location.
  • Group Error Messages by Type will group error/warning findings according to the type.
  • Show Source will list the source code.
  • Show Outline
  • Clean up Markup with HTML-Tidy
  • Validate error pages will validate the event an error page is returned.
  • Verbose Output will provide a more detailed output.
HTML/Markup Validation Options
HTML/Markup Validation Options

Benefits Of Validating Site According To W3C

Help Improve Rankings In Search Engines Like Google, Bing, Yandex

Search Engines use a different metric in order to rank between web sites and web pages. One metric is the HTML/JavaScript/CSS validity of the page it ranks. If the Markup (HTML/JavaScript/CSS) has fewer errors or error-free it will rank the given web page higher and better. So validating web pages and sites for markup will provide some hints and ways for higher ranking in search engines like Google, Bing, Yandex.

LEARN MORE  Linux File System and Directories

Help Learning Best Practices

Standards are defined also according to the best practices for the given area. HTML standards are also defined with best practices and updated according to these best practices over time. We can better learn the best practices by testing existing pages or creating some HTML code and validating against these HTML standards and best practices.

Improve Website Visitor Experience

Standards are also defined as making the user experience better. In the end, every visitor or user will benefit from a valid web site and web page with a better experience. With valid web sites and pages, the visitor will see everything perfectly, smoothly as expected by the web site/page owner.

Make Website Browser Friendly

Well in the previous part we have talked about the user’s experience. The web site or page is shown to the visitor by a browser. There are different browsers the users and visitors are using. The markup code (HTML, JavaScript, CSS) will be interpreted and displayed by these browsers. Browsers also try to implement markup standards strictly in general. Making our web site/page will make the web site/page browser friendly.

Multiple Device (Tablet, Phone, Embedded) Accessibility

Today a lot of different types of end-user devices exist. These devices generally have different features, screen sizes, capabilities where it may create some incompatibilities. A validated web site/page will be shown in these different types of devices properly.

Alternative Validators

As the W3C is the markup standard creator for languages like HTML, JavaScript, CSS, etc. it provides the most proper markup validator. But there are alternative markup validators to the W3C version which can provide some extra features. Here are some of them.

LEARN MORE  What Is index.html? How To Create and Use index.html?

Dr. Watson

Dr. Watson is a program error debugger for Windows operating system but is provides some markup validation capabilities which is used with the following validator.

Dr. Watson
Dr. Watson
  • Analyze HTML syntax
  • Verify regular links
  • Verify image links
  • Generate word counts
  • Spell-check non-HTML text
  • Compute estimated download speeds
  • check search engine compatibility
  • Check site link popularity

HTML Validator (Firefox Plugin)

HTML Validator is a Firefox plugin where it can only use with Mozilla Firefox browsers. It can be installed from the following link.

https://addons.mozilla.org/en-US/firefox/addon/html-validator/

HTML Validator (Firefox Plugin)
HTML Validator (Firefox Plugin)

Firebug

Firebug is another popular plugin used by web developers as a browser plugin. Firebug can also validate HTML, CSS, DOM, JavaScript, and provides detailed error and warnings about validated page. Firebug can be installed from the following links.

https://chrome.google.com/webstore/detail/firebug-lite-for-google-c/ehemiojjcpldeipjhjkepfdaohajpbdo?hl=en

https://blog.getfirebug.com/

Firebug
Firebug

CSS HTML Validator

CSS HTML validator is a Windows application which check the HTML, CSS, SEO, accessibility, links, and more on a web page and web site. It is paid applications that have Trial, Standard, Professional, and Enterprise Editions.

CSS HTML validator
CSS HTML validator

Total Validator

Total validator is free and paid web site checker about the HTML, CSS, broken links, spelling errors. It is a cross-platform application where it can work on Windows, Linux, and MacOSX without a problem.

Total Validator
Total Validator

Leave a Comment