HTML5 Validation Tips


Common Validation Errors:

  1. Tip: Fix one error at a time. Sometimes fixing one error will resolve other errors.

  2. Warning. You will likely end up with one warning for "HTML5 Conformance Checker". This is expected - you do not have to fix this warning.

  3. DOCTYPE. Use the HTML document type for HTML5 (This should be the first line of code in your HTML documents):

    <!DOCTYPE HTML>

  4. Character Set. Use the character set as utf-8 (in the head):

    <meta charset="utf-8">

  5. HTML, HEAD, and BODY. Each HTML web page must contain a single set of opening and closing tags for html, head, and body. That is, each page should have one, and only one of the following tags:

    <!DOCTYPE HTML>
    <head>
    </head>
    <body>
    </body>
    </html>

  6. Alt Parameter. Every image tag must have an "alt" parameter. The alt parameter contains alternative text to describe the image.

    For example, <img src="mylogo.png" alt="This is my logo">

  7. Nesting Tags. Close tags in the opposite order from which you open them.

    <div> <strong> <a href="homepage.html"> Home </a> </strong> </div>

  8. Tag Pairs. Make sure that all open tags requiring a closing tag, have one. There are only a few tags that do not require a closing tag, like the <img> and <br> tags.

  9. Frameborder attribute on iframe (youtube video). If you receive "The frameborder attribute on the iframe element is obsolete. Use CSS instead." error, simply remove the frameborder="0" part and use CSS to style it.

    …://www.youtube.com/embed/VBkZ2GHQdoE" frameborder="0" allowfullscreen></iframe>

  10. Align Attribute on iframe (youtube video). If you receive "The align attribute on the iframe element is obsolete. Use CSS instead." error, simply remove the align=left part and use CSS to style it.

    …ube.com/embed/kaxCRnZ_CLg" frameborder="0" allowfullscreen align=left></iframe>

  11. The center element is obsolete. If you used the <center> </center> tags to center text, image, or a div, you will need to remove it and use CSS instead. Here is a helpful resource for how to center things using CSS.