Firstly, all go read https://developer.mozilla.org/en/Sections_and_Outlines_of_an_HTML5_document and http://www.w3.org/TR/2010/WD-html5-20100624/ for gods sake.. He WILL smite you for not reading them before starting.
You could also do with reading http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml
Yes I’m a stickler for standards but we would all descend into chaos if there weren’t standards so its a good place to start (And you’ll be pleasantly surprised how much you learn from a specification)
But when I see this:
I die a little inside, I *actually* saw the above and my mind vomited for 5 reasons immediately, that’s a very much shortened down version of what I physically saw (What is seen cannot be unseen…)
1. <section> used out of context, its not in the semantic place it should be
2. There are inline styles for major elements on the page
3. I couldn’t see any reason the particular links I saw needed to be in that order so why the hell are they using <ol> instead of <ul>
4. I couldn’t see a <hgroup> element for those headers or any <time> elements on the comments meaning that it makes no sense to search engines or prying eyes like mine..
5. Where the ARIA is my ARIA? Tsk tsk, accessibility people! http://www.w3.org/TR/wai-aria/roles#role_definitions
What I expected to see was this:
The above makes me feel giddy, excited even! But! It doesn’t follow one of Googles style guidelines, but it doesn’t work anyway.. Its not always correct so I’ve left the closing tags in.
The reason I like the above is because it makes semantic sense (like I was reading a book, I have the main article, some extra stuff on the side and if I wanted to dig deeper I can see that the roles match what I’m looking at to confirm I’m reading the right part of the page (works the same with search engines, they don’t know what <div id=”MostImportantPartOfMyPage”> is..)
it doesn’t take too much longer to get this right and the only caveat is getting the actual tags right depending on the context they’re needed!
For instance, my home page has a number of articles so would I want a whole bunch of article tags on there? no, not really because that doesn’t make sense, the page should be an <article> (but for gods sake not as the wrapper, <div> is still the dogs nuts for that) and each post should be a <section>, as in a section of the page.. Makes sense now huh?
In each section you should have a <hgroup> unless you only have the one heading otherwise its not a group and its a singular entity (poor lonely header..) so get wrapping!
Your <hgroup> be followed with your content (duh..) or if not, the only other element I would consider acceptable here is <time> to mark the publication date/time.
After your content you should have a <footer> element which contains your comments and any other meta information you want attached to each section of content.
Then you should have a perfectly semantic page… get cracking! I’ll do another post on proper JavaScript as a continuation of why !! pisses me off.. http://jsfiddle.net/dmackintosh88/7cRyr/
