Rebuild 02: Mock the Dog with HTML5 markup

Before getting to the presentation layer, which is to say the CSS code that will dictate the layout and look of the Webdogs design, I have first built a rudimentary, mock-markup home page, relying on a mininmal set of HTML5 elements. (There are eight lines of embedded CSS to provide just a touch of presentation that retains the HTML document flow.) The new markup elements introduced here include the HTML5 header, footer, aside and section tags, as well as the descriptive role attribute. You can view the source code for the mock home page, or simply view this text version.

Two notes about the HTML5: First, The head tag includes an IE conditional statement with the HTML5 IE enabling script, a bit of Google Code javascript that makes older versions of Internet Explorer backward compatabile with the newly introduced HTML5 elements. Second, the HTML5 role definitions are part of the emerging WAI-ARIA standards, and offer promise of significant semantic gains in accessibility for users who rely on screen readers. The use of HTML5 role attributes at this site will advance that promise.

The purpose of the home test page is as basic as it gets. I want to make sure that the new design will display successfully when relying on a core set of HTML5 structural elements supported by current browsers. Confident of that, I can use the test page to then rebuild the actual “design” with CSS. I can then transpose that structural markup and CSS code to this site’s WordPress installation.

There are loads of HTML5 resources out there explaining how to do what is illustrated by the mock home page. I can make two recommendations: I am a huge fan of the Jeremy Keith’s HTML5 for Web Designers. Yes, it is a touch expensive for a book that is only 85 pages or so, but it is worth it. It is a clearly written, insightful while amusing summary of what HTML5 is and why you will want to adapt to it. The other recommendation is free: Mark Pilgrim’s Dive into HTML5.