Web Page Validators

Different Methods of Checking your web page against standards

Why use validators?

1. Help you find mistakes in your web html/css
2. Helps you learn HTML/CSS
3. Check to make sure your pages meet standards (HTML5, CSS3, Accessibility)
4. Find Broken Links

Some of the Types of Validators

• Valid HTML
  • Nu HTML 5 HTML Checker - validator.w3.org
• Valid CSS
  • Note: Always check that the HTML is valid BEFORE trying to fix your CSS
  • CSS Validation Service - jigsaw.w3.org
• Accessibility Standards
  • There are others, but the school uses webaim's wave tool
  • Web Accessibility EValuation Tool - webaim.org
• Link Checker (for broken links)
  • W3C Link Checker - validator.w3.org
• RSS Feeds
  • W3C Feed Validation Service - validator.w3.org
• Combined Validators
  • W3C has one that uses Nu HTML, CSS, Feed and possibly mobile checker in one?
  • Unicorn - W3C's Unified validator - validator.w3.org

Setting up Validator Links on your pages

• For any of these validation links, the part YOU need to CHANGE is JUST the url
  • so replace http://felitaur.com/internet/web/validators.html with YOUR URL
  • do not change ANYTHING else inside the href = " "

Nu HTML

• the URL for a specific page you want to test, for example, THIS page:
  https://validator.w3.org/nu/?doc=http://felitaur.com/internet/web/validators.html
• the part after the "doc=" is the URL you want to test, so replace it with the full URL of YOUR page (again, leave the part before the = sign ALONE)

• to make this a working validator link:

  <a href="https://validator.w3.org/nu/?doc=http://felitaur.com/internet/web/validators.html">
  HTML 5 Validator</a>
  

• And you can add an image instead of text between the <a href="...."> </a> like so:

  <a href="http://validator.w3.org/nu/?doc=http://felitaur.com/internet/web/validators.html">
  <img src="images/html_5_32x32.png" alt="HTML 5 Validation" />
  </a>
  

• HTML 5

CSS Validator

• If you want to test the CSS 3 Validity of THIS page the link would be:

  <a href="https://jigsaw.w3.org/css-validator/validator?uri=http://felitaur.com/internet/web/validators.html">
  CSS 3 Validator
  </a>
  

• CSS 3 Validator

• The W3C provides two images (one gold one blue) that you can use to make your validation link "pretty"
• NOTE: we can NOT use the "referer" version of this service, firewall prevents it

Web Acessibility EValuation Tool (WAVE)

• Interpreting the results of this tool is a bit more complicated
  • You want 0 errors
  • 0 Alerts are preferred, but may depend on what you are doing
  • read the other notes as there is no guarantee that this means you are fully ADA compliant

• The URL for the webaim results for THIS page:

  <a href="http://wave.webaim.org/report#/http://felitaur.com/internet/web/validators.html">
  Wave Accessibility Test</a>
  

• Wave Accessibility Test

Page last updated on 20210203