EZ HTML5 & CSS3 Validation

Here are some bits of code you need to keep the W3.org validator and your instructor happy.

Use the Full Featured Skeleton

The "full featured" HTML skeleton will have few more tags than the basics, make sure yours looks similar to the following.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>

The highlights include...

  • the DOCTYPE line to open the document, make sure it starts as the very first character of your document
  • the lang attribute in the opening html tag, the polite thing to do for your browser
  • the meta tag declaring the charset (character set) comes right after the opening head tag to keep IE happy

Remember that...

  • Information in the head section is not seen by your user, it contains other information including links to style sheets and your charset
  • Content between the body tags is seen by your user
  • NOTHING goes between the closing head tag and the opening body tag

Add These Links to w3.org Validators

These links will request the w3.org validators to check out your code and report. The html validator link is the same as the one for xHTML pages, the CSS3 validator link differs slightly from the default (CSS 2.1) validator link. They need to be placed on your page.

<!-- Validator code starts here -->
<p>Validate:
<a href="http://validator.w3.org/check?uri=referer">HTML5</a> |
<a href="http://jigsaw.w3.org/css-validator/check?uri=referer&profile=css3&usermedium=all&warning=1&vextwarning=true&lang=en">CSS3</a> </p>
<!-- Validator code ends here -->

The validators are very useful for troubleshooting your code as well as making sure it is "proper," it is worth getting to know them. The w3.org also has other "checkers" including a very nice link checker.