I'm having trouble validating my personal site as HTML5. Most of the errors I'm getting from the W3 Validator are in the head or meta tags. For example it does not recognize a tag with 'meta charset="utf-8" /' as a valid way to specify UTF-8 encoding, has the spec changed so that this no longer works? Any help would be really appreciated! Here's a sample page that I have to work with...
head element should come before the
body element rather than being inside it. That's probably the main issue. Also check out HTML5 Boilerplate by Paul Irish and Divya Manian.
So, with the example page you give, the only issue I get when running it through the W3 Validator is that the body tag comes before the head tag. Moving the body tag below the head makes the page validate with HTML 5 absolutely fine. Either your example isn't what you meant, or you just misplaced that tag, and fixing it should validate.
It does, but I must have changed something in my site and now the 'head' element in each page trips the validator. I know this is basic, but it could even be something like an extra space that is breaking things, so it's really annoying.
Here is what I have:
<!DOCTYPE html> <body> <head> <meta charset="utf-8"> <title>Chris Finazzo - Interactive Developer</title> <script src="../js/modernizr-1.5.min.js"></script> <link rel="stylesheet" type="text/css" href="../css/style.css" /> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!--[if IE 6]> <link rel="stylesheet" type="text/css" href="../css/ie6.css" /> <![endif]--> </head> <header> <div id=main0 class="style1"><a href="index.html">Chris Finazzo</a></div> <nav id=menu class="top"> <ul> <li><a href="about.html">About</a></li> <li><a href="resume.html">Resume</a></li> <li><a href="projects.html">Projects</a></li> <li><a href="blog.html">Blog</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id=main1 class="style2">Thanks for visiting my personal website, where you can see some of my past work and other projects I am working on. I also have a blog, where I write about tech related stuff from time to time, trying to make sense of some of the cool things people are making (on the web and elsewhere). As you can see, the site is a work in-progress, as I am still making decisions regarding the overall look and feel of the site. I hope to finish this work in the near future.</div> <div><br /></div> <div id=main2 class="style2">I am committed to making my work accessible to all, so if you are using a modern, standards-compliant browser and are having difficulty seeing things, please <a href="contact.html">let me know</a>.</div> <div><br /></div> <footer> <div id=main3 class="style3">I support <a href="http://www.w3.org/">Web Standards</a>. © Christopher Finazzo 2010 All Rights Reserved</div> </footer> </body> </html>
I actually went back to Mark Pilgrim's "Dive into HTML5" to find it. Simple fix, probably was thinking too hard about what I needed to do. Learning HTML on Dreamweaver for several years will spoil you, haha. Just switched to Coda this week and I'm still learning the ins and outs of it.
Jeremy Keith's HTML5 for Web Designers really filled in some of the gaps for me when I started to move away from the Adobe stuff, well worth a read if you haven't checked it out.
You're also missing the opening "html" element before the head element.
<!DOCTYPE html> <html lang="en"> <head> meta info </head> <body>
I've since solved the problem, but you bring up an interesting point. Following your example, a language (English, Spanish, etc) declaration is not required by the spec right now. Then again, how many people really need to have multiple languages on the same page? There are a few, but not many would be my best guess.