jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.
jsperf.com URLs are mirrored at the same path, e.g:
https://jsperf.com/negative-modulo/2
Can be accessed at:
https://jsperf.app/negative-modulo/2
Testing the performance effect of switching the order of expressions.
<a id="top" style="display:none"></a>
<nav class="toplevel clearfix">
<div class="mini">
<a href="http://www.smashingmagazine.com/" style="border: none;"><img src="http://media.smashingmagazine.com/themes/smashingv4/images/logo.png" alt="Smashing Magazine" title="Jump to the front page"></a>
<select name="network" id="networkselection">
<option value="network" selected="selected">- select -</option>
<option value="http://www.smashingmagazine.com/books/">Books</option>
<option value="http://www.smashingmagazine.com/ebooks/">eBooks</option>
<option value="http://jobs.smashingmagazine.com/">Job Board</option>
<option value="https://shop.smashingmagazine.com/">Shop</option>
</select>
</div>
<ul class="network clearfix">
<li class="current"><a href="http://www.smashingmagazine.com/" style="border: none;"><img src="http://media.smashingmagazine.com/themes/smashingv4/images/logo.png" alt="Smashing Magazine" title="Jump to the front page"></a></li>
<li><a href="http://www.smashingmagazine.com/books/">Books</a></li>
<li><a href="http://www.smashingmagazine.com/ebooks/">eBooks</a></li>
<li><a href="http://jobs.smashingmagazine.com/">Job Board</a></li>
<li><a href="https://shop.smashingmagazine.com/">Shop</a></li>
</ul>
<ul class="channels">
<li class="rss"><a href="http://rss1.smashingmagazine.com/feed/" title="Subscribe to our RSS-feed (1100K)">RSS</a></li>
<li class="facebook"><a href="http://www.facebook.com/smashmag" title="Join our Facebook page! (99k)">Facebook</a></li>
<li class="twitter"><a href="http://twitter.com/smashingmag" title="Follow us on Twitter! (612K)">Twitter</a></li>
<li class="newsletter"><a href="http://www.smashingmagazine.com/the-smashing-newsletter/" title="Subscribe to our Email Newsletter (107K)">Newsletter</a></li>
</ul>
</nav>
<div id="container">
<div class="fluid clearfix">
<div class="grid clearfix">
<div class="mini-search wp-search-form">
<form id="search" method="get" action="http://www.smashingmagazine.com/search-results/" target="_top">
<input name="q" type="text" placeholder="e.g. JavaScript">
<button class="search_submit" type="submit"><span class="first-type">Search</span><span class="last-type">Go!</span></button>
<input type="hidden" name="cx" value="partner-pub-6779860845561969:5884617103">
<input type="hidden" name="cof" value="FORID:10">
<input type="hidden" name="ie" value="UTF-8">
</form>
</div>
<div class="col sidebar">
<nav class="sections">
<div class="mini">
<select name="sections" id="subsection-select">
<option value="network">- select -</option>
<optgroup label="Smashing Categories">
<option value="http://www.smashingmagazine.com/books/">Books</option>
<option value="http://www.smashingmagazine.com/ebooks/">eBooks</option>
<option value="http://jobs.smashingmagazine.com/">Job Board</option>
<option value="https://shop.smashingmagazine.com/">Shop</option>
</optgroup>
<optgroup label="Smashing Sections">
<option selected="selected" value="http://coding.smashingmagazine.com/">Coding</option>
<option value="http://www.smashingmagazine.com/category/design/">Design</option>
<option value="http://mobile.smashingmagazine.com">Mobile</option>
<option value="http://www.smashingmagazine.com/category/graphics/">Graphics</option>
<option value="http://uxdesign.smashingmagazine.com">UX Design</option>
<option value="http://wp.smashingmagazine.com">WordPress</option>
</optgroup>
</select>
</div>
<ul class="clearfix">
<li class="coding current">
<a href="http://coding.smashingmagazine.com">Coding</a>
<ul>
<li><a href="http://coding.smashingmagazine.com/tag/css/">CSS</a></li>
<li><a href="http://coding.smashingmagazine.com/tag/html/">HTML</a></li>
<li><a href="http://coding.smashingmagazine.com/tag/javascript/">JavaScript</a></li>
<li><a href="http://coding.smashingmagazine.com/tag/techniques/">Techniques</a></li>
</ul>
</li>
<li class="design">
<a href="http://www.smashingmagazine.com/category/design/">Design</a>
<ul>
<li><a href="http://www.smashingmagazine.com/tag/web-design/">Web Design</a></li>
<li><a href="http://www.smashingmagazine.com/tag/typography/">Typography</a></li>
<li><a href="http://www.smashingmagazine.com/tag/inspiration/">Inspiration</a></li>
<li><a href="http://www.smashingmagazine.com/tag/business/">Business</a></li>
</ul>
</li>
<li class="community">
<a href="http://mobile.smashingmagazine.com">Mobile</a>
<ul>
<li><a href="http://mobile.smashingmagazine.com/tag/responsive-design/">Responsive</a></li>
<li><a href="http://mobile.smashingmagazine.com/tag/ios/">iPhone & iPad</a></li>
<li><a href="http://mobile.smashingmagazine.com/tag/android/">Android</a></li>
<li><a href="http://mobile.smashingmagazine.com/tag/design-patterns/">Design Patterns</a></li>
</ul>
</li>
<li class="graphics">
<a href="http://www.smashingmagazine.com/category/graphics/">Graphics</a>
<ul>
<li><a href="http://www.smashingmagazine.com/tag/photoshop/">Photoshop</a></li>
<li><a href="http://www.smashingmagazine.com/tag/illustrator/">Illustrator</a></li>
<li><a href="http://www.smashingmagazine.com/tag/wallpapers/">Wallpapers</a></li>
<li><a href="http://www.smashingmagazine.com/tag/freebies/">Freebies</a></li>
</ul>
</li>
<li class="ux">
<a href="http://uxdesign.smashingmagazine.com">UX Design</a>
<ul>
<li><a href="http://uxdesign.smashingmagazine.com/tag/usability/">Usability</a></li>
<li><a href="http://uxdesign.smashingmagazine.com/tag/user-experience/">User Experience</a></li>
<li><a href="http://uxdesign.smashingmagazine.com/tag/ui/">UI Design</a></li>
<li><a href="http://uxdesign.smashingmagazine.com/tag/e-commerce/">E-Commerce</a></li>
</ul>
</li>
<li class="wordpress">
<a href="http://wp.smashingmagazine.com" class="clearfix"><span class="short">WP</span><span class="long"><span>Word</span><span>Press</span></span></a>
<ul>
<li><a href="http://wp.smashingmagazine.com/tag/essentials/">Essentials</a></li>
<li><a href="http://wp.smashingmagazine.com/tag/techniques/">Techniques</a></li>
<li><a href="http://wp.smashingmagazine.com/tag/plugins/">Plugins</a></li>
<li><a href="http://wp.smashingmagazine.com/tag/themes/">Themes</a></li>
</ul>
</li>
</ul>
<br class="nasty">
</nav>
</div><!-- .col.sidebar -->
<div class="col main single"> <article class="post-9045 post type-post status-publish format-standard hentry category-html tag-html tag-html5 tag-layouts post">
<h2><a href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/" rel="bookmark" title="Read 'Coding An HTML 5 Layout From Scratch'">Coding An HTML 5 Layout From Scratch</a></h2>
<ul class="postmetadata clearfix">
<li class="author">By <a rel="author" href="http://coding.smashingmagazine.com/author/enrique-ramirez/?rel=author" title="Posts by Enrique Ramirez">Enrique Ramirez</a></li>
<li id="logoedtarget" class="inline"><div id="logoed"></div></li> <li class="date">August 4th, 2009</li>
<li class="tags"><a href="http://coding.smashingmagazine.com/tag/html/">HTML</a>, <a href="http://coding.smashingmagazine.com/tag/html5/">HTML5</a>, <a href="http://coding.smashingmagazine.com/tag/layouts/">Layouts</a></li>
<li class="comments"><a href="#comments" title="Comment on Coding An HTML 5 Layout From Scratch">198 Comments</a></li>
</ul>
<div class="ad ed">
<span class="declare">Advertisement</span>
<div id="mediumrectangletarget"><div id="mediumrectangle"><iframe src="http://view.atdmt.com/COB/iview/420113779/direct/01?click=http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=4680__zoneid=22__OXLCA=1__cb=2374d9b710__oadest=" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" allowtransparency="true" width="300" height="250">
<script language="JavaScript" type="text/javascript">
document.write('<a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=4680__zoneid=22__OXLCA=1__cb=2374d9b710__oadest=http%3A%2F%2Fclk.atdmt.com%2FCOB%2Fgo%2F420113779%2Fdirect%2F01%2F" target="_blank"><img src="http://view.atdmt.com/COB/view/420113779/direct/01/"/></a>');
</script><noscript><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=4680__zoneid=22__OXLCA=1__cb=2374d9b710__oadest=http%3A%2F%2Fclk.atdmt.com%2FCOB%2Fgo%2F420113779%2Fdirect%2F01%2F" target="_blank"><img border="0" src="http://view.atdmt.com/COB/view/420113779/direct/01/" /></a></noscript></iframe><div id="beacon_2374d9b710" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="http://auslieferung.commindo-media-ressourcen.de/www/delivery/lg.php?bannerid=4680&campaignid=1655&zoneid=22&loc=1&referer=http%3A%2F%2Fcoding.smashingmagazine.com%2F2009%2F08%2F04%2Fdesigning-a-html-5-layout-from-scratch%2F&cb=2374d9b710" alt="" style="width: 0px; height: 0px;"></div>
</div></div>
</div>
<p><strong>HTML5</strong> and <strong>CSS3</strong> have just arrived (kinda), and with them a whole new battle for the ‘best markup’ trophy has begun. Truth to be told, all these technologies are mere tools waiting for a skilled developer to work on the right project. As developers we shouldn’t get into pointless discussions of which markup is the best. They all lead to nowhere. Rather, we must get a brand new ideology and modify our coding habits to keep the web accessible.</p>
<p>While it is true HTML5 and CSS3 are both a work in progress and is going to stay that way for some time, there’s no reason not to start using it <strong>right now</strong>. After all, time’s proven that implementation of <a href="http://www.w3.org/TR/CSS2/" rel="external">unfinished specifications</a> does work and can be easily mistaken by a complete W3C recommendation. That’s were <strong>Progressive Enhancement</strong> and <strong>Graceful Degradation</strong> come into play.</p>
<p>So today we’re going to experiment a little with these new technologies. At the end of this article you’ll learn how to:</p>
<ul>
<li>Use Graceful Degradation techniques and technologies to keep things in place for legacy browsers.</li>
<li>Use Progressive Enhancement techniques and technologies to be up to date with the latest trends.</li>
<li>Use HTML5 alongside a rising technology: <strong>Microformats</strong>.</li>
<li>Have a clear vision of some of the most exciting new features HTML5 and CSS3 will bring.</li>
</ul>
<p>It’d be a good idea to have a read at some of these articles first:</p>
<ul>
<li><a href="http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/" rel="bookmark" title="HTML5 and The Future of the Web">HTML5 and The Future of the Web</a><sup class="print_only"> 1</sup> which teaches the very basics of HTML5, introduces new elements and explains some of the advantages of the new markup language.</li>
<li><a href="http://remysharp.com/2009/01/07/html5-enabling-script/" rel="external" title="HTML5 enabling script">HTML5 enabling script</a><sup class="print_only"> 2</sup> which shows a method that enables HTML5 tags on IE6 to be styled.</li>
<li><a href="http://html5doctor.com/understanding-aside/" rel="external" title="HTML5 understanding Aside">Understanding aside</a><sup class="print_only"> 3</sup> where the usually misunderstood new tag is explained.</li>
</ul>
<p>I’ll also assume you know the basics of HTML and CSS. Including all the “old school” tags and the basic selectors and properties.</p>
<div id="textadtarget"><div id="textad">(<strong style="font-family: 'Proxima Nova Bold', Arial, sans-serif;">Smashing’s note</strong>: If you are looking for a good book on mobile, <a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=3452__zoneid=68__OXLCA=1__cb=24ff66b6da__oadest=http%3A%2F%2Fwww.smashingmagazine.com%2F2012%2F10%2F16%2Fthe-mobile-book-preorder%2F" style="border-bottom: 1px solid rgba(0,0,0,0.1);">this</a> is the one. Our brand new book on best design and coding practices for mobile, Responsive Web design and UX design for mobile. <a style="border-bottom: 1px solid rgba(0,0,0,0.1);" href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=3452__zoneid=68__OXLCA=1__cb=24ff66b6da__oadest=http%3A%2F%2Fwww.smashingmagazine.com%2F2012%2F10%2F16%2Fthe-mobile-book-preorder%2Fhttp%3A%2F%2Fwww.the-mobile-book.com%2F" target="_self">Pre-order now and save 20%!</a>)<div id="beacon_24ff66b6da" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="http://auslieferung.commindo-media-ressourcen.de/www/delivery/lg.php?bannerid=3452&campaignid=1018&zoneid=68&loc=1&referer=http%3A%2F%2Fcoding.smashingmagazine.com%2F2009%2F08%2F04%2Fdesigning-a-html-5-layout-from-scratch%2F&cb=24ff66b6da" alt="" style="width: 0px; height: 0px;"></div></div></div><h3>Before we begin…</h3>
<p>There’s a couple of things you have to bear in mind before adventuring on the new markup boat. HTML5 is not for everyone. Therefore, you must be wise and select how and where to use it. Think of all the markup flavours you’ve got available as tools: use the right one for the right job. Therefore, if your website is coded in standards compliant <strong>XHTML strict</strong> there’s no real need to change to HTML5.</p>
<p>There’s also the fact that by using HTML5 code right now your website gets stuck in some kind of “limbo” since even though your browser will render HTML5, it <strong>does not understand it</strong> as of yet. This may also apply to other software such as <strong>screenreaders</strong> and <strong>search engines.</strong></p>
<p>Lastly you must consider that HTML5 is still under heavy development, and it’s probably the “most open” project the W3C has ever done. With the immense amount of feedback and all the hype around it, <a href="http://dev.w3.org/html5/spec/Overview.html" rel="external">the current draft</a><sup class="print_only"> 4</sup> is bound to change and it’s impossible to predict how much.</p>
<p>So if you’re ready to do the switch, are not afraid of using technology that in the near future will be way more meaningful and can easily change whatever piece of code that might get broken, then keep reading.</p>
<h3>A word on Progressive Enhancement and Graceful Degradation</h3>
<p>So what are these two terms all about? <strong>Graceful Degradation</strong> is a widely used term which ideology is basically using the latest technologies first, and then fix anything that needs fixing for older browsers. We do this on a daily basis: most of us code for Firefox first, then fix Internet Explorer. That is Graceful Degradation in the practice.</p>
<p><strong>Progressive Enhancement</strong> refers to the habit of building first for the less capable, outdated browser and then enhance for the latest technologies. We, too, use this on a daily basis. For example, most of the times we code a website we start with the markup and then apply an external CSS file where we add all the styling. That is Progressive Enhancement in the practice.</p>
<p>Both technologies usually go hand in hand and have been part of the ways we do things for years. It’s just the terms that are not that well-known. And now, both of these practices need to evolve due to the new languages that are approaching. If you want to go deeper into both of these terms, <a href="http://accessites.org/site/2007/02/graceful-degradation-progressive-enhancement/" rel="external" title="Graceful Degradation and Progressive Enhancement">check a related article on accessites.org</a>.</p>
<h3>1. The Design</h3>
<p>This will be the sample layout we’ll be coding:</p>
<p class="showcase"><a href="http://media.smashingmagazine.com/wp-content/uploads/images/smashing-html5/files/index.html" style="border: none;"><img src="http://media.smashingmagazine.com/wp-content/uploads/images/smashing-html5/files/design-thumb.png" alt="Smashing HTML5! template"></a><sup class="print_only"> 5</sup></p>
<p>A very basic layout brilliantly named <em>Smashing HTML5!</em> which covers most of the elements we can start coding using HTML5. Basically: the page’s name and it’s slogan, a menu, a highlighted (featured) area, a post listing, an extras section with some external links, an about box and finally a copyright statement.</p>
<h3>2. The markup</h3>
<p>As a very basic start to our markup, this is our html file skeleton:</p>
<pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Smashing HTML5!</title>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lte IE 7]>
<script src="js/IE8.js" type="text/javascript"></script><![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="css/ie6.css"/><![endif]-->
</head>
<body id="index" class="home">
</body>
</html>
</pre>
<p>A few highlights:</p>
<ul>
<li>3 different <a href="http://www.quirksmode.org/css/condcom.html" title="Conditional Comments" rel="external">Conditional comments</a> for IE. First one includes <a href="http://remysharp.com/2009/01/07/html5-enabling-script/">html5 shiv</a><sup class="print_only"> 6</sup> code directly from Google Code for all versions of IE. The second one includes <a href="http://code.google.com/p/ie7-js/" rel="external" title="IE8.js">IE8.js</a><sup class="print_only"> 7</sup> for better backwards compatibility for IE7 and below as well as an ie.css file which will sove IE7 and below CSS bugs. Third one is just a CSS file to fix IE6 bugs.</li>
<li>The use of an “index” id and a “home” class on the <code><body></code> tag. This is just a habit I’ve developed over the past year that has simplified the coding of inner-sections of overly complicated websites.</li>
<li>A simplified version of the charset property for better backwards compatibility with legacy browsers.</li>
<li>I’m using XHTML 1.0 syntax on a HTML5 document. That’s the way I roll. It’s a habit that I really like and since <a href="http://www.w3.org/TR/html-design-principles/#pave-the-cowpaths" rel="external" title="Pave the Cowpaths principle">I can still use it</a><sup class="print_only"> 8</sup>, I will. You can, however, use normal HTML syntax here. That is, uppercase attribute and tag names, unclosed tags and no quotes for wrapping attributes’ values. It’s up to you.</li>
</ul>
<p>This is a very basic and solid startup for all and any HTML5 projects you might do in the future. With this, we can start assigning tags to the different sections of our layout.</p>
<p>If we had an x-ray machine designed for websites, this would be our page’s skeleton:</p>
<p class="showcase"><img src="http://media.smashingmagazine.com/wp-content/uploads/images/smashing-html5/files/design-x-ray.png" alt="Smashing HTML5! template x-rayed"></p>
<h4>The header</h4>
<p class="showcase"><img src="http://media.smashingmagazine.com/wp-content/uploads/images/smashing-html5/files/header-block.png" alt="Smashing HTML5! Header block"></p>
<p>The layout header is as simple as it gets. The new <a href="http://dev.w3.org/html5/spec/Overview.html#the-header-element" rel="external" title="The header tag spec"><code><header></code></a><sup class="print_only"> 9</sup> tag spec reads as follows:</p>
<blockquote cite="http://dev.w3.org/html5/spec/Overview.html#the-header-element"><p>
The header element represents a group of introductory or navigational aids.
</p></blockquote>
<p>Thus it is more than logic that we use this to markup our header. We’ll also use the <a href="http://dev.w3.org/html5/spec/Overview.html#the-nav-element" rel="external" title="The Nav Tag spec"><code><nav></code></a><sup class="print_only"> 10</sup> tag. The spec reads:</p>
<blockquote cite="http://dev.w3.org/html5/spec/Overview.html#the-nav-element"><p>
The <code>nav</code> element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element — only sections that consist of major navigation blocks are appropriate for the nav element.</p>
</blockquote>
<p>There’s a lot of buzz regarding the spec of the nav element since “major navigation blocks” is not a very helpful description. But this time we’re talking about our main website navigation; it can’t get any major than that. So after a couple of id’s and classes our header ends up like this:</p>
<pre>
<header id="banner" class="body">
<h1><a href="#">Smashing HTML5! <strong>HTML5 in the year <del>2022</del> <ins>2009</ins></strong></a></h1>
<nav><ul>
<li class="active"><a href="#">home</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">contact</a></li>
</ul></nav>
</header><!-- /#banner -->
</pre>
<h4>Featured block</h4>
<p class="showcase"><img src="http://media.smashingmagazine.com/wp-content/uploads/images/smashing-html5/files/featured-block.png" alt="Smashing HTML5! Featured block"></p>
<p>Next is the featured block. This is best marked up as an <a href="http://dev.w3.org/html5/spec/Overview.html#the-aside-element" rel="external" title="The aside tag spec"><code><aside></code></a><sup class="print_only"> 11</sup> since it’s spec says:</p>
<blockquote cite="http://dev.w3.org/html5/spec/Overview.html#the-aside-element"><p>
The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.
</p></blockquote>
<p>That pretty much sums up our featured block, so let’s go for it. Now, inside of this block there’s a lot going on. Firstly, this is an article, so alongside the <code><aside></code> tag, we should be using <a href="http://dev.w3.org/html5/spec/Overview.html#the-article-element" rel="external" title="The article tag Spec"><code><article></code></a><sup class="print_only"> 12</sup> right away.</p>
<p>We also have two consecutive headings (‘Featured Article’ and ‘HTML5 in Smashing Magazine!’) so we’ll be using yet another new element: <a href="http://dev.w3.org/html5/spec/Overview.html#the-hgroup-element" rel="external" title="The hgroup tag Spec"><code><hgroup></code></a><sup class="print_only"> 13</sup>. This is a wonderful tag used for grouping series of <code><h#></code> tags which is exactly what we have here. It exist <q cite="http://dev.w3.org/html5/spec/Overview.html#the-hgroup-element">to mask an h2 element (that acts as a secondary title) from the outline algorithm</q>, which will save developers some headaches in the future.</p>
<p>The last element on this block is the Smashing Magazine logo to the right. We have yet another new tag for this element: <a href="http://dev.w3.org/html5/spec/Overview.html#the-figure-element" rel="external" title="The figure tag Spec"><code><figure></code></a><sup class="print_only"> 14</sup>. This tag is used to enclose <q cite="http://dev.w3.org/html5/spec/Overview.html#the-figure-element">some flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document</q>. This tag allows us to use a <code><legend></code> tag to add a caption to the elements inside. Sadly, this last feature is broken on some browsers as they try to add a <code><fieldset></code> around and it is impossible to override it with simple CSS rules. Therefore, I’d suggest leaving it aside and just use <code><figure></code> for the time being.</p>
<p>Featured block code will look like this in the end:</p>
<pre>
<aside id="featured" class="body"><article>
<figure>
<img src="images/temp/sm-logo.gif" alt="Smashing Magazine" />
</figure>
<hgroup>
<h2>Featured Article</h2>
<h3><a href="#">HTML5 in Smashing Magazine!</a></h3>
</hgroup>
<p>Discover how to use Graceful Degradation and Progressive Enhancement techniques to achieve an outstanding, cross-browser <a href="http://dev.w3.org/html5/spec/Overview.html" rel="external">HTML5</a> and <a href="http://www.w3.org/TR/css3-roadmap/" rel="external">CSS3</a> website today!</p>
</article></aside><!-- /#featured -->
</pre>
<h4>The layout’s body</h4>
<p class="showcase"><img src="http://media.smashingmagazine.com/wp-content/uploads/images/smashing-html5/files/body-block.png" alt="Smashing HTML5! Body block"></p>
<p>Next is our document’s body, where all the content will be. Since this block <q cite="http://dev.w3.org/html5/spec/Overview.html#the-section-element">represents a generic document section</q> and a section is <q cite="http://dev.w3.org/html5/spec/Overview.html#the-section-element">a thematic grouping of content</q>, this one is without a doubt a <a href="http://dev.w3.org/html5/spec/Overview.html#the-section-element" rel="external" title="The section tag spec"><code><section></code></a> tag.</p>
<p>For the posts, we’ll use the old <code><ol></code> tag since, well, it’s an ordered list of articles. Each <code><li></code> should have an <code><article></code> tag and within this, we’ll have a <code><header></code> for the <strong>post title</strong>, a <code><footer></code> for the <strong>post information</strong> and a <code><div></code> for the <strong>post content</strong>. Yes, a <code><div></code>.</p>
<p>The reason for using a div is simple: we’ll be using the <a href="http://microformats.org/wiki/hatom" rel="external" title="hAtom 0.1 Microformat draft">hAtom 0.1 Microformat</a><sup class="print_only"> 15</sup> and it requires the content entry to be wrapped by an element. Since no other tag applies to this (it is not a section, it is not a full article, it is not a footer, etc.) we’ll use a <code><div></code> since it provides no semantic value by itself and keeps the markup as clean as possible.</p>
<p>With all these tags, and the hAtom microformat in place, the code shall look like this:</p>
<pre>
<section id="content" class="body">
<ol id="posts-list" class="hfeed">
<li><article class="hentry">
<header>
<h2 class="entry-title"><a href="#" rel="bookmark" title="Permalink to this POST TITLE">This be the title</a></h2>
</header>
<footer class="post-info">
<abbr class="published" title="2005-10-10T14:07:00-07:00"><!-- YYYYMMDDThh:mm:ss+ZZZZ -->
10th October 2005
</abbr>
<address class="vcard author">
By <a class="url fn" href="#">Enrique Ramírez</a>
</address>
</footer><!-- /.post-info -->
<div class="entry-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo <a href="#">non sapien</a> dapibus blandit nec et leo. Ut ut malesuada tellus.</p>
</div><!-- /.entry-content -->
</article></li>
<li><article class="hentry">
...
</article></li>
<li><article class="hentry">
...
</article></li>
</ol><!-- /#posts-list -->
</section><!-- /#content -->
</pre>
<p>For the mighty ones: yes, I did not use the <a href="http://dev.w3.org/html5/spec/Overview.html#the-time-element"><code><time></code></a><sup class="print_only"> 16</sup> element. This tag is rather new, and it is not compatible with the current <strong>microformat</strong> implementations out there. Since I’m indeed using hAtom it made little point to have both an invalid microformat and a yet-incomprehensible tag. If you’re not using a microformat, I’d suggest using <code><time></code> instead.</p>
<h4>The extras block</h4>
<p class="showcase"><img src="http://media.smashingmagazine.com/wp-content/uploads/images/smashing-html5/files/extras-block.png" alt="Smashing HTML5! Extras block"></p>
<p>The extras block is yet another section of our document. You might struggle for a while deciding whether an <code><aside></code> or a <code><section></code> tag would be best for this section. In the end, this section could not be <q cite="http://dev.w3.org/html5/spec/Overview.html#the-aside-element">considered separate from the main content</q> since it contains the blogroll links and some social information of the website. Thus, a <code><section></code> element is more appropriate.</p>
<p>Here we’ll also find another use for the <code><div></code> tag. For styling needs and grouping’s sake, we may add two divs here: one for the <strong>blogroll</strong> section and one for the <strong>social</strong> section.</p>
<p>For the rest of the block there’s nothing much to decide. It’s the everyday <code><ul></code> accommodated set of links on both sections, which in the end may look like this:</p>
<pre>
<section id="extras" class="body">
<div class="blogroll">
<h2>blogroll</h2>
<ul>
<li><a href="#" rel="external">HTML5 Doctor</a></li>
<li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
<li><a href="#" rel="external">Smashing Magazine</a></li>
<li><a href="#" rel="external">W3C</a></li>
<li><a href="#" rel="external">Wordpress</a></li>
<li><a href="#" rel="external">Wikipedia</a></li>
<li><a href="#" rel="external">HTML5 Doctor</a></li>
<li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
<li><a href="#" rel="external">Smashing Magazine</a></li>
<li><a href="#" rel="external">W3C</a></li>
<li><a href="#" rel="external">Wordpress</a></li>
<li><a href="#" rel="external">Wikipedia</a></li>
<li><a href="#" rel="external">HTML5 Doctor</a></li>
<li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
<li><a href="#" rel="external">Smashing Magazine</a></li>
<li><a href="#" rel="external">W3C</a></li>
<li><a href="#" rel="external">Wordpress</a></li>
<li><a href="#" rel="external">Wikipedia</a></li>
</ul>
</div><!-- /.blogroll -->
<div class="social">
<h2>social</h2>
<ul>
<li><a href="http://delicious.com/enrique_ramirez" rel="me">delicious</a></li>
<li><a href="http://digg.com/users/enriqueramirez" rel="me">digg</a></li>
<li><a href="http://facebook.com/enrique.ramirez.velez" rel="me">facebook</a></li>
<li><a href="http://www.lastfm.es/user/enrique-ramirez" rel="me">last.fm</a></li>
<li><a href="http://website.com/feed/" rel="alternate">rss</a></li>
<li><a href="http://twitter.com/enrique_ramirez" rel="me">twitter</a></li>
</ul>
</div><!-- /.social -->
</section><!-- /#extras -->
</pre>
<h4>The About and footer blocks</h4>
<p class="showcase"><img src="http://media.smashingmagazine.com/wp-content/uploads/images/smashing-html5/files/about-footer-block.png" alt="Smashing HTML5! About and Footer blocks"></p>
<p>The footer has no real difficulty. We’ll use the brand new <a href="http://dev.w3.org/html5/spec/Overview.html#the-footer-element" rel="external" title="The footer Tag spec"><code><footer></code></a><sup class="print_only"> 17</sup> tag to wrap both the about and the copyright information since the spec reads:</p>
<blockquote cite="http://dev.w3.org/html5/spec/Overview.html#the-footer-element">
<p>The footer element represents a footer for its nearest ancestor sectioning content. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
</p></blockquote>
<p>Since the nearer ancestor of our <code><footer></code> tag is the <code><body></code> tag, is more than right to wrap both elements here since we’re adding information about the website’s owner (and thus, author).</p>
<p>For the about block we’ll use an <code><address></code> tag, which <q cite="http://dev.w3.org/html5/spec/Overview.html#the-address-element">contains contact information for it’s nearest <code><article></code> or <code><body></code> element ancestor</q>. We’ll also use the <a href="http://microformats.org/wiki/hcard" rel="external" title="hCard standard">hCard Microformat</a><sup class="print_only"> 18</sup> to enhance the semantic value. For the copyright information we’ll go with a simple <code><p></code> tag so the code ends like this:</p>
<pre>
<footer id="contentinfo" class="body">
<address id="about" class="vcard body">
<span class="primary">
<strong><a href="#" class="fn url">Smashing Magazine</a></strong>
<span class="role">Amazing Magazine</span>
</span><!-- /.primary -->
<img src="images/avatar.gif" alt="Smashing Magazine Logo" class="photo" />
<span class="bio">Smashing Magazine is a website and blog that offers resources and advice to web developers and web designers. It was founded by Sven Lennartz and Vitaly Friedman.</span>
</address><!-- /#about -->
<p>2005-2009 <a href="http://smashingmagazine.com">Smashing Magazine</a>.</p>
</footer><!-- /#contentinfo -->
</pre>
<h4>Summing it all up</h4>
<p>So, after all this mess, the complete code looks like this:</p>
<pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Smashing HTML5!</title>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lte IE 7]>
<script src="js/IE8.js" type="text/javascript"></script><![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="css/ie6.css"/><![endif]-->
</head>
<body id="index" class="home">
<header id="banner" class="body">
<h1><a href="#">Smashing HTML5! <strong>HTML5 in the year <del>2022</del> <ins>2009</ins></strong></a></h1>
<nav><ul>
<li class="active"><a href="#">home</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">contact</a></li>
</ul></nav>
</header><!-- /#banner -->
<aside id="featured" class="body"><article>
<figure>
<img src="images/temp/sm-logo.gif" alt="Smashing Magazine" />
</figure>
<hgroup>
<h2>Featured Article</h2>
<h3><a href="#">HTML5 in Smashing Magazine!</a></h3>
</hgroup>
<p>Discover how to use Graceful Degradation and Progressive Enhancement techniques to achieve an outstanding, cross-browser <a href="http://dev.w3.org/html5/spec/Overview.html" rel="external">HTML5</a> and <a href="http://www.w3.org/TR/css3-roadmap/" rel="external">CSS3</a> website today!</p>
</article></aside><!-- /#featured -->
<section id="content" class="body">
<ol id="posts-list" class="hfeed">
<li><article class="hentry">
<header>
<h2 class="entry-title"><a href="#" rel="bookmark" title="Permalink to this POST TITLE">This be the title</a></h2>
</header>
<footer class="post-info">
<abbr class="published" title="2005-10-10T14:07:00-07:00"><!-- YYYYMMDDThh:mm:ss+ZZZZ -->
10th October 2005
</abbr>
<address class="vcard author">
By <a class="url fn" href="#">Enrique Ramírez</a>
</address>
</footer><!-- /.post-info -->
<div class="entry-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo <a href="#">non sapien</a> dapibus blandit nec et leo. Ut ut malesuada tellus.</p>
</div><!-- /.entry-content -->
</article></li>
<li><article class="hentry">
...
</article></li>
<li><article class="hentry">
...
</article></li>
</ol><!-- /#posts-list -->
</section><!-- /#content -->
<section id="extras" class="body">
<div class="blogroll">
<h2>blogroll</h2>
<ul>
<li><a href="#" rel="external">HTML5 Doctor</a></li>
<li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
<li><a href="#" rel="external">Smashing Magazine</a></li>
<li><a href="#" rel="external">W3C</a></li>
<li><a href="#" rel="external">Wordpress</a></li>
<li><a href="#" rel="external">Wikipedia</a></li>
<li><a href="#" rel="external">HTML5 Doctor</a></li>
<li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
<li><a href="#" rel="external">Smashing Magazine</a></li>
<li><a href="#" rel="external">W3C</a></li>
<li><a href="#" rel="external">Wordpress</a></li>
<li><a href="#" rel="external">Wikipedia</a></li>
<li><a href="#" rel="external">HTML5 Doctor</a></li>
<li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
<li><a href="#" rel="external">Smashing Magazine</a></li>
<li><a href="#" rel="external">W3C</a></li>
<li><a href="#" rel="external">Wordpress</a></li>
<li><a href="#" rel="external">Wikipedia</a></li>
</ul>
</div><!-- /.blogroll -->
<div class="social">
<h2>social</h2>
<ul>
<li><a href="http://delicious.com/enrique_ramirez" rel="me">delicious</a></li>
<li><a href="http://digg.com/users/enriqueramirez" rel="me">digg</a></li>
<li><a href="http://facebook.com/enrique.ramirez.velez" rel="me">facebook</a></li>
<li><a href="http://www.lastfm.es/user/enrique-ramirez" rel="me">last.fm</a></li>
<li><a href="http://website.com/feed/" rel="alternate">rss</a></li>
<li><a href="http://twitter.com/enrique_ramirez" rel="me">twitter</a></li>
</ul>
</div><!-- /.social -->
</section><!-- /#extras -->
<footer id="contentinfo" class="body">
<address id="about" class="vcard body">
<span class="primary">
<strong><a href="#" class="fn url">Smashing Magazine</a></strong>
<span class="role">Amazing Magazine</span>
</span><!-- /.primary -->
<img src="images/avatar.gif" alt="Smashing Magazine Logo" class="photo" />
<span class="bio">Smashing Magazine is a website and blog that offers resources and advice to web developers and web designers. It was founded by Sven Lennartz and Vitaly Friedman.</span>
</address><!-- /#about -->
<p>2005-2009 <a href="http://smashingmagazine.com">Smashing Magazine</a>.</p>
</footer><!-- /#contentinfo -->
</body>
</html>
</pre>
<p>Say, isn’t that readable? It’s also way more semantic than a bunch of <code><div></code>s all over the place.</p>
<h3>3. The CSS</h3>
<p>Just like our markup, the CSS will also have a very basic start. Call this a frameworks of sorts which I’ve been using for a long time and works fairly well. Here’s the code for our main.css file:</p>
<pre>/*
Name: Smashing HTML5
Date: July 2009
Description: Sample layout for HTML5 and CSS3 goodness.
Version: 1.0
Author: Enrique Ramírez
Autor URI: http://enrique-ramirez.com
*/
/* Imports */
@import url("reset.css");
@import url("global-forms.css");
/***** Global *****/
/* Body */
body {
background: #F5F4EF url('../images/bg.png');
color: #000305;
font-size: 87.5%; /* Base font size: 14px */
font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
line-height: 1.429;
margin: 0;
padding: 0;
text-align: left;
}
/* Headings */
h2 {font-size: 1.571em} /* 22px */
h3 {font-size: 1.429em} /* 20px */
h4 {font-size: 1.286em} /* 18px */
h5 {font-size: 1.143em} /* 16px */
h6 {font-size: 1em} /* 14px */
h2, h3, h4, h5, h6 {
font-weight: 400;
line-height: 1.1;
margin-bottom: .8em;
}
/* Anchors */
a {outline: 0;}
a img {border: 0px; text-decoration: none;}
a:link, a:visited {
color: #C74350;
padding: 0 1px;
text-decoration: underline;
}
a:hover, a:active {
background-color: #C74350;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #333;
}
/* Paragraphs */
p {margin-bottom: 1.143em;}
* p:last-child {margin-bottom: 0;}
strong, b {font-weight: bold;}
em, i {font-style: italic;}
::-moz-selection {background: #F6CF74; color: #fff;}
::selection {background: #F6CF74; color: #fff;}
/* Lists */
ul {
list-style: outside disc;
margin: 1em 0 1.5em 1.5em;
}
ol {
list-style: outside decimal;
margin: 1em 0 1.5em 1.5em;
}
dl {margin: 0 0 1.5em 0;}
dt {font-weight: bold;}
dd {margin-left: 1.5em;}
/* Quotes */
blockquote {font-style: italic;}
cite {}
q {}
/* Tables */
table {margin: .5em auto 1.5em auto; width: 98%;}
/* Thead */
thead th {padding: .5em .4em; text-align: left;}
thead td {}
/* Tbody */
tbody td {padding: .5em .4em;}
tbody th {}
tbody .alt td {}
tbody .alt th {}
/* Tfoot */
tfoot th {}
tfoot td {}
</pre>
<p>This is our first step into getting the layout together. We can style most of the basic elements from here, so feel free to do so. Here’s a few highlights:</p>
<ul>
<li>For optimum coding, a few basic information on the .css file is at the top in comments form.</li>
<li>2 imports at the beginning of the file. The first one is <a href="http://meyerweb.com/eric/tools/css/reset/" rel="external">Eric Meyer’s CSS reset</a><sup class="print_only"> 19</sup> file. Second one is a personalized global forms file which I’ll discuss more deeply later on.</li>
<li>Very basic styling for the default tags.</li>
</ul>
<h4>Explaining some properties</h4>
<p>For this very part, there’s little to be mentioned. Firstly there’s the <a href="http://www.w3.org/Style/Examples/007/text-shadow" rel="external"><code>text-shadow</code></a><sup class="print_only"> 20</sup> CSS3 property. To explain it, here’s a sample:</p>
<pre>
text-shadow: 1px 5px 2px #333;
</pre>
<p>This will give us a #333 shadow on our text that’s 1px to the right, 5px down and with a 2px blur. Simple, right? You can use hex and rgba values plus any <a href="http://htmlhelp.com/reference/css/units.html" rel="external" title="CSS Units">CSS unit</a><sup class="print_only"> 21</sup> (except %) here.</p>
<p>We also have this little baby:</p>
<pre>
* p:last-child {margin-bottom: 0;}
</pre>
<p>This line will remove the margin bottom of any <code><p></code> tag that’s the last child of it’s parent. Useful when using boxes (like we’re doing) to avoid large vertical gaps.</p>
<p>Lastly, we have a couple of selectors:</p>
<pre>
::-moz-selection {background: #F6CF74; color: #fff;}
::selection {background: #F6CF74; color: #fff;}
</pre>
<p><code>::selection</code> is a <a href="http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#selectors" rel="external" title="CSS3 Selectors">CSS3 selector</a><sup class="print_only"> 22</sup> that lets us style how the text selection looks. It only allows <code>color</code> and <code>background</code> CSS properties, so keep it simple. <code>::-moz-selection</code> needs to go here since Mozilla haven’t implemented the <code>::selection</code> selector.</p>
<h4>Enabling HTML5 elements</h4>
<p>Now, as I’ve stated before, browsers do not understand HTML5 as of yet. And since HTML5 is still in development, little has been discussed about the default styling the new elements will have. Thus, being tags that do not exist for the browser, it does not display any styling in them.</p>
<p>Perhaps it’s fair to assume that most browsers apply something like <code>display: inline</code> for all unknown tags that they might encounter. This is not what we want for some of them, such as <code><section></code>, so we need to tell explicitly to the browser how to display these elements:</p>
<pre>
/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {
display: block;
}
</pre>
<p>There! Now we can magically style our tags as if they were <code><div></code>s!</p>
<h4>Limiting our blocks</h4>
<p>Some of you might have noticed how I added the <code>class="body"</code> attribute to the major sections of the layout in the markup. This is because we want the body of my website to be for a certain width (800px), and I’ve never been a fan of the big wrapping <code><div></code> to do that. So we’ll use the basic block centering technique using margins for this. I’m also adding a couple of generic classes to this section that might be used for a post side content.</p>
<pre>
/***** Layout *****/
.body {clear: both; margin: 0 auto; width: 800px;}
img.right figure.right {float: right; margin: 0 0 2em 2em;}
img.left, figure.left {float: right; margin: 0 0 2em 2em;}
</pre>
<h4>Header styling</h4>
<p>We’ll begin with our header. This one is fairly easy. We just want a couple of spacing and a few text styling here and there. Nothing we haven’t done before.</p>
<pre>
/*
Header
*****************/
#banner {
margin: 0 auto;
padding: 2.5em 0 0 0;
}
/* Banner */
#banner h1 {font-size: 3.571em; line-height: .6;}
#banner h1 a:link, #banner h1 a:visited {
color: #000305;
display: block;
font-weight: bold;
margin: 0 0 .6em .2em;
text-decoration: none;
width: 427px;
}
#banner h1 a:hover, #banner h1 a:active {
background: none;
color: #C74350;
text-shadow: none;
}
#banner h1 strong {font-size: 0.36em; font-weight: normal;}
</pre>
<p>We now pass on to the navigation. Pretty much the same as before, nothing really new here. The regular horizontal list, a couple of colour edits. Nothing fancy.</p>
<pre>
/* Main Nav */
#banner nav {
background: #000305;
font-size: 1.143em;
height: 40px;
line-height: 30px;
margin: 0 auto 2em auto;
padding: 0;
text-align: center;
width: 800px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#banner nav ul {list-style: none; margin: 0 auto; width: 800px;}
#banner nav li {float: left; display: inline; margin: 0;}
#banner nav a:link, #banner nav a:visited {
color: #fff;
display: inline-block;
height: 30px;
padding: 5px 1.5em;
text-decoration: none;
}
#banner nav a:hover, #banner nav a:active,
#banner nav .active a:link, #banner nav .active a:visited {
background: #C74451;
color: #fff;
text-shadow: none !important;
}
#banner nav li:first-child a {
border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
</pre>
<p>We’re using another CSS3 property here: <code>border-radius</code>. This new CSS3 property lets us add rounded borders to our blocks without the need of unnecessary, non-semantic tags that will clutter our code or a million of images and clever background-positioning. No, that’s all a thing of the past. With this we just need to set the radius of our border and that’s it.</p>
<p>Of course, border-radius is not widely adopted yet, and thus, we need to use the equivalent properties for Mozilla- and Webkit-browsers. There are a lot of <a href="http://www.css3.info/preview/rounded-border/" rel="external" title="Border-radius: create rounded corners with CSS!">variations to this property</a>, and can make your code a little big, but if you want rounded corners on most of the current browsers, you might as well add them.</p>
<p>You might as well notice the use of <a href="http://www.w3.org/TR/CSS2/cascade.html#important-rules" rel="external" title="!important declaration"><code>!important</code></a><sup class="print_only"> 23</sup>. This is basically to override the default styles (<code>text-shadow</code>) without complex specificity selectors. In this example it’s here mostly for educational purposes.</p>
<h4>Featured block and Body styling</h4>
<p>Here’s the CSS code for both blocks. Note that this is not the styling for the posts’ list. Just the major content block. As both of these blocks have no real special CSS properties, I’ll let you guys figure it out.</p>
<pre>
/*
Featured
*****************/
#featured {
background: #fff;
margin-bottom: 2em;
overflow: hidden;
padding: 20px;
width: 760px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#featured figure {
border: 2px solid #eee;
float: right;
margin: 0.786em 2em 0 5em;
width: 248px;
}
#featured figure img {display: block; float: right;}
#featured h2 {color: #C74451; font-size: 1.714em; margin-bottom: 0.333em;}
#featured h3 {font-size: 1.429em; margin-bottom: .5em;}
#featured h3 a:link, #featured h3 a:visited {color: #000305; text-decoration: none;}
#featured h3 a:hover, #featured h3 a:active {color: #fff;}
/*
Body
*****************/
#content {
background: #fff;
margin-bottom: 2em;
overflow: hidden;
padding: 20px 20px;
width: 760px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
</pre>
<p>Again, this is our everyday coding style. Backgrounds, margins, colours and text styles we’ve been using for years. Perfect example of how styling HTML5 is not that different from current markup languages. It’s just as easy to style as it’s always been.</p>
<h4>Extras block styling</h4>
<p>Here things begin to get interesting. We’ll begin with basic styling for the block itself:</p>
<pre>
/*
Extras
*****************/
#extras {margin: 0 auto 3em auto; overflow: hidden;}
#extras ul {list-style: none; margin: 0;}
#extras li {border-bottom: 1px solid #fff;}
#extras h2 {
color: #C74350;
font-size: 1.429em;
margin-bottom: .25em;
padding: 0 3px;
}
#extras a:link, #extras a:visited {
color: #444;
display: block;
border-bottom: 1px solid #F4E3E3;
text-decoration: none;
padding: .3em .25em;
}
/* Blogroll */
#extras .blogroll {
float: left;
width: 615px;
}
#extras .blogroll li {float: left; margin: 0 20px 0 0; width: 185px;}
/* Social */
#extras .social {
float: right;
width: 175px;
}
</pre>
<p>As you can see, I’m doing a 3 column layout for the blogroll block by floating the <code><li></code>s and a 1 column layout for the social block by merely changing its width. This already works very well by itself, but there’s one thing that bothers me. The borders I’ve added for separating each of the links:</p>
<p class="showcase"><img src="http://media.smashingmagazine.com/wp-content/uploads/images/smashing-html5/files/extras-border.png" alt="Smashing HTML5! Extras block border issue"></p>
<p>The highlighted row is the one troubling me. The borders I’ve added are actually on two elements. Each <code><li></code> and <code><a></code> tag have a border-bottom of 1px, which I don’t want on the last row. So we’ll remove the borders for the last 3 elements on blogroll, and the last element on social.</p>
<p>First we’ll remove the borders on the last <code><li></code> of each block. By using the CSS3 <a href="http://www.w3.org/TR/css3-selectors/#last-child-pseudo" rel="external" title=":last-child Pseudo class"><code>:last-child</code></a><sup class="print_only"> 24</sup> selector, we can target the last <code><li></code> of it’s parent <code><ul></code>.</p>
<pre>
#extras li:last-child, /* last <li>*/
#extras li:last-child a /* <a> of last <li> */
{border: 0}
</pre>
<p>That will remove the border from the last link on both of our blocks. Now we have a new problem. How are we going to remove the border on the other two elements on the blogroll block?</p>
<p class="showcase"><img src="http://media.smashingmagazine.com/wp-content/uploads/images/smashing-html5/files/extras-border2.png" alt="Smashing HTML5! Extras block border second issue"></p>
<p>Well, meet <a href="http://www.w3.org/TR/css3-selectors/#nth-last-child-pseudo" rel="external" title=":nth-last-child() Pseudo Selector"><code>:nth-last-child()</code></a><sup class="print_only"> 25</sup>.</p>
<pre>
#extras .blogroll li:nth-last-child(2),
#extras .blogroll li:nth-last-child(3),
#extras .blogroll li:nth-last-child(2) a,
#extras .blogroll li:nth-last-child(3) a {border: 0;}
</pre>
<p>Phew! Looks pretty hard, uh? Not really. This basically targets the second (2) and third (3) elements starting from the end. Exactly the ones I want to remove the border from.</p>
<p>As expected, this will not work on IE, though <a href="http://code.google.com/p/ie7-js/">IE8.js</a><sup class="print_only"> 26</sup> does support <code>:last-child</code>, it does not support <code>:nth-last-child</code>, thus, borders will appear on IE. This is NOT a major design problem, information is still accessible, thus it is pointless to try to achieve the same effect on IE.</p>
<h4>Adding icons to social</h4>
<p>Now we’ll spice things up a little. We all love how little icons look besides each link. We’ve seen that design technique everywhere. There’s a million ways of applying them, but we’ll use some advanced <strong>CSS3 selectors</strong> to do this.</p>
<p>Let’s begin with a little introduction. <code>a[n='b']</code> will target all <code><a></code> that has an <code>n</code> attribute value of <code>b</code>. So, for example, if we use this: <code>a[href='picture.jpg']</code> we’ll be targeting an element like <code><a href="picture.jpg"></code>. This is great, but not exactly what we want, since the follow-ups of the URL might have a different value. Here’s a couple of other selectors that might come in handy:</p>
<ul>
<li><code>a[n]</code> will target all <code><a></code> that has an <code>n</code> attribute, regardless of its value.</li>
<li><code>a[n='b']</code> will target all <code><a></code> that has an <code>n</code> attribute value of <code>b</code>.</li>
<li><code>a[n~='b']</code> will target all <code><a></code> that has an <code>n</code> attribute which one of its space-separated values is <code>b</code>.</li>
<li><code>a[n^='b']</code> will target all <code><a></code> that has an <code>n</code> attribute that starts with <code>b</code>.</li>
<li><code>a[n*='b']</code> will target all <code><a></code> that has an <code>n</code> attribute that has <code>b</code> somewhere within its value.</li>
</ul>
<p>Note that neither of these is restricted to the <code><a></code> tag. This last one fits us perfectly. So we’ll search for an <code><a></code> tag that has a piece of text somewhere within its URL. So this is our code:</p>
<pre>
#extras div[class='social'] a {
background-repeat: no-repeat;
background-position: 3px 6px;
padding-left: 25px;
}
/* Icons */
.social a[href*='delicious.com'] {background-image: url('../images/icons/delicious.png');}
.social a[href*='digg.com'] {background-image: url('../images/icons/digg.png');}
.social a[href*='facebook.com'] {background-image: url('../images/icons/facebook.png');}
.social a[href*='last.fm'], .social a[href*='lastfm'] {background-image: url('../images/icons/lastfm.png');}
.social a[href*='/feed/'] {background-image: url('../images/icons/rss.png');}
.social a[href*='twitter.com'] {background-image: url('../images/icons/twitter.png');}
</pre>
<p>The first bit lets us add a padding to the social links, where the icon will be. It’ll also set the default background settings so we don’t have to repeat ourselves. You might be wondering why I’m using <code>div[class='social']</code> rather than the normal <code>div.social</code>. Simply because, for the browsers that don’t support this kind of selectors (*cough* IE *Cough*), we don’t want a white gap on the left of our links. Thus, using the same selector used for the background icons will keep me safe. IE won’t have a padding nor a background image, while the rest will do.</p>
<p>The second section uses the selector explained above to target each social network and add the proper icon.</p>
<p>This CSS technique <a href="http://www.askthecssguy.com/2006/12/showing_hyperlink_cues_with_cs_1.html" rel="external" title="Showing Hyperlink Cues with CSS (Ask the CSS Guy)">is nothing new</a><sup class="print_only"> 27</sup>, and as powerful as it might be, it is not widely used (I’ve even seen JavaScript used to achieve this same thing). Yet another CSS feature that goes unnoticed and shouldn’t be.</p>
<h4>Footer Styling</h4>
<p>Lastly, we have our footer. As other examples above, this has just basic styling here and there. Besides the <code>border-radius</code> property, there’s nothing new in here.</p>
<pre>
/*
About
*****************/
#about {
background: #fff;
font-style: normal;
margin-bottom: 2em;
overflow: hidden;
padding: 20px;
text-align: left;
width: 760px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#about .primary {float: left; width: 165px;}
#about .primary strong {color: #C64350; display: block; font-size: 1.286em;}
#about .photo {float: left; margin: 5px 20px;}
#about .url:link, #about .url:visited {text-decoration: none;}
#about .bio {float: right; width: 500px;}
/*
Footer
*****************/
#contentinfo {padding-bottom: 2em; text-align: right;}
</pre>
<h4>The Posts List</h4>
<p>There’s only one last element to style. Once again, basic styling here, but this time, we’ll add a quick effect for when the user hovers over the post.</p>
<pre>
/* Blog */
.hentry {
border-bottom: 1px solid #eee;
padding: 1.5em 0;
}
li:last-child .hentry, #content > .hentry {border: 0; margin: 0;}
#content > .hentry {padding: 1em 0;}
.entry-title {font-size: 1.429em; margin-bottom: 0;}
.entry-title a:link, .entry-title a:visited {text-decoration: none;}
.hentry .post-info * {font-style: normal;}
/* Content */
.hentry footer {margin-bottom: 2em;}
.hentry footer address {display: inline;}
#posts-list footer address {display: block;}
/* Blog Index */
#posts-list {list-style: none; margin: 0;}
#posts-list .hentry {padding-left: 200px; position: relative;}
#posts-list footer {
left: 10px;
position: absolute;
top: 1.5em;
width: 190px;
}
</pre>
<p>Some basics. I’m removing all margin and padding for the last post entry (so I don’t end up with a big gap at the bottom of my box). I’m also using the <code>></code> selector which basically targets a direct child. For example, <code>#content > .hentry</code> will target a <code>.hentry</code> element that’s directly inside the <code>#content</code>. If the <code>.hentry</code> is inside, let’s say, an ordered list, this rule will not apply since it’s a grandchild and not a direct child of <code>#content</code>. This is to target the single post view once we get onto that.</p>
<p>Continuing with our code, we’ll get this:</p>
<pre>
#posts-list .hentry:hover {
background: #C64350;
color: #fff;
}
#posts-list .hentry:hover a:link, #posts-list .hentry:hover a:visited {
color: #F6CF74;
text-shadow: 1px 1px 1px #333;
}
</pre>
<p>This code will change the <code><li></code> background color, text color and its <code><a></code> color when the mouse is directly above the <code><li></code>. This is nothing new and has been possible since forever, but we’re adding it for a simple reason.</p>
<p>HTML5 lets users <a href="http://html5doctor.com/block-level-links-in-html-5/" rel="external" title="HTML5 block level links">wrap block-level elements with <code><a></code> tags to create block linking areas</a><sup class="print_only"> 28</sup>. Basically, we’ll be able to wrap the entire <code><hentry></code> contents with an anchor and have it behave as a proper link. However, after some testing, I’ve figured that <strong>Firefox 3.5.1</strong> is not ready for this. Perhaps because of the non-understandable new elements inside of each <code>.hentry</code>, everytime I added an anchor to wrap the contents, everything inside started to behave in weird manners. Safari, Opera and even IE6 work properly. Take a look at the <a href="http://media.smashingmagazine.com/wp-content/uploads/images/smashing-html5/files/block-level-links.html">test page</a><sup class="print_only"> 29</sup>. Below are a couple of screenshots for all of you single-browser users.</p>
<p>Opera 9.64:</p>
<p class="showcase"><a href="http://media.smashingmagazine.com/wp-content/uploads/images/smashing-html5/files/opera-big.png" style="border: none;"><img src="http://media.smashingmagazine.com/wp-content/uploads/images/smashing-html5/files/opera-thumb.png" alt="Opera block level anchors render"></a></p>
<p>Safari 4.0.2:</p>
<p class="showcase"><a href="http://media.smashingmagazine.com/wp-content/uploads/images/smashing-html5/files/safari-big.png" style="border: none;"><img src="http://media.smashingmagazine.com/wp-content/uploads/images/smashing-html5/files/safari-thumb.png" alt="Safari block level anchors render"></a></p>
<p>Internet Explorer 6:</p>
<p class="showcase"><a href="http://media.smashingmagazine.com/wp-content/uploads/images/smashing-html5/files/ie-big.png" style="border: none;"><img src="http://media.smashingmagazine.com/wp-content/uploads/images/smashing-html5/files/ie-thumb.png" alt="IE6 block level anchors render"></a></p>
<p>Firefox 3.5.1:</p>
<p class="showcase"><a href="http://media.smashingmagazine.com/wp-content/uploads/images/smashing-html5/files/firefox-big.png" style="border: none;"><img src="http://media.smashingmagazine.com/wp-content/uploads/images/smashing-html5/files/firefox-thumb.png" alt="Firefox block level anchors render"></a></p>
<p>So block level anchors are really broken on Firefox, yet we can add a nice :hover effect to the <code><li></code>. So we can enhance our user experience visually, though not from the accessibility point of view.</p>
<h4>Fixing IE6</h4>
<p>Finally, we need to do some fixing for IE6. Below is the complete ie.css and ie6.css file. Each line has a comment on its right side or on the top explaining what it’s fixing. Pretty straightforward. This is ie.css:</p>
<pre>
#banner h1 {line-height: 1;} /* Fixes Logo overlapping */
</pre>
<p>And this is ie6.css file:</p>
<pre>
#featured figure {display: inline;} /* Double margin fix */
#posts-list footer {left: -190px;} /* Positioning fix */
/* Smaller width for Social block
so it won't jump to next line */
#extras .social {width: 165px;}
</pre>
<h3>4. The aftermath</h3>
<p>So, how does everything look now? Take a look at the <a href="http://media.smashingmagazine.com/wp-content/uploads/images/smashing-html5/files/index.html">final product here</a><sup class="print_only"> 30</sup>. It has been tested on IE6, Firefox 3, Firefox 3.5, Opera 9.64 and Safari 4.0.2. They all behave properly. Below are a series of screenshots of every browser.</p>
<p class="showcase">
<a href="http://media.smashingmagazine.com/wp-content/uploads/images/smashing-html5/files/final-safari.png" title="Final Version Safari Screenshot" style="border: none;"><img src="http://media.smashingmagazine.com/wp-content/uploads/images/smashing-html5/files/final-safari-thumb.png" alt="Final Version Safari Screenshot"></a><br>
<a href="http://media.smashingmagazine.com/wp-content/uploads/images/smashing-html5/files/final-firefox.png" title="Final Version Firefox Screenshot" style="border: none;"><img src="http://media.smashingmagazine.com/wp-content/uploads/images/smashing-html5/files/final-firefox-thumb.png" alt="Final Version Firefox Screenshot"></a><br>
<a href="http://media.smashingmagazine.com/wp-content/uploads/images/smashing-html5/files/final-opera.png" title="Final Version Opera Screenshot" style="border: none;"><img src="http://media.smashingmagazine.com/wp-content/uploads/images/smashing-html5/files/final-opera-thumb.png" alt="Final Version Opera Screenshot"></a><br>
<a href="http://media.smashingmagazine.com/wp-content/uploads/images/smashing-html5/files/final-ie6.png" title="Final Version Internet Explorer 6 Screenshot" style="border: none;"><img src="http://media.smashingmagazine.com/wp-content/uploads/images/smashing-html5/files/final-ie6-thumb.png" alt="Final Version Internet Explorer 6 Screenshot"></a>
</p>
<p>It is now safe to say that you can achieve an HTML5/CSS3 layout today that will work on past, current and future browsers without a problem. We are still far away from the time we can fully implement much of <a href="http://dev.w3.org/html5/spec/Overview.html#video" rel="external" title="HTML5 Video Tag Spec">HTML5′s coolest features</a><sup class="print_only"> 31</sup>, but we can begin using it today.</p>
<h3>Further Resources</h3>
<p>There’s a lot of hype and websites dedicated right now to the HTML5 wonder. Here’s a couple:</p>
<ul>
<li>
<a href="http://html5doctor.com/" rel="external">HTML5 Doctor</a><sup class="print_only"> 32</sup><br>Tips and tutorials that will help you implement HTML 5 today
</li>
<li>
<a href="http://dev.w3.org/html5/spec/Overview.html" rel="external">HTML5 Editor’s Draft</a><sup class="print_only"> 33</sup><br>Current Draft with everything you’ll ever need to know about HTML5
</li>
<li>
<a href="http://html5gallery.com/" rel="external">HTML5 Gallery</a><sup class="print_only"> 34</sup><br>In the wild examples of HTML5 implementations
</li>
<li>
<a href="http://perishablepress.com/press/2009/07/19/power-of-html5-css3/" rel="external">The power of HTML 5 and CSS 3</a><sup class="print_only"> 35</sup><br>Great article about some of the major HTML 5 and CSS 3 features
</li>
<li><a href="http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/">HTML 5 and the Future of the Web</a><sup class="print_only"> 36</sup><br>This articles gives you some tips and insights into HTML5 to help ease the inevitable pain that comes with transitioning to a slightly different syntax.</li>
<li><a href="http://www.smashingmagazine.com/2009/06/15/take-your-design-to-the-next-level-with-css3/">Take Your Design To The Next Level With CSS3</a><sup class="print_only"> 37</sup><br>In this article, we’ll look at the advantages of CSS3 and some examples of how Web designers are already using it. By the end, we’ll know a bit of what to expect from CSS3 and how we can use its new features in our projects.</li>
</ul>
<div class="tagsdata">
<p class="tags longtags"><strong>Tags:</strong><a href="http://coding.smashingmagazine.com/tag/html/" title="View all articles tagged 'HTML' (29)">HTML</a><a href="http://coding.smashingmagazine.com/tag/html5/" title="View all articles tagged 'HTML5' (22)">HTML5</a><a href="http://coding.smashingmagazine.com/tag/layouts/" title="View all articles tagged 'Layouts' (14)">Layouts</a></p> <p><a href="#top" class="backtotop single" title="Jump to the top of the page">↑ Back to top</a><a href="https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Fcoding.smashingmagazine.com%2F2009%2F08%2F04%2Fdesigning-a-html-5-layout-from-scratch%2F&source=tweetbutton&text=Coding%20An%20HTML%205%20Layout%20From%20Scratch&url=http%3A%2F%2Fcoding.smashingmagazine.com%2F2009%2F08%2F04%2Fdesigning-a-html-5-layout-from-scratch%2F&via=smashingmag" class="share-on-twitter single" title="Share on Twitter!">Share on Twitter</a></p>
</div>
</article><ul class="print_only_notelist"><li><h4>Footnotes:</h4></li><li><sup>1</sup> HTML5 and The Future of the Web - http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/</li><li><sup>2</sup> HTML5 enabling script - http://remysharp.com/2009/01/07/html5-enabling-script/</li><li><sup>3</sup> Understanding aside - http://html5doctor.com/understanding-aside/</li><li><sup>4</sup> the current draft - http://dev.w3.org/html5/spec/Overview.html</li><li><sup>5</sup> http://media.smashingmagazine.com/wp-content/uploads/images/smashing-html5/files/index.html</li><li><sup>6</sup> html5 shiv - http://remysharp.com/2009/01/07/html5-enabling-script/</li><li><sup>7</sup> IE8.js - http://code.google.com/p/ie7-js/</li><li><sup>8</sup> I can still use it - http://www.w3.org/TR/html-design-principles/#pave-the-cowpaths</li><li><sup>9</sup> <header> - http://dev.w3.org/html5/spec/Overview.html#the-header-element</header></li><li><sup>10</sup> <nav> - http://dev.w3.org/html5/spec/Overview.html#the-nav-element</nav></li><li><sup>11</sup> <aside> - http://dev.w3.org/html5/spec/Overview.html#the-aside-element</aside></li><li><sup>12</sup> <article> - http://dev.w3.org/html5/spec/Overview.html#the-article-element</article></li><li><sup>13</sup> <hgroup> - http://dev.w3.org/html5/spec/Overview.html#the-hgroup-element</hgroup></li><li><sup>14</sup> <figure> - http://dev.w3.org/html5/spec/Overview.html#the-figure-element</figure></li><li><sup>15</sup> hAtom 0.1 Microformat - http://microformats.org/wiki/hatom</li><li><sup>16</sup> <time> - http://dev.w3.org/html5/spec/Overview.html#the-time-element</time></li><li><sup>17</sup> <footer> - http://dev.w3.org/html5/spec/Overview.html#the-footer-element</footer></li><li><sup>18</sup> hCard Microformat - http://microformats.org/wiki/hcard</li><li><sup>19</sup> Eric Meyer’s CSS reset - http://meyerweb.com/eric/tools/css/reset/</li><li><sup>20</sup> text-shadow - http://www.w3.org/Style/Examples/007/text-shadow</li><li><sup>21</sup> CSS unit - http://htmlhelp.com/reference/css/units.html</li><li><sup>22</sup> CSS3 selector - http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#selectors</li><li><sup>23</sup> !important - http://www.w3.org/TR/CSS2/cascade.html#important-rules</li><li><sup>24</sup> :last-child - http://www.w3.org/TR/css3-selectors/#last-child-pseudo</li><li><sup>25</sup> :nth-last-child() - http://www.w3.org/TR/css3-selectors/#nth-last-child-pseudo</li><li><sup>26</sup> IE8.js - http://code.google.com/p/ie7-js/</li><li><sup>27</sup> is nothing new - http://www.askthecssguy.com/2006/12/showing_hyperlink_cues_with_cs_1.html</li><li><sup>28</sup> wrap block-level elements with <a> tags to create block linking areas - http://html5doctor.com/block-level-links-in-html-5/</a></li><li><sup>29</sup> test page - http://media.smashingmagazine.com/wp-content/uploads/images/smashing-html5/files/block-level-links.html</li><li><sup>30</sup> final product here - http://media.smashingmagazine.com/wp-content/uploads/images/smashing-html5/files/index.html</li><li><sup>31</sup> HTML5′s coolest features - http://dev.w3.org/html5/spec/Overview.html#video</li><li><sup>32</sup> HTML5 Doctor - http://html5doctor.com/</li><li><sup>33</sup> HTML5 Editor’s Draft - http://dev.w3.org/html5/spec/Overview.html</li><li><sup>34</sup> HTML5 Gallery - http://html5gallery.com/</li><li><sup>35</sup> The power of HTML 5 and CSS 3 - http://perishablepress.com/press/2009/07/19/power-of-html5-css3/</li><li><sup>36</sup> HTML 5 and the Future of the Web - http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/</li><li><sup>37</sup> Take Your Design To The Next Level With CSS3 - http://www.smashingmagazine.com/2009/06/15/take-your-design-to-the-next-level-with-css3/</li></ul>
<div class="bio clearfix">
<div class="gravatar">
<img alt="" src="http://0.gravatar.com/avatar/c00d2f898b6028bf6ec0f6668a93ccb7?s=78&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D78&r=G" class="avatar avatar-78 photo"> </div>
<div class="about">
<a rel="author" href="http://coding.smashingmagazine.com/author/enrique-ramirez/?rel=author" title="Posts by Enrique Ramirez" class="post-author">Enrique Ramirez</a> <p><a href="http://enrique-ramirez.com">Enrique Ramírez</a> is a Mexican front-end developer with over 9 years of experience and hundreds of websites coded. When he's not coding, he enjoys eating tacos, playing video games, listening to music or drinking a casual cold beer.</p>
</div>
</div>
<div class="related-articles">
<h2>Related Articles</h2>
<div class="related-article">
<a class="post-picture" href="http://coding.smashingmagazine.com/2009/07/08/free-typographic-xhtmlcss-layouts-for-your-designs/#more-8217" style="border: none;"><img src="http://provide.smashingmagazine.com/related-posts/related-posts-30012012-part1-010.jpg" alt="Free Typographic XHTML/CSS-Layouts For Your Designs"></a>
<h3><a href="http://coding.smashingmagazine.com/2009/07/08/free-typographic-xhtmlcss-layouts-for-your-designs/#more-8217">Free Typographic XHTML/CSS-Layouts For Your Designs</a></h3>
</div>
<div class="related-article">
<a class="post-picture" href="http://coding.smashingmagazine.com/2011/11/18/html5-semantics/#more-116204" style="border: none;"><img src="http://provide.smashingmagazine.com/related-posts/related-posts-30012012-part1-011.jpg" alt="HTML5 Semantics"></a>
<h3><a href="http://coding.smashingmagazine.com/2011/11/18/html5-semantics/#more-116204">HTML5 Semantics</a></h3>
</div>
<div class="related-article">
<a class="post-picture" href="http://coding.smashingmagazine.com/2011/11/12/pursuing-semantic-value/#more-116033" style="border: none;"><img src="http://provide.smashingmagazine.com/related-posts/related-posts-30012012-part1-012.jpg" alt="Pursuing Semantic Value"></a>
<h3><a href="http://coding.smashingmagazine.com/2011/11/12/pursuing-semantic-value/#more-116033">Pursuing Semantic Value</a></h3>
</div>
</div>
<!-- Smashing Magazine - Comment spnsr ed spot -->
<a id="comments"></a>
<div class="singlepost advertisement">
<span class="declare">Advertising</span>
<div id="commentspnsrtarget"><div id="commentspnsr"><style type="text/css">
div div.singlepost.advertisement span.declare {
display: none;
}
</style><style type="text/css">.comment-job-board { margin: 2em 6% 2em 0; background: #FEFED3; padding: 1.25em 1em; overflow: hidden; font: 1.2em/1.4em "Skolar Bold", Georgia, serif; }.comment-job-board a {display: block;color: #000;}.comment-job-board a span {padding-top:0.75em;display: block;font: 0.8em/1.4em "Proxima Nova Regular", Arial, sans-serif;}.comment-job-board a:focus, .comment-job-board a:active {background-color: transparent;}.comment-job-board img {float: right;margin: 0 0 0em 1em;}</style>
<div class="comment-job-board"><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=4551__zoneid=26__OXLCA=1__cb=158abab2b4__oadest=http%3A%2F%2Fjobs.smashingmagazine.com%2F%3Futm_source%3Dsm%26utm_medium%3Dtextad%26utm_campaign%3Dinternal" target="_self" style="border: none;"><img src="http://www.smashingmagazine.com/wp-content/uploads/2012/01/job-board-transparent.gif" style="border-radius: 5px; border: 1px solid rgba(0,0,0,0.05); padding: 7px; background-color: #fff; max-width: 95px !important;">Post your job listing in our Job Board!<span>If you're looking for a job or have a job opening to announce, post it in our job board and get noticed by professionals and well-respected companies. <b style="text-decoration: underline;font-family: Proxima Nova Bold, Proxima Nova, Arial">Submit a job listing</b>, and good luck!</span></a></div><div id="beacon_158abab2b4" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="http://auslieferung.commindo-media-ressourcen.de/www/delivery/lg.php?bannerid=4551&campaignid=1593&zoneid=26&loc=1&referer=http%3A%2F%2Fcoding.smashingmagazine.com%2F2009%2F08%2F04%2Fdesigning-a-html-5-layout-from-scratch%2F&cb=158abab2b4" alt="" style="width: 0px; height: 0px;"></div>
</div></div>
</div>
<ul class="sub-tabs clearfix">
<li><a href="#show-comments" class="active">198 Comments</a></li>
<li><a href="#best-comments">Best Comments</a></li></ul>
<div id="discussion" class="subtab-pages">
<div id="show-comments" style="display: block;">
<ol id="comments-overview" class="commentlist">
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">1</span>
<div class="comment" id="comment-372411">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/1896270c8cfb70ca1203fe8b39999bf8?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Yurgen</h3>
<span class="datetime"><a title="Commentlink #1" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372411">August 4th, 2009 12:06 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Wow! Very nice article.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372411#respond" onclick="return addComment.moveForm("comment-372411", "372411", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+17</div>
<a class="ratebtn down_active" id="btn-372411-down" style="opacity:0.3;" title="Vote down! (1 votes)"></a>
<a class="ratebtn up_active" id="btn-372411-up" style="opacity:0.3;" title="Vote up! (18 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">2</span>
<div class="comment" id="comment-372420">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/7246069e5b8df4ddedd185e3395ed298?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Le Marquis</h3>
<span class="datetime"><a title="Commentlink #2" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372420">August 4th, 2009 12:17 am</a></span>
</div>
</div>
<div class="comment-text">
<p>I’m diving in this article right now. Looks very impressive…</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372420#respond" onclick="return addComment.moveForm("comment-372420", "372420", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+5</div>
<a class="ratebtn down_active" id="btn-372420-down" style="opacity:0.3;" title="Vote down! (3 votes)"></a>
<a class="ratebtn up_active" id="btn-372420-up" style="opacity:0.3;" title="Vote up! (8 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">3</span>
<div class="comment" id="comment-372423">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/39c50f59631077764f39c7842dd1a305?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">MaTYO</h3>
<span class="datetime"><a title="Commentlink #3" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372423">August 4th, 2009 12:21 am</a></span>
</div>
</div>
<div class="comment-text">
<p>good tutorial, not sure weather or not to start coding in HTML5 or not yet tho! :/</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372423#respond" onclick="return addComment.moveForm("comment-372423", "372423", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+6</div>
<a class="ratebtn down_active" id="btn-372423-down" style="opacity:0.3;" title="Vote down! (3 votes)"></a>
<a class="ratebtn up_active" id="btn-372423-up" style="opacity:0.3;" title="Vote up! (9 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">4</span>
<div class="comment" id="comment-372424">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/90fbce3924bb9b26f23f6f4d5ceeaf6e?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Rich Clark</h3>
<span class="datetime"><a title="Commentlink #4" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372424">August 4th, 2009 12:25 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Hi</p>
<p>Good write up & thanks for the links to the HTML 5 Doctor & HTML 5 Gallery, hope you find them useful. A few things I feel that I should point out to make use of even more HTML 5 are.</p>
<p>* You can use the <code><time></code> element rather than <code><abbr></code> for the entry date, it’s more semantic and can still be used for microformats<br>
* The 2005-2009 paragraph would be more semantic in the now non-presentational <code><small></code> element<br>
* If you so wished each article could have a <code><h1></code> for it’s title<br>
* <code><figure></code> could include a <code><legend></code> (though until this is implemented in browsers you will have to use a <code><p class="legend"></code> replacement, see <a href="http://html5doctor.com/legend-not-such-a-legend-anymore/" rel="nofollow">http://html5doctor.com/legend-not-such-a-legend-anymore/</a></p>
<p>Hope that helps your readers.</p>
<p>Cheers</p>
<p>Rich Clark (a HTML 5 Doctor!)</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372424#respond" onclick="return addComment.moveForm("comment-372424", "372424", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+9</div>
<a class="ratebtn down_active" id="btn-372424-down" style="opacity:0.3;" title="Vote down! (2 votes)"></a>
<a class="ratebtn up_active" id="btn-372424-up" style="opacity:0.3;" title="Vote up! (11 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">5</span>
<div class="comment" id="comment-372429">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/1be2762c195c6b003e9c106927c7a356?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Masroor</h3>
<span class="datetime"><a title="Commentlink #5" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372429">August 4th, 2009 12:31 am</a></span>
</div>
</div>
<div class="comment-text">
<p>knowledgeable article!</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372429#respond" onclick="return addComment.moveForm("comment-372429", "372429", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+1</div>
<a class="ratebtn down_active" id="btn-372429-down" style="opacity:0.3;" title="Vote down! (2 votes)"></a>
<a class="ratebtn up_active" id="btn-372429-up" style="opacity:0.3;" title="Vote up! (3 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">6</span>
<div class="comment" id="comment-372438">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/9062898453308f76b9cf06f3e535e154?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">sooterkein</h3>
<span class="datetime"><a title="Commentlink #6" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372438">August 4th, 2009 12:45 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Huh…</p>
<p> html lang=es ? Espagnol ?</p>
<p>Ariba Ariba! Abrazar Smashing HTML 5!</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372438#respond" onclick="return addComment.moveForm("comment-372438", "372438", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+4</div>
<a class="ratebtn down_active" id="btn-372438-down" style="opacity:0.3;" title="Vote down! (1 votes)"></a>
<a class="ratebtn up_active" id="btn-372438-up" style="opacity:0.3;" title="Vote up! (5 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">7</span>
<div class="comment badrated" id="comment-372441">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/ab5869f38c613f5f072c18ae3951b5b6?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Bim</h3>
<span class="datetime"><a title="Commentlink #7" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372441">August 4th, 2009 12:52 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Interesting read. I’m going to give it a go. Thanks!</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372441#respond" onclick="return addComment.moveForm("comment-372441", "372441", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult negative">-8</div>
<a class="ratebtn down_active" id="btn-372441-down" style="opacity:0.3;" title="Vote down! (9 votes)"></a>
<a class="ratebtn up_active" id="btn-372441-up" style="opacity:0.3;" title="Vote up! (1 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">8</span>
<div class="comment" id="comment-372445">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/23f46ba24f8d2bf7c051236f2af13686?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">James</h3>
<span class="datetime"><a title="Commentlink #8" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372445">August 4th, 2009 12:59 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Great article! Why the lang=”es” though? “en” seems more appropriate, or have I completely misunderstood everything?</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372445#respond" onclick="return addComment.moveForm("comment-372445", "372445", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+1</div>
<a class="ratebtn down_active" id="btn-372445-down" style="opacity:0.3;" title="Vote down! (1 votes)"></a>
<a class="ratebtn up_active" id="btn-372445-up" style="opacity:0.3;" title="Vote up! (2 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">9</span>
<div class="comment" id="comment-372448">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/3a023a45fc1e1363227a8d32162051cc?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Daniel</h3>
<span class="datetime"><a title="Commentlink #9" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372448">August 4th, 2009 1:17 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Wow, this is very interesting! Great article.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372448#respond" onclick="return addComment.moveForm("comment-372448", "372448", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult negative">-4</div>
<a class="ratebtn down_active" id="btn-372448-down" style="opacity:0.3;" title="Vote down! (5 votes)"></a>
<a class="ratebtn up_active" id="btn-372448-up" style="opacity:0.3;" title="Vote up! (1 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">10</span>
<div class="comment" id="comment-372450">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/4fcc7c8fd5d2b543b9aa157f189be7a3?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">TheYves</h3>
<span class="datetime"><a title="Commentlink #10" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372450">August 4th, 2009 1:19 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Just AWESOME! Thanks!</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372450#respond" onclick="return addComment.moveForm("comment-372450", "372450", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult negative">-5</div>
<a class="ratebtn down_active" id="btn-372450-down" style="opacity:0.3;" title="Vote down! (5 votes)"></a>
<a class="ratebtn up_active" id="btn-372450-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">11</span>
<div class="comment" id="comment-372452">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/8653c2cb14be212d6ce5b7f5193959ac?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Julien L</h3>
<span class="datetime"><a title="Commentlink #11" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372452">August 4th, 2009 1:30 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Nice layout, i will have to go trought this tutorial.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372452#respond" onclick="return addComment.moveForm("comment-372452", "372452", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult negative">-5</div>
<a class="ratebtn down_active" id="btn-372452-down" style="opacity:0.3;" title="Vote down! (5 votes)"></a>
<a class="ratebtn up_active" id="btn-372452-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">12</span>
<div class="comment" id="comment-372453">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/6b7cf3f4e8f4967d25aa566b87653129?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">toso</h3>
<span class="datetime"><a title="Commentlink #12" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372453">August 4th, 2009 1:31 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Big Thanks, very helpfull for me</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372453#respond" onclick="return addComment.moveForm("comment-372453", "372453", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult negative">-2</div>
<a class="ratebtn down_active" id="btn-372453-down" style="opacity:0.3;" title="Vote down! (3 votes)"></a>
<a class="ratebtn up_active" id="btn-372453-up" style="opacity:0.3;" title="Vote up! (1 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">13</span>
<div class="comment" id="comment-372454">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/96fd62089ba92fa2cc24d63085db409a?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">sickdesigner</h3>
<span class="datetime"><a title="Commentlink #13" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372454">August 4th, 2009 1:33 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Ok, seriously not cool.</p>
<p>Why give classes and ids to every tag when HTML 5 is about a better semantic separation between code, one of the consequences of this being the lack of need for said classes and ids.<br>
It’s as pointless as <em> and in my opinion serves to further propagate classitis and iditis, both diseases related to the more famous divitis.</em></p><em>
</em><p><em>If you’re using CSS3 wouldn’t it be a much better choice to use > + etc. to style the specific element in relation to those around it, rather than use the “old”, css 2.1 way?</em></p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372454#respond" onclick="return addComment.moveForm("comment-372454", "372454", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+4</div>
<a class="ratebtn down_active" id="btn-372454-down" style="opacity:0.3;" title="Vote down! (3 votes)"></a>
<a class="ratebtn up_active" id="btn-372454-up" style="opacity:0.3;" title="Vote up! (7 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">14</span>
<div class="comment" id="comment-372456">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/f170e32acb89cc504e947bcdd7f2f171?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Saud Khan</h3>
<span class="datetime"><a title="Commentlink #14" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372456">August 4th, 2009 1:46 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Agree with Rich Clark (Comment #4); however this is still a good tutorial for anyone wishing to learn HTML5 and how to use it with progressive enhancement.</p>
<p>Due to high penetration of non-compliant browsers, progressive enhancement techniques are going to play vital role for several years even if HTML5 recommendations are finalized today.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372456#respond" onclick="return addComment.moveForm("comment-372456", "372456", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+1</div>
<a class="ratebtn down_active" id="btn-372456-down" style="opacity:0.3;" title="Vote down! (1 votes)"></a>
<a class="ratebtn up_active" id="btn-372456-up" style="opacity:0.3;" title="Vote up! (2 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">15</span>
<div class="comment" id="comment-372464">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/a9b7eddce37f61ea86a819e009e612dc?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">SiGa</h3>
<span class="datetime"><a title="Commentlink #15" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372464">August 4th, 2009 2:05 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Very useful and interesting, loads of new things to learn – thanks for that one!</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372464#respond" onclick="return addComment.moveForm("comment-372464", "372464", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult negative">-3</div>
<a class="ratebtn down_active" id="btn-372464-down" style="opacity:0.3;" title="Vote down! (3 votes)"></a>
<a class="ratebtn up_active" id="btn-372464-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">16</span>
<div class="comment" id="comment-372473">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/a8837987db589cd7557e5689e932b514?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Stephen</h3>
<span class="datetime"><a title="Commentlink #16" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372473">August 4th, 2009 2:19 am</a></span>
</div>
</div>
<div class="comment-text">
<p>The header wrapping a single h2 in the articles is probably redundant as header is meant to represent “a group of introductory or navigational aids” (from the <cite>HTML5 spec).</cite></p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372473#respond" onclick="return addComment.moveForm("comment-372473", "372473", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult negative">-5</div>
<a class="ratebtn down_active" id="btn-372473-down" style="opacity:0.3;" title="Vote down! (5 votes)"></a>
<a class="ratebtn up_active" id="btn-372473-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">17</span>
<div class="comment" id="comment-372477">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/fbd323e9c326533ab5c9757c53d8d198?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Teddy Zetterlund</h3>
<span class="datetime"><a title="Commentlink #17" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372477">August 4th, 2009 2:25 am</a></span>
</div>
</div>
<div class="comment-text">
<p>sickdesigner: You might want to consider how that’ll effect the performance though.</p>
<p>Enrique Ramírez: Instead of the “body” class, why not just use the body element as the page wrapper?</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372477#respond" onclick="return addComment.moveForm("comment-372477", "372477", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+2</div>
<a class="ratebtn down_active" id="btn-372477-down" style="opacity:0.3;" title="Vote down! (1 votes)"></a>
<a class="ratebtn up_active" id="btn-372477-up" style="opacity:0.3;" title="Vote up! (3 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">18</span>
<div class="comment" id="comment-372478">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/78a1712271a5c6a88fb849ce25ac039b?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Andy</h3>
<span class="datetime"><a title="Commentlink #18" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372478">August 4th, 2009 2:33 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Meh. For starters:</p>
<p>* title tag should be preceded by the meta charset tag.<br>
* Scripts to the bottom of the page to make sure they do not hinder parallel downloads.<br>
* Header text should probably not be a heading.<br>
* Navigation should not be part of the header for the sake of both semantics and (future re-)styling.<br>
* The heading of the main section of the page should be the first-level heading.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372478#respond" onclick="return addComment.moveForm("comment-372478", "372478", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+1</div>
<a class="ratebtn down_active" id="btn-372478-down" style="opacity:0.3;" title="Vote down! (2 votes)"></a>
<a class="ratebtn up_active" id="btn-372478-up" style="opacity:0.3;" title="Vote up! (3 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">19</span>
<div class="comment" id="comment-372480">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/6f3ec7315ad0715ae2a5f89a52877218?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">bruce</h3>
<span class="datetime"><a title="Commentlink #19" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372480">August 4th, 2009 2:43 am</a></span>
</div>
</div>
<div class="comment-text">
<p>its wrong to advise to “code for firefox” then tweak for IE, especially as you point out that ff3.5 can’tt deal with block-level anchors, which IE6 deals with easily.</p>
<p>you should never code to specific rendering engines, as they all have bugs. code to the standards, then tweak for browsers.</p>
<p>other than that, decent article.</p>
<p>bruce (another html5 doctor)</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372480#respond" onclick="return addComment.moveForm("comment-372480", "372480", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-372480-down" style="opacity:0.3;" title="Vote down! (2 votes)"></a>
<a class="ratebtn up_active" id="btn-372480-up" style="opacity:0.3;" title="Vote up! (2 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">20</span>
<div class="comment" id="comment-372484">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/8c6d67a7a5a46d0ab7a9b85f236a93a8?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">shaggy</h3>
<span class="datetime"><a title="Commentlink #20" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372484">August 4th, 2009 2:54 am</a></span>
</div>
</div>
<div class="comment-text">
<p>“Therefore, if your website is coded in standards compliant XHTML strict there’s no real need to change to HTML5.”<br>
Ok, my website is HTML4.01 Transitional compliant – do I have to switch to HTML5? NO.<br>
There are no real needs to change any website to HTML5… and if there are any, XHTML webpages should be the first candidate to be “re-coded” to HTML5.<br>
A lot of useless/well-known information, good for beginners, not so good for intermediate and very bad as HTML5 presentation.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372484#respond" onclick="return addComment.moveForm("comment-372484", "372484", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult negative">-6</div>
<a class="ratebtn down_active" id="btn-372484-down" style="opacity:0.3;" title="Vote down! (7 votes)"></a>
<a class="ratebtn up_active" id="btn-372484-up" style="opacity:0.3;" title="Vote up! (1 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">21</span>
<div class="comment" id="comment-372486">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/d78606b3355a17b53c9e290940599d52?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">chaitrax</h3>
<span class="datetime"><a title="Commentlink #21" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372486">August 4th, 2009 2:56 am</a></span>
</div>
</div>
<div class="comment-text">
<p>5 thanks…</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372486#respond" onclick="return addComment.moveForm("comment-372486", "372486", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+3</div>
<a class="ratebtn down_active" id="btn-372486-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-372486-up" style="opacity:0.3;" title="Vote up! (3 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">22</span>
<div class="comment" id="comment-372499">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/2479a53d896612bbb84dc5629ccf37da?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Gojeg</h3>
<span class="datetime"><a title="Commentlink #22" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372499">August 4th, 2009 3:42 am</a></span>
</div>
</div>
<div class="comment-text">
<p>I agree with bruce, there should be a standard to write a code.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372499#respond" onclick="return addComment.moveForm("comment-372499", "372499", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+1</div>
<a class="ratebtn down_active" id="btn-372499-down" style="opacity:0.3;" title="Vote down! (2 votes)"></a>
<a class="ratebtn up_active" id="btn-372499-up" style="opacity:0.3;" title="Vote up! (3 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">23</span>
<div class="comment" id="comment-372500">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/220d3f3a4fe18e1853d1416e7ce3b37b?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Groumphy Smurf</h3>
<span class="datetime"><a title="Commentlink #23" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372500">August 4th, 2009 3:44 am</a></span>
</div>
</div>
<div class="comment-text">
<p>“The tag defines some content aside from the article it is placed in. The aside content should be related to the article’s content.” _ w3school</p>
<p>You shouldn’t use an article tag in an aside one but the opposite.<br>
The aside and article tags you used for the sub-header part of the page may should be replaced by a unique section tag.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372500#respond" onclick="return addComment.moveForm("comment-372500", "372500", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult negative">-2</div>
<a class="ratebtn down_active" id="btn-372500-down" style="opacity:0.3;" title="Vote down! (4 votes)"></a>
<a class="ratebtn up_active" id="btn-372500-up" style="opacity:0.3;" title="Vote up! (2 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">24</span>
<div class="comment" id="comment-372505">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/bfabc6446c2fedd907a7e63949324ae9?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">John Faulds</h3>
<span class="datetime"><a title="Commentlink #24" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372505">August 4th, 2009 4:20 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Are you sure :last-child works with IE8.js. I use that script all the time to bootstrap CSS2/3 support in IE6 & 7 and was positive it didn’t work. And as far as I know IE8.js doesn’t work correctly with IE8 (the browser) so for that reason I’ve abandoned using :last-child but use first-child instead. You just need to think backwards – even though you might want a border or spacing to appear <em>after</em> an element, add it before and use :first-child, which has better browser support, from the first element.</p>
<p>(Another alternative is to use the :not selector, e.g. elementName:not(:first-child), but again its support is lacking in IE, even up to IE8.)</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372505#respond" onclick="return addComment.moveForm("comment-372505", "372505", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-372505-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-372505-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">25</span>
<div class="comment" id="comment-372506">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/5326a29a31e2fe0415a678727dbc544d?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Rusty</h3>
<span class="datetime"><a title="Commentlink #25" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372506">August 4th, 2009 4:22 am</a></span>
</div>
</div>
<div class="comment-text">
<p>@shaggy</p>
<p>Were you told you will need to change to html 5? NOOOOOOOOO!</p>
<p>This article if faaaaaaaar from useless, if you think you know more – go ahead and prove it! ;)</p>
<p>Great article.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372506#respond" onclick="return addComment.moveForm("comment-372506", "372506", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+6</div>
<a class="ratebtn down_active" id="btn-372506-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-372506-up" style="opacity:0.3;" title="Vote up! (6 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">26</span>
<div class="comment" id="comment-372510">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/4ece1deeee2ae23c4c0950a6ca4b9288?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Vinícius Borriello</h3>
<span class="datetime"><a title="Commentlink #26" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372510">August 4th, 2009 4:42 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Guess shaggy is far away from SEO future.</p>
<p>Very well explained article. Great!</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372510#respond" onclick="return addComment.moveForm("comment-372510", "372510", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-372510-down" style="opacity:0.3;" title="Vote down! (1 votes)"></a>
<a class="ratebtn up_active" id="btn-372510-up" style="opacity:0.3;" title="Vote up! (1 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">27</span>
<div class="comment" id="comment-372517">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/81896d92207969cdd5ec1520951f4043?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Mimouls</h3>
<span class="datetime"><a title="Commentlink #27" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372517">August 4th, 2009 5:04 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Thanks for this article ! A great way to start with html 5 for me. There will always be people who know things better than anyone and who can’t help but criticize… Thanks for the work and thanks for sharing.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372517#respond" onclick="return addComment.moveForm("comment-372517", "372517", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-372517-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-372517-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">28</span>
<div class="comment" id="comment-372519">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/ee60b7a7394c093b03487d3b0b291241?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">philipbeel</h3>
<span class="datetime"><a title="Commentlink #28" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372519">August 4th, 2009 5:05 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Just what I need to introduce myself to HTML5 and CSS3, great article cheers!</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372519#respond" onclick="return addComment.moveForm("comment-372519", "372519", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-372519-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-372519-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">29</span>
<div class="comment" id="comment-372525">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/a4357e773ab2bf9ff71f311cc03b406c?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Aaron</h3>
<span class="datetime"><a title="Commentlink #29" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372525">August 4th, 2009 5:20 am</a></span>
</div>
</div>
<div class="comment-text">
<p>I just don’t think it’s wise to start using HTML 5 or CSS3 until it’s completely finished and supported in the browsers. If people start developing in the new code it’s probably going to cause a lot of issues later on…there seems to be a lot of hacks and unknowns by glancing at the code and reading over this post. Although, I think this was very informative.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372525#respond" onclick="return addComment.moveForm("comment-372525", "372525", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult negative">-6</div>
<a class="ratebtn down_active" id="btn-372525-down" style="opacity:0.3;" title="Vote down! (7 votes)"></a>
<a class="ratebtn up_active" id="btn-372525-up" style="opacity:0.3;" title="Vote up! (1 votes)"></a>
</div>
</div>
</div>
<ul class="children">
<li class="comment odd alt depth-2 clearfix ">
<span class="commentnumber">30</span>
<div class="comment" id="comment-446172">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/79db48535d7b046906f6dd338dbbbc31?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Robert Wakeford</h3>
<span class="datetime"><a title="Commentlink #30" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-446172">March 10th, 2010 3:08 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>I certainly agree that html5 should not be used in production environments yet, however, I’ve been in this game for over ten years now, and bitter experience has shown me that you need to start getting yourself aquainted new technologies, as soon as they appear on the horizon otherwise you suddenly discover that the competition has adopted them and you’re seriously out dated, and playing catch-up.</p>
<p>I will certainly be creating sample html5 layouts to explore the new features.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=446172#respond" onclick="return addComment.moveForm("comment-446172", "446172", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-446172-down" style="opacity:0.3;" title="Vote down! (2 votes)"></a>
<a class="ratebtn up_active" id="btn-446172-up" style="opacity:0.3;" title="Vote up! (2 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even depth-2 clearfix ">
<span class="commentnumber">31</span>
<div class="comment" id="comment-446174">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/79db48535d7b046906f6dd338dbbbc31?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Robert Wakeford</h3>
<span class="datetime"><a title="Commentlink #31" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-446174">March 10th, 2010 3:18 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>I certainly agree that html5 should not be used in production environments yet, however, I’ve been in this game for over ten years now, and bitter experience has shown me that you need to start getting yourself aquainted new technologies, as soon as they appear on the horizon otherwise you suddenly discover that the competition has addopted them and you’re seriously out dated, and playing catch-up.</p>
<p>I will certainly be creating sample html5 layouts to explore the new features.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=446174#respond" onclick="return addComment.moveForm("comment-446174", "446174", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+3</div>
<a class="ratebtn down_active" id="btn-446174-down" style="opacity:0.3;" title="Vote down! (1 votes)"></a>
<a class="ratebtn up_active" id="btn-446174-up" style="opacity:0.3;" title="Vote up! (4 votes)"></a>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">32</span>
<div class="comment" id="comment-372526">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/fd8896210a071dbb0836160ccd616118?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Jessica</h3>
<span class="datetime"><a title="Commentlink #32" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372526">August 4th, 2009 5:20 am</a></span>
</div>
</div>
<div class="comment-text">
<p>OMG, theres no way I can keep up with this stuff, I’m still trying to wrap my head around CCS 1 lol ^_^ Good article though!!</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372526#respond" onclick="return addComment.moveForm("comment-372526", "372526", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+2</div>
<a class="ratebtn down_active" id="btn-372526-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-372526-up" style="opacity:0.3;" title="Vote up! (2 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">33</span>
<div class="comment" id="comment-372532">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/87f5d63ba16414a639260b07423d9817?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">choen</h3>
<span class="datetime"><a title="Commentlink #33" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372532">August 4th, 2009 5:29 am</a></span>
</div>
</div>
<div class="comment-text">
<p>nice article, btw can i convert to blogger (blogspot) template?</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372532#respond" onclick="return addComment.moveForm("comment-372532", "372532", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult negative">-2</div>
<a class="ratebtn down_active" id="btn-372532-down" style="opacity:0.3;" title="Vote down! (3 votes)"></a>
<a class="ratebtn up_active" id="btn-372532-up" style="opacity:0.3;" title="Vote up! (1 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">34</span>
<div class="comment" id="comment-372533">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/4ca9c0cdd80876b3b3ab5efc6a4c5d73?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Pradeep CD</h3>
<span class="datetime"><a title="Commentlink #34" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372533">August 4th, 2009 5:40 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Good stuff… HTML 5 is great…easy…</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372533#respond" onclick="return addComment.moveForm("comment-372533", "372533", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+2</div>
<a class="ratebtn down_active" id="btn-372533-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-372533-up" style="opacity:0.3;" title="Vote up! (2 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">35</span>
<div class="comment" id="comment-372538">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/cfc9eb0b9528819a8705287b88da29f9?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Craig</h3>
<span class="datetime"><a title="Commentlink #35" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372538">August 4th, 2009 5:55 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Thanks! Really looking forward to all of the great HTML5 stuff to come.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372538#respond" onclick="return addComment.moveForm("comment-372538", "372538", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+2</div>
<a class="ratebtn down_active" id="btn-372538-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-372538-up" style="opacity:0.3;" title="Vote up! (2 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">36</span>
<div class="comment" id="comment-372542">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/9407de63dee0ac8d0708fedb1f8b10a5?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">James</h3>
<span class="datetime"><a title="Commentlink #36" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372542">August 4th, 2009 6:10 am</a></span>
</div>
</div>
<div class="comment-text">
<p>@Aaron – HTML 4 isn’t properly implemented yet in IE, but I bet you have ‘already’ started using it?</p>
<p>I would have liked to see a better explanation for why the author decided to use the XML serialisation here, other than just ‘because I prefer the way it looks’ – it means extra bytes on the page, so what advantage is gained?</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372542#respond" onclick="return addComment.moveForm("comment-372542", "372542", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-372542-down" style="opacity:0.3;" title="Vote down! (1 votes)"></a>
<a class="ratebtn up_active" id="btn-372542-up" style="opacity:0.3;" title="Vote up! (1 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">37</span>
<div class="comment" id="comment-372548">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/ada1350fe5fa07c426869541ba2497de?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Chris Herdt</h3>
<span class="datetime"><a title="Commentlink #37" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372548">August 4th, 2009 6:35 am</a></span>
</div>
</div>
<div class="comment-text">
<p>I feel the <figure> tag is misused to enclose the images, as in this case they are just logo graphics and do not really meet the criteria of a figure. Is there any reason why you have put them in <figure> tags, other than to have a container to which you can apply styles–or perhaps just to illustrate the use of the tag?</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372548#respond" onclick="return addComment.moveForm("comment-372548", "372548", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-372548-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-372548-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">38</span>
<div class="comment" id="comment-372550">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/96b0d87588dd8ee1855781a616c05926?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">nhavar</h3>
<span class="datetime"><a title="Commentlink #38" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372550">August 4th, 2009 6:41 am</a></span>
</div>
</div>
<div class="comment-text">
<p>James, I can’t speak for the author but I can for myself. XML serialization is easier to validate and takes the guess work out of coding for the developer. It’s also supported by most of the editing tools. Should the developer have to remember that he has to close a div but doesn’t have to close a p tag or shouldn’t it just be best practice to close all tags and carry a few extra bytes down the pipe?</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372550#respond" onclick="return addComment.moveForm("comment-372550", "372550", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-372550-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-372550-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">39</span>
<div class="comment" id="comment-372552">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/4a16dea2205b959c26bf9a6284e3c938?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Pipo Zoft</h3>
<span class="datetime"><a title="Commentlink #39" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372552">August 4th, 2009 6:49 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Thank you for share your knowledge with us…..</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372552#respond" onclick="return addComment.moveForm("comment-372552", "372552", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+2</div>
<a class="ratebtn down_active" id="btn-372552-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-372552-up" style="opacity:0.3;" title="Vote up! (2 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">40</span>
<div class="comment" id="comment-372554">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/af4ffd88857ef429ac98c1acf9a0e2f3?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Brett</h3>
<span class="datetime"><a title="Commentlink #40" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372554">August 4th, 2009 6:52 am</a></span>
</div>
</div>
<div class="comment-text">
<p>I’m curious about HTML 5 and SEO. I know there are major benefits from the improved semantics, yet they are not picked up yet by screen readers/ search engines, at least not now. </p>
<p>If I start using HTML5 will there be a decrease/increase in the SEO of my sites?</p>
<p>I’d like to make the switch yet SEO is very important to my clients and am a little weary. Does anyone have some info/sources about HTML 5 and current SEO?</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372554#respond" onclick="return addComment.moveForm("comment-372554", "372554", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult negative">-1</div>
<a class="ratebtn down_active" id="btn-372554-down" style="opacity:0.3;" title="Vote down! (1 votes)"></a>
<a class="ratebtn up_active" id="btn-372554-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">41</span>
<div class="comment" id="comment-372555">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/96b0d87588dd8ee1855781a616c05926?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">nhavar</h3>
<span class="datetime"><a title="Commentlink #41" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372555">August 4th, 2009 6:55 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Rich Clark, how is small no longer non-presentational. What does the search engine do with small? Doesn’t small just tell the renderer the same thing it always has, make this text small? Or can we now use it to distinguish characteristics of an object like I have a <small>dog</small>?</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372555#respond" onclick="return addComment.moveForm("comment-372555", "372555", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-372555-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-372555-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
<ul class="children">
<li class="comment odd alt depth-2 clearfix ">
<span class="commentnumber">42</span>
<div class="comment" id="comment-506819">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/8b2e6199b9c31bf227a67bfbb362cf43?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">rdjpalmer</h3>
<span class="datetime"><a title="Commentlink #42" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-506819">January 8th, 2011 9:17 am</a></span>
</div>
</div>
<div class="comment-text">
<p>The tag is meant to be used for small text and side comments. Personally, I’d use it for copyright and small print – since they’re not massively important unless someone is looking for them.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=506819#respond" onclick="return addComment.moveForm("comment-506819", "506819", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-506819-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-506819-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="comment even thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">43</span>
<div class="comment" id="comment-372558">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/635a189a950e2e72df6723367389505e?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">tariqdesign</h3>
<span class="datetime"><a title="Commentlink #43" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372558">August 4th, 2009 7:10 am</a></span>
</div>
</div>
<div class="comment-text">
<p>can give us</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372558#respond" onclick="return addComment.moveForm("comment-372558", "372558", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult negative">-1</div>
<a class="ratebtn down_active" id="btn-372558-down" style="opacity:0.3;" title="Vote down! (1 votes)"></a>
<a class="ratebtn up_active" id="btn-372558-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-even depth-1 clearfix ">
<span class="commentnumber">44</span>
<div class="comment" id="comment-372560">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/635a189a950e2e72df6723367389505e?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">tariqdesign</h3>
<span class="datetime"><a title="Commentlink #44" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372560">August 4th, 2009 7:13 am</a></span>
</div>
</div>
<div class="comment-text">
<p>can give us all source files</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372560#respond" onclick="return addComment.moveForm("comment-372560", "372560", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult negative">-1</div>
<a class="ratebtn down_active" id="btn-372560-down" style="opacity:0.3;" title="Vote down! (1 votes)"></a>
<a class="ratebtn up_active" id="btn-372560-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">45</span>
<div class="comment" id="comment-372572">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/3a0e45aaf84854a195d6fbb4ce44b5ce?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Eric Miller</h3>
<span class="datetime"><a title="Commentlink #45" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372572">August 4th, 2009 7:29 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Amazing article, got me really thinking about HTML5 in my future.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372572#respond" onclick="return addComment.moveForm("comment-372572", "372572", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-372572-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-372572-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-even depth-1 clearfix ">
<span class="commentnumber">46</span>
<div class="comment" id="comment-372586">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/c98bd8d5eec06596f221f57b024aa042?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">masochismtango</h3>
<span class="datetime"><a title="Commentlink #46" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372586">August 4th, 2009 8:09 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Surely the definitions of “progressive enhancement” and “graceful degradation” given here are misleading and contradictory?</p>
<p>I’ve always understood graceful degradation to mean craftng your markup to make some semantic sense on lower-end / simpler user agents, with CSS doing the heavy lifting of making it look right on any modern browser – for example the habit of making nav bars out of ul lists. This is quite different from coding for modern browsers and fixing bugs as they appear – it’s all about making logical tag selections.</p>
<p>Then progressive enhancement is the building of a site to work on a basic browser, but adding additional functionality such as AJAX form field enhancements, popup help or whatever to any browser with advanced CSS and/or scripting – write markup which fundamentally works for everyone, but add improvements for those that can.</p>
<p>In essence then, the reference point for both is a fairly standard working browser, with PE allowing users of better browsers to have an improved experience and GD ensuring that simpler readers can still make some sense of it all. Forgive me if I have misunderstood, and it really is all about coding for the most advanced browsers and the least capable ones at the same time, and then bug fixing and improving afterwards…</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372586#respond" onclick="return addComment.moveForm("comment-372586", "372586", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-372586-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-372586-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
<ul class="children">
<li class="comment even depth-2 clearfix ">
<span class="commentnumber">47</span>
<div class="comment" id="comment-412535">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/c7c1762d09575c1d090279855413e953?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Doodles</h3>
<span class="datetime"><a title="Commentlink #47" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-412535">November 19th, 2009 9:13 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>I agree with this. Graceful degradation does not mean that in the article.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=412535#respond" onclick="return addComment.moveForm("comment-412535", "412535", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-412535-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-412535-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">48</span>
<div class="comment" id="comment-372588">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/19dc9a5635e3c4534dcea50157ae295e?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Nathan</h3>
<span class="datetime"><a title="Commentlink #48" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372588">August 4th, 2009 8:11 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Why ad an unordered list to the nav ? The idea behind nav is to eliminate unordered lists as navigation.</p>
<p>nav<br>
a<br>
a<br>
a<br>
a<br>
/nav</p>
<p>is much smaller and easier to read. If you need to wrap the anchors you can add</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372588#respond" onclick="return addComment.moveForm("comment-372588", "372588", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-372588-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-372588-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
<ul class="children">
<li class="comment even depth-2 clearfix ">
<span class="commentnumber">49</span>
<div class="comment" id="comment-449869">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/932716ba70094c4114af7e5b81d3ec28?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Lars</h3>
<span class="datetime"><a title="Commentlink #49" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-449869">March 28th, 2010 2:53 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>nav<br>
a<br>
a<br>
a<br>
a<br>
/nav</p>
<p>An unordered list is simply just a LIST. And all it’s doing is sorting the info that belongs the the set of links. STOP THINKING OF APPEARANCE WHEN WORKING WITH HTML!!! I recommend getting in the regular habit of disabling styles when browsing the web. In most cases, it doesn’t interfere with the functionality of the site you’re in, UNLESS YOUR HUMAN. That’s right, I said human. It’s important to remind ourselves that we humans are sharing the internet with search bots, who are MUCH MORE efficient at reading it if they can do so WITHOUT ALL THE WINDOW DRESSING.</p>
<p>In Firefox, go to View > Page Style > No Style. It’s AWESOME!!!</p>
<p>I like to toggle CSS on an off with a keyboard shortcut, which is (control – shift – S) when you have the Web Developer 1.1.8 extension installed.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=449869#respond" onclick="return addComment.moveForm("comment-449869", "449869", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult negative">-5</div>
<a class="ratebtn down_active" id="btn-449869-down" style="opacity:0.3;" title="Vote down! (6 votes)"></a>
<a class="ratebtn up_active" id="btn-449869-up" style="opacity:0.3;" title="Vote up! (1 votes)"></a>
</div>
</div>
</div>
<ul class="children">
<li class="comment odd alt depth-3 clearfix ">
<span class="commentnumber">50</span>
<div class="comment" id="comment-454416">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/725a1650e19d38e83047424e0755e7fa?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Bird</h3>
<span class="datetime"><a title="Commentlink #50" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-454416">April 17th, 2010 8:05 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>LARS, STOP SHOUTING. YOU’RE HURTING MY EARS.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=454416#respond" onclick="return addComment.moveForm("comment-454416", "454416", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+6</div>
<a class="ratebtn down_active" id="btn-454416-down" style="opacity:0.3;" title="Vote down! (1 votes)"></a>
<a class="ratebtn up_active" id="btn-454416-up" style="opacity:0.3;" title="Vote up! (7 votes)"></a>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">51</span>
<div class="comment" id="comment-372589">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/68953682bb54e747ec52b929eae64dee?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">All for Design</h3>
<span class="datetime"><a title="Commentlink #51" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372589">August 4th, 2009 8:11 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Wahoo…<br>
Very impressive and useful post !<br>
I didn’t know html5, now, with your help, I understand a little bit more :)<br>
Thanks for sharing !</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372589#respond" onclick="return addComment.moveForm("comment-372589", "372589", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-372589-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-372589-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">52</span>
<div class="comment" id="comment-372590">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/39d0a014d4954a436a8628d4e57a60c0?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Sittinhere_</h3>
<span class="datetime"><a title="Commentlink #52" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372590">August 4th, 2009 8:12 am</a></span>
</div>
</div>
<div class="comment-text">
<p>I wonder if using css reset would help with some of the gaps / extra margin / extra padding.</p>
<p>Also, is it true that if you code in XHTML Strict that you don’t really have to use HTML 5?</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372590#respond" onclick="return addComment.moveForm("comment-372590", "372590", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-372590-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-372590-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">53</span>
<div class="comment" id="comment-372594">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/4ddcb95d2042e2eb597a5afe9afcce7c?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Mateusz Gwóźdź</h3>
<span class="datetime"><a title="Commentlink #53" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372594">August 4th, 2009 8:29 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Hello everyone!<br>
it doesn’t make any sense for me… why to use for ex. tag instead of simple . It is not that I don’t want to change my techniques, cause I am always happy to learn more, but when it makes a point. We should discuss this actually… I ve been reading most of smashing articles, and I appreciate this one as well, thanks.<br>
What about some smashing chat/forum/skype group etc? Just an idea…<br>
and one more thing, u r describing all of these techniques for making nice websites so why not to apply some of them to yours? :) and one more idea is… “comments rss” for every article, so ppl who discuss can just subscribe instead of checking in browser “has anybody replied to my comment?”<br>
Thanks again! I truly love this website!</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372594#respond" onclick="return addComment.moveForm("comment-372594", "372594", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult negative">-1</div>
<a class="ratebtn down_active" id="btn-372594-down" style="opacity:0.3;" title="Vote down! (1 votes)"></a>
<a class="ratebtn up_active" id="btn-372594-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">54</span>
<div class="comment" id="comment-372598">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/ef54118d57973d4ada988fa191d60dad?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">LewisMC</h3>
<span class="datetime"><a title="Commentlink #54" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372598">August 4th, 2009 8:40 am</a></span>
</div>
</div>
<div class="comment-text">
<p>@Nathan I agree that a list inside a ‘nav’ is additional markup but navigation links should be delimited by more than white-space for accessibility.<br>
There should be a nav item element, otherwise ‘nav’ acts as a wrapper for the ‘ul’ which is already a block element so is a waste of time.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372598#respond" onclick="return addComment.moveForm("comment-372598", "372598", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-372598-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-372598-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">55</span>
<div class="comment" id="comment-372605">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/fdfddef692fe761459cd842142398778?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Matt</h3>
<span class="datetime"><a title="Commentlink #55" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372605">August 4th, 2009 9:08 am</a></span>
</div>
</div>
<div class="comment-text">
<p>GREAT article!</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372605#respond" onclick="return addComment.moveForm("comment-372605", "372605", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-372605-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-372605-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">56</span>
<div class="comment" id="comment-372610">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/4ec77f01bb884cac3ed963981d250737?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Tylor</h3>
<span class="datetime"><a title="Commentlink #56" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372610">August 4th, 2009 9:22 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Awesome! Going to give it a go later tonight.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372610#respond" onclick="return addComment.moveForm("comment-372610", "372610", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-372610-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-372610-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">57</span>
<div class="comment" id="comment-372619">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/eca27311b108052a1863b0d0b7c6c1b4?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Brian Lischer</h3>
<span class="datetime"><a title="Commentlink #57" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372619">August 4th, 2009 10:02 am</a></span>
</div>
</div>
<div class="comment-text">
<p>great work! thanks for the insight.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372619#respond" onclick="return addComment.moveForm("comment-372619", "372619", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-372619-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-372619-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">58</span>
<div class="comment" id="comment-372621">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/25c63a789393cbb22c9407463c9a1e28?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Enrique Ramírez</h3>
<span class="datetime"><a title="Commentlink #58" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372621">August 4th, 2009 10:15 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Wow, nice feedback. Just what I expected!</p>
<p>The first mission of this article was to show that HTML5 can indeed be used today with no visual differences for any browser (which was one of the main reasons HTML5 is being held back right now). Most of the issues commented above are precisely a “feature” and not a “bug” on this article.</p>
<p>Take the figure, for example. I know I sould use a ‘legend’ tag inside, but as I said, it’s impossible to style it properly. a paragraph tag with a legend class on it will help with that, of course, didn’t think about it. Also, it is not missused, but badly exemplified. The featured box is meant to be a featured article which has an illustration with a caption. I couldn’t think of any other image but the smashing magazine logo, but that image should be an image relevant to the post. For example: if the featured article is about a newborn panda in China, that image could be a photo of the panda with a caption “Roger, the newborn panda next to his mother”. Sorry for not being clear about that.</p>
<p>XHTML serialization was used to show that it is NOT needed to “adjust” your coding habits to yet another markup. You can write your markup the same way you’ve always done it. If you’re used to the HTML4 markup, go ahead. Come from an XHTML strict world? You’re welcome too! It does not matter. XHTML serialization gives some advantages that, to me, are very important (predictable, easier to understand code for example). But that was out of the main point of this article.</p>
<p>Sorry about the “es” lang. Totally slipped my mind. You should change it to whatever language the document is in (in the example, it should’ve been “en”).</p>
<p>As for all the other comments, thank you. You’ve made this article what I wanted it to be in the first place. Truth is, HTML5 is still under development, and it’ll be a while until we fully understand how and when to use each new element we have. This article here gives some ideas, but what really is worth gold are all your comments. No one is never completely right nor completely wrong, so share your thoughts!</p>
<p>Finally, take heed of both Richard Clark’s (#4) and bruce’s (#19) comments. They both have cleared up stuff I’ve passed by or got wrong. :)</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372621#respond" onclick="return addComment.moveForm("comment-372621", "372621", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult negative">-1</div>
<a class="ratebtn down_active" id="btn-372621-down" style="opacity:0.3;" title="Vote down! (2 votes)"></a>
<a class="ratebtn up_active" id="btn-372621-up" style="opacity:0.3;" title="Vote up! (1 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">59</span>
<div class="comment" id="comment-372637">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/0a577c41cde30752036471c926d94515?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">skube</h3>
<span class="datetime"><a title="Commentlink #59" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372637">August 4th, 2009 11:13 am</a></span>
</div>
</div>
<div class="comment-text">
<p>I agree with sickdesigner (#13).</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372637#respond" onclick="return addComment.moveForm("comment-372637", "372637", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+1</div>
<a class="ratebtn down_active" id="btn-372637-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-372637-up" style="opacity:0.3;" title="Vote up! (1 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">60</span>
<div class="comment" id="comment-372643">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/e1d42345f603f84a842903fb6a984893?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">SohelElite</h3>
<span class="datetime"><a title="Commentlink #60" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372643">August 4th, 2009 11:35 am</a></span>
</div>
</div>
<div class="comment-text">
<p><b>Great work</b> expects some more !!!!</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372643#respond" onclick="return addComment.moveForm("comment-372643", "372643", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-372643-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-372643-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">61</span>
<div class="comment" id="comment-372647">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/2ff2f38f3dc4fa46ab61df401f079522?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Jonathan Hack</h3>
<span class="datetime"><a title="Commentlink #61" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372647">August 4th, 2009 12:07 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>Great tutorial Enrique!</p>
<p>I’ll definitely be coming back to this one as I start to delve into the HTML5 wonder.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372647#respond" onclick="return addComment.moveForm("comment-372647", "372647", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-372647-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-372647-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">62</span>
<div class="comment" id="comment-372648">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/1f60c0418e5d1859c02a271a81b4f8bc?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">misuse</h3>
<span class="datetime"><a title="Commentlink #62" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372648">August 4th, 2009 12:08 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>Doesn’t seem like you have used HTML5 to its full potential. It almost seems that you wrapped HTML4 with extra tags and annoyance rather than using the new features of HTML5. Its like an XML schema horribly designed.</p>
<p>CSS3 looks amazing though, talk about flexibility.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372648#respond" onclick="return addComment.moveForm("comment-372648", "372648", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-372648-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-372648-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">63</span>
<div class="comment" id="comment-372652">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/e84c9e9316674e0507a9926d4afbacdb?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Tomás Camusso</h3>
<span class="datetime"><a title="Commentlink #63" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372652">August 4th, 2009 12:20 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>Outstanding article, thanks so much !<br>
(Anyway, I agree with sickdesigner)</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372652#respond" onclick="return addComment.moveForm("comment-372652", "372652", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+1</div>
<a class="ratebtn down_active" id="btn-372652-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-372652-up" style="opacity:0.3;" title="Vote up! (1 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">64</span>
<div class="comment" id="comment-372656">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/5f19aea43aff171a45849fff2a01aa41?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Jeffrey Sambells</h3>
<span class="datetime"><a title="Commentlink #64" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372656">August 4th, 2009 12:56 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>Nice. I’ll have to go update my blog with all this HTML5 goodness and get ahead of the curve.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372656#respond" onclick="return addComment.moveForm("comment-372656", "372656", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-372656-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-372656-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">65</span>
<div class="comment" id="comment-372665">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/25c63a789393cbb22c9407463c9a1e28?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Enrique Ramírez</h3>
<span class="datetime"><a title="Commentlink #65" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372665">August 4th, 2009 1:27 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>@sickdesigner (#13), @skube & @Tomás Camusso – Classes and IDs are still as important as they were before. More semantic tags doesn’t mean they won’t serve for different purposes on a website.</p>
<p>Take the header tag, for example. I have one for the main page header and one for each article. I need a way of defining different uses of the same tags, and the best way continues to be ID’s and/or classes. Theorically we could use the role attribute, but styling it would be hard because of lack of cross-browser support for some CSS selectors.</p>
<p>Also, for the time being, we need classes for microformats (at least until the “item” and “itemprop” attributes can be used).</p>
<p>Yet, I agree I could’ve used less classes for the markup, but I tried to do it as straightforward and easy to understand as possible.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372665#respond" onclick="return addComment.moveForm("comment-372665", "372665", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+1</div>
<a class="ratebtn down_active" id="btn-372665-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-372665-up" style="opacity:0.3;" title="Vote up! (1 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">66</span>
<div class="comment" id="comment-372668">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/a6af2c09103913255f2be27fb0d84b58?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Shane - Inspiring Your Success</h3>
<span class="datetime"><a title="Commentlink #66" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372668">August 4th, 2009 1:32 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>Impressive. I never knew any of this! Still not sure why and are better than ?</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372668#respond" onclick="return addComment.moveForm("comment-372668", "372668", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult negative">-1</div>
<a class="ratebtn down_active" id="btn-372668-down" style="opacity:0.3;" title="Vote down! (1 votes)"></a>
<a class="ratebtn up_active" id="btn-372668-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">67</span>
<div class="comment" id="comment-372676">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/07e446c77c158ca538e21963eb3e20de?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Edgar Valdés</h3>
<span class="datetime"><a title="Commentlink #67" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372676">August 4th, 2009 2:24 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>Useful, thanks.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372676#respond" onclick="return addComment.moveForm("comment-372676", "372676", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-372676-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-372676-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">68</span>
<div class="comment" id="comment-372693">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/91c57dc9822a8710f230d1f1b80097d6?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Seth Aldridge</h3>
<span class="datetime"><a title="Commentlink #68" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372693">August 4th, 2009 3:10 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>I don’t understand using Content</p>
<p>The H2 is already widely known as a heading element. I feel the same way about the tag. It is no different than . I think we have completely over complicated the issue with HTML 5 to some degree. I get that we are trying to specify what each element is to help setup the page structure, but this feels very limiting and focused more on developing a language for blogging.</p>
<p>It seems that we have advanced in some respects with HTML5, but I feel a lot of what I’m seeing will be quickly depreciated once we get less development by community and more development by innovation.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372693#respond" onclick="return addComment.moveForm("comment-372693", "372693", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-372693-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-372693-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">69</span>
<div class="comment" id="comment-372705">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/3cef3eadb9cb81b668f17bbd958e8e87?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Michael Ionita</h3>
<span class="datetime"><a title="Commentlink #69" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372705">August 4th, 2009 3:42 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>Thank you for this great article.</p>
<p>I can’t wait to get rid of IE6 (and 7 if we’re at it) and start using more very nice CSS 2/3 selectors.</p>
<p>Keep on the good work..<br>
Greets</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372705#respond" onclick="return addComment.moveForm("comment-372705", "372705", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-372705-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-372705-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">70</span>
<div class="comment" id="comment-372712">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/12ce1598b801acb170599e0ec8e30750?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">TheKat</h3>
<span class="datetime"><a title="Commentlink #70" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372712">August 4th, 2009 4:51 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>Would love to see this linked to a PDF – prints out horribly in both FF and IE8, and I’d love a hard copy to be able to peruse on the bus ride at night. Otherwise a fantastic article and well worth reading.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372712#respond" onclick="return addComment.moveForm("comment-372712", "372712", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-372712-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-372712-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">71</span>
<div class="comment" id="comment-372714">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/c2427f2f932a172b5de2a4073ea2cd6d?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">r_jake</h3>
<span class="datetime"><a title="Commentlink #71" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372714">August 4th, 2009 5:01 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>Like Brett #38, I am wondering how far Google has got in terms of getting its bots to interpret the meaning of all the new tags, and how this would affect SEO?</p>
<p>As far I as can see, the main reason to want to start using HTML5 and having to put in extra markup to ensure all browsers are supported would be the additional semantic value offered by the new elements. However these are not a great deal of use if Google isn’t (yet) recognising them in a crawl, so what’s the point?</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372714#respond" onclick="return addComment.moveForm("comment-372714", "372714", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult negative">-1</div>
<a class="ratebtn down_active" id="btn-372714-down" style="opacity:0.3;" title="Vote down! (1 votes)"></a>
<a class="ratebtn up_active" id="btn-372714-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">72</span>
<div class="comment" id="comment-372730">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/af4ffd88857ef429ac98c1acf9a0e2f3?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Brett</h3>
<span class="datetime"><a title="Commentlink #72" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372730">August 4th, 2009 6:41 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>@r_jake #65 – What I’ve found out about the current state of SEO, HTML5, and search engines is that even though HTML5 offers far more means for defining content with mark-up it will be a long time before search engines recognize the new mark-up and actually start basing search results off of the new markup. Yet what I’m wondering I guess is if I do start using HTML 5, will tags like header, nav, aside, and so on just be equal to say a div tag as far as semantics go, until the search engines recognize the markup? I would love to know, hear, learn more about this issue.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372730#respond" onclick="return addComment.moveForm("comment-372730", "372730", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult negative">-1</div>
<a class="ratebtn down_active" id="btn-372730-down" style="opacity:0.3;" title="Vote down! (1 votes)"></a>
<a class="ratebtn up_active" id="btn-372730-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">73</span>
<div class="comment" id="comment-372802">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/f78549e50ded27045d835d67812e56cd?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Andy</h3>
<span class="datetime"><a title="Commentlink #73" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372802">August 4th, 2009 11:39 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>Progressive enhancement:</p>
<blockquote cite="Smashing Magazine"><p>building first for the less capable, outdated browser and then enhance for the latest technologies</p></blockquote>
<p>Don’t forget that we should be building for accessibility too – design and code from the beginning not only for outdated <em>browsers</em> but also for other devices, such as assistive technologies. Too often we worry about what a design looks like in a browser – i.e. to a sighted person. Plenty of blind people use the web too and the Progressive Enhancement ideology, when applied properly, can make a website useable for them too.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372802#respond" onclick="return addComment.moveForm("comment-372802", "372802", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+2</div>
<a class="ratebtn down_active" id="btn-372802-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-372802-up" style="opacity:0.3;" title="Vote up! (2 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">74</span>
<div class="comment" id="comment-372807">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/8122e138672f0266a009f6ee67178b80?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Tim Piele</h3>
<span class="datetime"><a title="Commentlink #74" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372807">August 5th, 2009 12:01 am</a></span>
</div>
</div>
<div class="comment-text">
<p>This is a great article. The future looks bright with HTML5, CSS3 and advancements in PHP, Ruby and JQuery. At this point, which browsers support HTML5 and CSS3 designs like this?</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372807#respond" onclick="return addComment.moveForm("comment-372807", "372807", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult negative">-2</div>
<a class="ratebtn down_active" id="btn-372807-down" style="opacity:0.3;" title="Vote down! (2 votes)"></a>
<a class="ratebtn up_active" id="btn-372807-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">75</span>
<div class="comment" id="comment-372810">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/55b823b86cff47fb729ba4c1988ddc8e?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Steve Fenton</h3>
<span class="datetime"><a title="Commentlink #75" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372810">August 5th, 2009 12:14 am</a></span>
</div>
</div>
<div class="comment-text">
<p>I think this article has good value – it’s an introduction to HTML5, rather than a definitive usage guide.</p>
<p>I do agree with posts 13 18 19 23 35 48 – perhaps there’s scope for a follow up where these are taken into account. The point about not adding id and class attributes everywhere is valid and if you are more restrained here, your CSS becomes easier to maintain.</p>
<p>I tested HTML in a load of browsers and found that much of the “IF IE” stuff can help on some other fringe browsers too – and it doesn’t harm any of them. For that reason, I don’t conditionally add the JavaScript and CSS shims, I just add them as standard. This gets things working in a few more browsers.</p>
<p>I’m not planning on using HTML 5 on a client’s website for some time, but I am using it on my own website already in order to try it all out and keep up to speed (www.stevefenton.co.uk).- I know where my site appears in Google at the moment so I’ll keep an eye on that to see if anything changes. Knowing how Google operate, I imagine they are already ahead of the curve on HTML5 – not just in recognising the semantics but also in terms of spotting search-engine spammers who stuff rubbish into heading tags etc!</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372810#respond" onclick="return addComment.moveForm("comment-372810", "372810", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult negative">-1</div>
<a class="ratebtn down_active" id="btn-372810-down" style="opacity:0.3;" title="Vote down! (1 votes)"></a>
<a class="ratebtn up_active" id="btn-372810-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">76</span>
<div class="comment" id="comment-372812">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/c2c1340b45c2a86b9839d9f80f4135cc?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Snookerman</h3>
<span class="datetime"><a title="Commentlink #76" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372812">August 5th, 2009 12:21 am</a></span>
</div>
</div>
<div class="comment-text">
<p>The definition for graceful degradation is totally wrong.</p>
<p>Graceful degradation means you build a site using progressive enhancement so that it will degrade gracefully in less modern browsers, thereof the name “graceful degradation”. It doesn’t have anything to do with <em>how</em> you build the site.</p>
<p>It just means that if you progressively enhance a site, meaning you use the most basic markup, supported by all browsers and then progressively add more advanced code, like JavaScript for instance, it will still look good in a browser that doesn’t support JavaScript or for users that have it turned off. They will just see the “lower level” of the site.</p>
<p>I’m sure my explanation has flaws and is not very clear but Enrique Ramirez, you have no idea what you are talking about. SM, get some writers that have their facts right.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372812#respond" onclick="return addComment.moveForm("comment-372812", "372812", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult negative">-3</div>
<a class="ratebtn down_active" id="btn-372812-down" style="opacity:0.3;" title="Vote down! (4 votes)"></a>
<a class="ratebtn up_active" id="btn-372812-up" style="opacity:0.3;" title="Vote up! (1 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">77</span>
<div class="comment" id="comment-372823">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/25c63a789393cbb22c9407463c9a1e28?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Enrique Ramírez</h3>
<span class="datetime"><a title="Commentlink #77" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372823">August 5th, 2009 1:14 am</a></span>
</div>
</div>
<div class="comment-text">
<p>@Andy (#67) – Totally agree. Good coding practices will inevitably lead to accessible code, and with the increasing use of assistive technologies to bring the web to more users, this is a really important matter.</p>
<p>@Snookerman – I feel you, and I think I could’ve explained it way better than what I did. Main problem is that it’s not even an explanation, but a quick, single-lined example on both terms. Should have explained that by “technologies” I didn’t mean “browsers”, even though that was the example I used. Even though I didn’t go deeper on either of them, I left a link to a really nice article about them for further reading and to clarify any doubts anyone might have about the terms. Sorry if I confused anybody, but that link should save lifes. :)</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372823#respond" onclick="return addComment.moveForm("comment-372823", "372823", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-372823-down" style="opacity:0.3;" title="Vote down! (1 votes)"></a>
<a class="ratebtn up_active" id="btn-372823-up" style="opacity:0.3;" title="Vote up! (1 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">78</span>
<div class="comment" id="comment-372829">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/dcf88514d095e6a6f934d2edc97b7744?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Laurence</h3>
<span class="datetime"><a title="Commentlink #78" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372829">August 5th, 2009 1:37 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Plenty of food for thought here – both in the article (huge thanks) and in the comments!</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372829#respond" onclick="return addComment.moveForm("comment-372829", "372829", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-372829-down" style="opacity:0.3;" title="Vote down! (1 votes)"></a>
<a class="ratebtn up_active" id="btn-372829-up" style="opacity:0.3;" title="Vote up! (1 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">79</span>
<div class="comment" id="comment-372835">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/c2c1340b45c2a86b9839d9f80f4135cc?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Snookerman</h3>
<span class="datetime"><a title="Commentlink #79" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372835">August 5th, 2009 2:02 am</a></span>
</div>
</div>
<div class="comment-text">
<p>@Enrique Ramírez – Fair enough, that was just the first part I read and I just had to say what I said. Now having read the article, I have to say it’s pretty good.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372835#respond" onclick="return addComment.moveForm("comment-372835", "372835", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult negative">-3</div>
<a class="ratebtn down_active" id="btn-372835-down" style="opacity:0.3;" title="Vote down! (3 votes)"></a>
<a class="ratebtn up_active" id="btn-372835-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">80</span>
<div class="comment" id="comment-372940">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/84b75e307f0f2453003641856c0c3329?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Nikita Sumeiko</h3>
<span class="datetime"><a title="Commentlink #80" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372940">August 5th, 2009 7:46 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Thank you very much, Mr Enrique Ramírez!<br>
Great article, but where we (your audience) are able to read about all the new HTML 5 tags, changes and news?</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=372940#respond" onclick="return addComment.moveForm("comment-372940", "372940", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult negative">-2</div>
<a class="ratebtn down_active" id="btn-372940-down" style="opacity:0.3;" title="Vote down! (2 votes)"></a>
<a class="ratebtn up_active" id="btn-372940-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">81</span>
<div class="comment" id="comment-373175">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/9baee5a86866b935e98544347041e8c9?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">gr8pixel</h3>
<span class="datetime"><a title="Commentlink #81" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-373175">August 5th, 2009 7:36 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>damn!!! this is wonderful… i tried some of these new css techniques and came out really well.<br>
thanks SM!</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=373175#respond" onclick="return addComment.moveForm("comment-373175", "373175", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-373175-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-373175-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">82</span>
<div class="comment" id="comment-373297">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/46d96952e059072c39240727bb3b2cc8?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Cor van Noorloos</h3>
<span class="datetime"><a title="Commentlink #82" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-373297">August 6th, 2009 1:13 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Great article!</p>
<p>Does someone know which social bookmarking icons are used within this example?</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=373297#respond" onclick="return addComment.moveForm("comment-373297", "373297", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-373297-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-373297-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">83</span>
<div class="comment" id="comment-373367">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/4104db1ad46ebd4bf7aeb87308c3cbd5?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Srinivas</h3>
<span class="datetime"><a title="Commentlink #83" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-373367">August 6th, 2009 4:54 am</a></span>
</div>
</div>
<div class="comment-text">
<p>HI,</p>
<p>Great and good tutorial. Will spend some time on this once i get free time. Anyway thanks for the useful article.</p>
<p>Thanks, Srinivas</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=373367#respond" onclick="return addComment.moveForm("comment-373367", "373367", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-373367-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-373367-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">84</span>
<div class="comment" id="comment-373472">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/99a1f054d121ac4afb54753a468c3bc2?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Tha1 Bu1</h3>
<span class="datetime"><a title="Commentlink #84" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-373472">August 6th, 2009 10:10 am</a></span>
</div>
</div>
<div class="comment-text">
<p>You guys had me at “Graceful Degradation”. I was wondering about how to start implementing html5′s features but still be able to view in legacy browsers. I love you Smashing Magazine. I would totally do you. Stay sexy. ;D</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=373472#respond" onclick="return addComment.moveForm("comment-373472", "373472", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-373472-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-373472-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">85</span>
<div class="comment" id="comment-373752">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/9941e80ac7f1d363d1e9cdf24562c83f?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Rebecca</h3>
<span class="datetime"><a title="Commentlink #85" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-373752">August 7th, 2009 9:22 am</a></span>
</div>
</div>
<div class="comment-text">
<p>@Bruce…I totally agree!</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=373752#respond" onclick="return addComment.moveForm("comment-373752", "373752", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+1</div>
<a class="ratebtn down_active" id="btn-373752-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-373752-up" style="opacity:0.3;" title="Vote up! (1 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">86</span>
<div class="comment" id="comment-373973">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/ef57999cd41e55020875d00de42f2940?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Aaron White</h3>
<span class="datetime"><a title="Commentlink #86" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-373973">August 8th, 2009 5:48 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>I was hitting a dry spell in my Web Design, but after reading this article I’ve started again. Thank you Smashing Magazine! gratefully!</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=373973#respond" onclick="return addComment.moveForm("comment-373973", "373973", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+1</div>
<a class="ratebtn down_active" id="btn-373973-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-373973-up" style="opacity:0.3;" title="Vote up! (1 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">87</span>
<div class="comment" id="comment-374186">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/300fef6681dafcc9ff37c7a16ea792c3?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Richard Eagleton</h3>
<span class="datetime"><a title="Commentlink #87" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-374186">August 9th, 2009 10:18 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>Just wanted to say thanks for giving a good rundown of the HTML5 semantic elements.</p>
<p>One question, though, is about the global-forms.css file. You said in the article you would go into it more but never did. So what is the purpose of it?</p>
<p>Incidentally, in the code you have above for the social icons, you end up with a background for LastFM in IE7. I checked the final page code which works properly and the code above for Line 11 should be<br>
<q><code>.social a[href*='last.fm'], .social a[href*='lastfm.'] {background-image: url('../images/icons/lastfm.png');}</code></q><br>
ie. an extra dot after lastfm in the second selector. I also found that you missed including the ie.css file in the code above too (sorry, just a few things I discovered as I followed your code step-by-step)</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=374186#respond" onclick="return addComment.moveForm("comment-374186", "374186", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+2</div>
<a class="ratebtn down_active" id="btn-374186-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-374186-up" style="opacity:0.3;" title="Vote up! (2 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">88</span>
<div class="comment" id="comment-374239">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/8f9347d7c891cfa9b091a4805398fe9f?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">alex.kotomanov</h3>
<span class="datetime"><a title="Commentlink #88" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-374239">August 10th, 2009 4:15 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Have u tested in Firefox 2? It does not work! =(</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=374239#respond" onclick="return addComment.moveForm("comment-374239", "374239", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-374239-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-374239-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">89</span>
<div class="comment" id="comment-374529">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/2f937c67b98a45ee3a96b17ddf720982?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">mobeats</h3>
<span class="datetime"><a title="Commentlink #89" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-374529">August 11th, 2009 3:43 am</a></span>
</div>
</div>
<div class="comment-text">
<p>You can find a german article about how to build a html 5 layout from scratch here:<br>
<a href="http://www.cssguru.de/html-5-layout" title="html5 layout" rel="nofollow">http://www.cssguru.de/html-5-layout</a></p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=374529#respond" onclick="return addComment.moveForm("comment-374529", "374529", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-374529-down" style="opacity:0.3;" title="Vote down! (1 votes)"></a>
<a class="ratebtn up_active" id="btn-374529-up" style="opacity:0.3;" title="Vote up! (1 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">90</span>
<div class="comment" id="comment-374911">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/051509b3d51ebcff885da50117b5108b?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Daniel De Aguiar</h3>
<span class="datetime"><a title="Commentlink #90" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-374911">August 12th, 2009 8:18 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Great article. I agree with Teddy (#17) in regards to the usage of the ‘body’ class.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=374911#respond" onclick="return addComment.moveForm("comment-374911", "374911", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-374911-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-374911-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">91</span>
<div class="comment" id="comment-376047">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/6627c5bbcca7444b28002d1bd3c574ac?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Sanjaya Yogi</h3>
<span class="datetime"><a title="Commentlink #91" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-376047">August 16th, 2009 12:18 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>I put together a page based on this code that validates as html5 and a link to the files available for download at: <a href="http://is.gd/2k1Bm" title="HostVerde | html5" rel="nofollow"> ( the files are in a link at the bottom of the page )</a>. I added a div and a background image, a few changes to colors, etc. Thank you to Enrique and everyone for the comments. I will be adding other pages soon based on this work and will keep following the comments.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=376047#respond" onclick="return addComment.moveForm("comment-376047", "376047", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-376047-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-376047-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">92</span>
<div class="comment" id="comment-377945">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/fafbb99c587afa464130e29e6d43e6d9?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Graeme</h3>
<span class="datetime"><a title="Commentlink #92" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-377945">August 23rd, 2009 1:53 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Hi,</p>
<p>There are a couple of bugs on the demo page for this tutorial.</p>
<p>1. On the demo page your second heading “HTML5 in the year 2009″ floats over the top of the main heading “Smashing HTML5″.</p>
<p>2. Across the top of the heading “Smashing HTML5″ the letters are chopped off.</p>
<p>I am veiwing the page with the ie7 browser.</p>
<p>Kind regards,</p>
<p>Graeme</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=377945#respond" onclick="return addComment.moveForm("comment-377945", "377945", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-377945-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-377945-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">93</span>
<div class="comment" id="comment-378421">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/1670641dfdcf1083e689ee276f25ef97?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Gébé</h3>
<span class="datetime"><a title="Commentlink #93" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-378421">August 25th, 2009 12:43 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Is it just me or this isn’t working on IE8?<br>
It’s as if IE8 didn’t use “html5.js” :-(</p>
<p>Anyone gets the same behaviour?</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=378421#respond" onclick="return addComment.moveForm("comment-378421", "378421", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-378421-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-378421-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">94</span>
<div class="comment" id="comment-388798">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/005451a70c1bfef36c1d68a768db4a3e?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">dotcompals</h3>
<span class="datetime"><a title="Commentlink #94" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-388798">October 2nd, 2009 12:16 am</a></span>
</div>
</div>
<div class="comment-text">
<p>can i use this html / css code for my website, slightly modified? if yes, what are the terms ?</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=388798#respond" onclick="return addComment.moveForm("comment-388798", "388798", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-388798-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-388798-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">95</span>
<div class="comment" id="comment-388861">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/aa921a053e2cda5c1aec67c391d6c66d?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Jaspal Singh</h3>
<span class="datetime"><a title="Commentlink #95" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-388861">October 2nd, 2009 7:23 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Nice Tutorial for beginners, how to create complete layout design using html5 and css3. Thanks for sharing.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=388861#respond" onclick="return addComment.moveForm("comment-388861", "388861", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-388861-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-388861-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">96</span>
<div class="comment" id="comment-405805">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/519fdb5722a45270ee2bd91442c18226?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Tutorial Lounge</h3>
<span class="datetime"><a title="Commentlink #96" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-405805">November 2nd, 2009 3:32 am</a></span>
</div>
</div>
<div class="comment-text">
<p>really helping and giving latest tips about HTML5 even beginners also get help from this training.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=405805#respond" onclick="return addComment.moveForm("comment-405805", "405805", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+1</div>
<a class="ratebtn down_active" id="btn-405805-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-405805-up" style="opacity:0.3;" title="Vote up! (1 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">97</span>
<div class="comment" id="comment-406577">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/73d6c589e4ffcc05b95e5a12426de622?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Rick Zawadzki</h3>
<span class="datetime"><a title="Commentlink #97" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-406577">November 3rd, 2009 9:42 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Regarding graceful degradation and HTML 5- how can you achieve this graceful degradation in Internet Explorer if it has Javascript turned off? I realize that’s a very small percentage of the overall browsing public, but it should be considered. Once I switch off Javascript all of the HTML 5 elements lose their styling (and place in the DOM). The end result appears far from graceful.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=406577#respond" onclick="return addComment.moveForm("comment-406577", "406577", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-406577-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-406577-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">98</span>
<div class="comment" id="comment-410037">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/08bdea47fe2b2f5b898ceebd14c12fde?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">e-sushi</h3>
<span class="datetime"><a title="Commentlink #98" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-410037">November 13th, 2009 1:30 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>Nice tutorial, or should I rather say example?<br>
Seems to round it up nicely…<br>
Thank’s for sharing!</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=410037#respond" onclick="return addComment.moveForm("comment-410037", "410037", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-410037-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-410037-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">99</span>
<div class="comment" id="comment-411247">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/4665a104168e9b55fb313df3689ba43b?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Johan de Jong</h3>
<span class="datetime"><a title="Commentlink #99" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-411247">November 18th, 2009 6:41 am</a></span>
</div>
</div>
<div class="comment-text">
<p>I’m sorry I have to say this, but the example has nothing to do with HTML5. Except for the fact that there are custom (which are used in HTML5) tags.</p>
<p>Example :<br>
The in HTML5 is a replacement of the , and tags especially for navigation purposes. So the use of the extra tag is useless.</p>
<p>Besides that, HTML5 supports the use of custom tags (since there is no dtd), so why still use id’s and classes??? The only thing you have to do is add them with the IE-HTML5-fix, which is a lot nicer.</p>
<p>Just my two cents, but if you do it, do it good.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=411247#respond" onclick="return addComment.moveForm("comment-411247", "411247", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+3</div>
<a class="ratebtn down_active" id="btn-411247-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-411247-up" style="opacity:0.3;" title="Vote up! (3 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">100</span>
<div class="comment" id="comment-430622">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/53945c23b6249abe8b33fbe2034f8883?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Sunita</h3>
<span class="datetime"><a title="Commentlink #100" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-430622">December 22nd, 2009 12:17 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Nice Article!<br>
What will be the doctype for HTML 5?</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=430622#respond" onclick="return addComment.moveForm("comment-430622", "430622", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+1</div>
<a class="ratebtn down_active" id="btn-430622-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-430622-up" style="opacity:0.3;" title="Vote up! (1 votes)"></a>
</div>
</div>
</div>
<ul class="children">
<li class="comment even depth-2 clearfix ">
<span class="commentnumber">101</span>
<div class="comment" id="comment-433182">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/06a6f1e617a25513a85839a96b74dde1?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Falk Köppe</h3>
<span class="datetime"><a title="Commentlink #101" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-433182">January 2nd, 2010 8:34 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Hello Sunita,</p>
<p>the doctype for HTML 5 will probably be as used in the article. You find a detailed description in the current HTML 5 draft (<a href="http://dev.w3.org/html5/spec/Overview.html#the-doctype" rel="nofollow">http://dev.w3.org/html5/spec/Overview.html#the-doctype</a>).</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=433182#respond" onclick="return addComment.moveForm("comment-433182", "433182", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+1</div>
<a class="ratebtn down_active" id="btn-433182-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-433182-up" style="opacity:0.3;" title="Vote up! (1 votes)"></a>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="comment odd alt thread-even depth-1 clearfix ">
<span class="commentnumber">102</span>
<div class="comment" id="comment-435088">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/c3f503033306b71548909abea7bbb8a0?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Salondesol</h3>
<span class="datetime"><a title="Commentlink #102" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-435088">January 11th, 2010 1:16 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>Genial…!!! Muchas gracias, he usado esta plantilla (me gusta mucho) para mi blog. Ahora intento ordenar mi antigua blogroll y bloques.</p>
<p>Saludos.<br>
Helena.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=435088#respond" onclick="return addComment.moveForm("comment-435088", "435088", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-435088-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-435088-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">103</span>
<div class="comment" id="comment-437186">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/4035eac212ec4bc96dd6b8efa35a90d3?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Aamir Afridi</h3>
<span class="datetime"><a title="Commentlink #103" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-437186">January 22nd, 2010 4:18 am</a></span>
</div>
</div>
<div class="comment-text">
<p>I was about to start markup of a website in HTML5 and couldn’t find the place to start from. I was looking for EXACTLY something like this article from where I can make a start and move on, thank you for such a nice article :)</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=437186#respond" onclick="return addComment.moveForm("comment-437186", "437186", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+2</div>
<a class="ratebtn down_active" id="btn-437186-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-437186-up" style="opacity:0.3;" title="Vote up! (2 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-even depth-1 clearfix ">
<span class="commentnumber">104</span>
<div class="comment" id="comment-437583">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/6d07e6d95a43357254698ce9723350e6?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Mourner</h3>
<span class="datetime"><a title="Commentlink #104" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-437583">January 25th, 2010 7:49 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Thanks for a great article!</p>
<p>One thing you forgot to do in stylesheets is to define :focus styles. Currently the page is inaccessible using keyboard because user can’t see what element is selected.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=437583#respond" onclick="return addComment.moveForm("comment-437583", "437583", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+1</div>
<a class="ratebtn down_active" id="btn-437583-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-437583-up" style="opacity:0.3;" title="Vote up! (1 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">105</span>
<div class="comment" id="comment-439449">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/480b0fd61ad50a18adf9905e15ef9642?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Achilles</h3>
<span class="datetime"><a title="Commentlink #105" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-439449">February 4th, 2010 9:41 am</a></span>
</div>
</div>
<div class="comment-text">
<p>is there way to tie this into a WordPress, Blogger, or another CMS? It looks like it can display dynamic content but do we just insert the php handlers right into the template?</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=439449#respond" onclick="return addComment.moveForm("comment-439449", "439449", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-439449-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-439449-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-even depth-1 clearfix ">
<span class="commentnumber">106</span>
<div class="comment" id="comment-441782">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/b3ac4cc49a360a3c43822a2ca08073e2?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Angel Grablev</h3>
<span class="datetime"><a title="Commentlink #106" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-441782">February 16th, 2010 12:22 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>You missed the 52framework.com which allows you to build websites like the one listed on top of our completely cross browser framework! check it out <a href="http://www.52framework.com" rel="nofollow">http://www.52framework.com</a></p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=441782#respond" onclick="return addComment.moveForm("comment-441782", "441782", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult negative">-2</div>
<a class="ratebtn down_active" id="btn-441782-down" style="opacity:0.3;" title="Vote down! (2 votes)"></a>
<a class="ratebtn up_active" id="btn-441782-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">107</span>
<div class="comment" id="comment-443899">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/6ed46de8a5889a9acef04b2a49b2818c?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Tami</h3>
<span class="datetime"><a title="Commentlink #107" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-443899">February 26th, 2010 2:39 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>Late to the party but this:</p>
<p>img.right figure.right {float: right; margin: 0 0 2em 2em;}<br>
img.left, figure.left {float: right; margin: 0 0 2em 2em;}</p>
<p>Is bad form. There shouldn’t be any presentation description in the class or id names. What if you decide later you want the img on the right in the center, and the one on the left on the right? You shouldn’t have to edit the html to do a simple design change, just the css.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=443899#respond" onclick="return addComment.moveForm("comment-443899", "443899", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-443899-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-443899-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-even depth-1 clearfix ">
<span class="commentnumber">108</span>
<div class="comment" id="comment-445539">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/cafc12062c0c847e05c179b10c815a65?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Wes</h3>
<span class="datetime"><a title="Commentlink #108" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-445539">March 7th, 2010 8:18 am</a></span>
</div>
</div>
<div class="comment-text">
<p>which code to centering all the content in your css?</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=445539#respond" onclick="return addComment.moveForm("comment-445539", "445539", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-445539-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-445539-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">109</span>
<div class="comment" id="comment-446307">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/5ca956ec771aac39c96dd401c7c9816f?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Divyesh Ardeshana</h3>
<span class="datetime"><a title="Commentlink #109" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-446307">March 11th, 2010 11:28 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Nice help. I will apply ASAP :)<br>
I am sure I will success in it.<br>
Thanks</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=446307#respond" onclick="return addComment.moveForm("comment-446307", "446307", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult negative">-2</div>
<a class="ratebtn down_active" id="btn-446307-down" style="opacity:0.3;" title="Vote down! (2 votes)"></a>
<a class="ratebtn up_active" id="btn-446307-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-even depth-1 clearfix ">
<span class="commentnumber">110</span>
<div class="comment" id="comment-448125">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/fb2fae5e21b8d14ede67cc430fb62725?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Artful Dodger</h3>
<span class="datetime"><a title="Commentlink #110" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-448125">March 21st, 2010 2:07 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>I really can’t wait to get started in using HTML5, I’m really gonna enjoy using the video tag =]</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=448125#respond" onclick="return addComment.moveForm("comment-448125", "448125", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-448125-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-448125-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">111</span>
<div class="comment" id="comment-451269">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/52513cf20846a1dc9aef3b116189dd72?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Aditya</h3>
<span class="datetime"><a title="Commentlink #111" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-451269">April 5th, 2010 9:45 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>The first book in the world on the topic HTML5 is ‘deploying HTML5′ <a href="http://adityayadav.com/DeployingHTML5.aspx" rel="nofollow">http://adityayadav.com/DeployingHTML5.aspx</a> Let me know if something else should be covered I will post extra chapters on the website. There are 5-6 other books on Amazon available for pre-order but will ship only in 2-3 months.</p>
<p>Do write in if you would like to share your experiences with HTML5.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=451269#respond" onclick="return addComment.moveForm("comment-451269", "451269", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-451269-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-451269-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-even depth-1 clearfix ">
<span class="commentnumber">112</span>
<div class="comment" id="comment-453045">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/2054e25551bad5e37e86c9a97c6de355?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">eGrove Systems</h3>
<span class="datetime"><a title="Commentlink #112" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-453045">April 13th, 2010 3:40 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Great post. This will be more helpful for web designers</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=453045#respond" onclick="return addComment.moveForm("comment-453045", "453045", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-453045-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-453045-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">113</span>
<div class="comment" id="comment-456840">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/edee2403a948717208b6749659ae2c34?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Matt Fryer</h3>
<span class="datetime"><a title="Commentlink #113" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-456840">April 30th, 2010 10:16 am</a></span>
</div>
</div>
<div class="comment-text">
<p>great tutorial. I found this from CSS heroes app on iPhone which is the best web-developer App I could find for the iPhone. Daily useful info here and on css heroes – Thanks and keep up the good work</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=456840#respond" onclick="return addComment.moveForm("comment-456840", "456840", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-456840-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-456840-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-even depth-1 clearfix ">
<span class="commentnumber">114</span>
<div class="comment" id="comment-457468">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/3660cd468ca09e531145d5e9281736c1?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">SohoInteractive</h3>
<span class="datetime"><a title="Commentlink #114" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-457468">May 4th, 2010 12:43 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>very useful article.<br>
we are using it on a project</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=457468#respond" onclick="return addComment.moveForm("comment-457468", "457468", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-457468-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-457468-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">115</span>
<div class="comment" id="comment-458671">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/dc11b0e635f2c6dfc4b4bac201408b5b?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Tom</h3>
<span class="datetime"><a title="Commentlink #115" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-458671">May 12th, 2010 7:35 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Great article, finally had the time to read through it. Thumbs up.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=458671#respond" onclick="return addComment.moveForm("comment-458671", "458671", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-458671-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-458671-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-even depth-1 clearfix ">
<span class="commentnumber">116</span>
<div class="comment" id="comment-459697">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/91dcba2b1dfefadb9c62f757d100cfef?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Brandon</h3>
<span class="datetime"><a title="Commentlink #116" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-459697">May 18th, 2010 7:34 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Nice article, but did you drink a bit too much before you wrote </p>
<blockquote><p>
The extras block is yet another section of our document. You might struggle for a while deciding whether an or a tag would be best for this section. In the end, this section could not be “considered separate from the main content” since it contains the blogroll links and some social information of the website. Thus, a element is more appropriate.
</p></blockquote>
<p>It would be absurd to think that people visit the page just to see the blogroll and social networking links. I’m sure you didn’t intend to suggest that, so I can’t see how you can suggest that this is a section of the main content. Unless I’m badly mistaken, it is under no circumstances, and under no possible interpretation of the spec a section of the main content. The main content is the body of the (very good!) article. It’s what we came to the site to read. The extras are absolutely and unequivocally not a section, and fairly clearly an aside. I’m not splitting hairs. This is as clear as it could possibly be. (Even if you argued that it’s not an aside but, say, oh, maybe nav, then it’s still not a section of the main content.)</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=459697#respond" onclick="return addComment.moveForm("comment-459697", "459697", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult negative">-2</div>
<a class="ratebtn down_active" id="btn-459697-down" style="opacity:0.3;" title="Vote down! (2 votes)"></a>
<a class="ratebtn up_active" id="btn-459697-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
<ul class="children">
<li class="comment even depth-2 clearfix ">
<span class="commentnumber">117</span>
<div class="comment" id="comment-590340">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/3e9169a165e2277dbc36278f15af9658?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Arie Putranto</h3>
<span class="datetime"><a title="Commentlink #117" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-590340">July 10th, 2012 9:07 am</a></span>
</div>
</div>
<div class="comment-text">
<p>This guy got the point. It’s an aside where IT HAS TO BE an aside, blogroll or social links are not related to the content. Related to the site? Yes! The content? Hell No!</p>
<p>Why did this guy got -1?</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=590340#respond" onclick="return addComment.moveForm("comment-590340", "590340", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-590340-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-590340-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">118</span>
<div class="comment" id="comment-459948">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/1c23aa4929b27b35822481155546acb6?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">adelacreative</h3>
<span class="datetime"><a title="Commentlink #118" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-459948">May 19th, 2010 3:24 am</a></span>
</div>
</div>
<div class="comment-text">
<p>I’m not too crazy about HTML5 :(</p>
<p>I find it that it adds to much markup! For articles for example, adding the “article” tag inside “li” tag … I mean why is there a need for a list when they already added the “article” tag … can’t they just make an additional tag and write the markup like this: “article list” and “article”? Or why is there a need to put “nav” and then inside a list? I mean I hope they will work this further and simplify the markup! many of the new tags are useful, but at the moment I find it it also adds up too much markup instead of reducing it..</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=459948#respond" onclick="return addComment.moveForm("comment-459948", "459948", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-459948-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-459948-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">119</span>
<div class="comment" id="comment-461972">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/5fbd320933c55038f386f7f5c73d4d7c?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">devlim</h3>
<span class="datetime"><a title="Commentlink #119" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-461972">May 30th, 2010 12:08 am</a></span>
</div>
</div>
<div class="comment-text">
<p>pretty good article but seem like some place wrong like the use of address tag in footer.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=461972#respond" onclick="return addComment.moveForm("comment-461972", "461972", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-461972-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-461972-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">120</span>
<div class="comment" id="comment-462392">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/e6662a04ecedec14e584a696be18a18e?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Oliver</h3>
<span class="datetime"><a title="Commentlink #120" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-462392">June 1st, 2010 1:39 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Just want to say a quick thanks for writing this article. </p>
<p>I used it as a reference point to build our HTML5 front end for HiddenStyles.com, keep up the good work guys.</p>
<p>Thanks</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=462392#respond" onclick="return addComment.moveForm("comment-462392", "462392", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-462392-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-462392-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">121</span>
<div class="comment" id="comment-462592">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/9421d329765b413768b66803acd23022?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Samay</h3>
<span class="datetime"><a title="Commentlink #121" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-462592">June 2nd, 2010 1:44 am</a></span>
</div>
</div>
<div class="comment-text">
<p>This is a really helpful tutorial.</p>
<p>I have redesigned my website using HTML5.</p>
<p>Have a look at samay.info</p>
<p>:)</p>
<p>Thanks<br>
Samay</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=462592#respond" onclick="return addComment.moveForm("comment-462592", "462592", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-462592-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-462592-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">122</span>
<div class="comment" id="comment-463191">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/0e9fa3dfb37c1a435abcaa345b9e63ee?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">m4rt5</h3>
<span class="datetime"><a title="Commentlink #122" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-463191">June 4th, 2010 10:29 am</a></span>
</div>
</div>
<div class="comment-text">
<p>As there’s only one stylesheet language for the web, CSS, you can use :)</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=463191#respond" onclick="return addComment.moveForm("comment-463191", "463191", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-463191-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-463191-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">123</span>
<div class="comment" id="comment-463195">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/0e9fa3dfb37c1a435abcaa345b9e63ee?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">m4rt5</h3>
<span class="datetime"><a title="Commentlink #123" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-463195">June 4th, 2010 11:02 am</a></span>
</div>
</div>
<div class="comment-text">
<p><code>{link rel="stylesheet" href="css/main.css" /}</code><br>
Alos into the aside part:<br>
<code>{hgroup}<br>
{h1}Featured Article{/h1}<br>
{h2}...{/h2}<br>
{/hgroup}</code></p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=463195#respond" onclick="return addComment.moveForm("comment-463195", "463195", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-463195-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-463195-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">124</span>
<div class="comment" id="comment-463364">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/fe6d4f4a22b93339c48053bd3a1dcbea?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Ludwig König</h3>
<span class="datetime"><a title="Commentlink #124" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-463364">June 5th, 2010 10:54 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>Wow, an impressive and very useful tutorial for creating a modern html5 and css3 layout.<br>
There are so much new possibilities for us. And even the old s***ing browsers are supported like IE6 and less. I’m glad to read this article. So I’m able to develop my own new website!</p>
<p>Thanks a lot Smashing’s</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=463364#respond" onclick="return addComment.moveForm("comment-463364", "463364", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-463364-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-463364-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">125</span>
<div class="comment" id="comment-465738">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/60220c64e6efdad4b63bd02d89592171?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Paul Ross</h3>
<span class="datetime"><a title="Commentlink #125" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-465738">June 17th, 2010 2:48 am</a></span>
</div>
</div>
<div class="comment-text">
<p>lang=”es” … :) Great article Enrique. I’ve worked my way through the tutorial. I agree with your comments about the drawbacks of HTML5 – as I write it is an un-tuned guitar not ready to go on stage but the potential for killer music is not far away…</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=465738#respond" onclick="return addComment.moveForm("comment-465738", "465738", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-465738-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-465738-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">126</span>
<div class="comment" id="comment-467896">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/f7e9033f2cf744ab17c15886fe1509df?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Zach</h3>
<span class="datetime"><a title="Commentlink #126" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-467896">June 27th, 2010 2:03 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>Thank you SO much for this article!</p>
<p>It is seriously, the EXACT thing I was looking for! I can’t wait to test this out with my own site, and thanks so much again!</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=467896#respond" onclick="return addComment.moveForm("comment-467896", "467896", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-467896-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-467896-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">127</span>
<div class="comment" id="comment-469352">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/42b1cb86cd33446e153e56885764f093?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Simon</h3>
<span class="datetime"><a title="Commentlink #127" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-469352">July 4th, 2010 10:59 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>This is a great tutorial to show you about HTML5. One big problem i didnt see until quite far into redoing my website, it isnt cross-browser safe. Chrome and Firefox have very different font sizes. but a simple conditional statement sorted it out.</p>
<p>Setting standard font size to 62.5% and chrome/safari to 87.5%</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=469352#respond" onclick="return addComment.moveForm("comment-469352", "469352", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-469352-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-469352-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">128</span>
<div class="comment" id="comment-469617">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/466190e905f8977d37a8088ff59ca8c6?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Danyal</h3>
<span class="datetime"><a title="Commentlink #128" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-469617">July 6th, 2010 6:57 am</a></span>
</div>
</div>
<div class="comment-text">
<p>That was a nice article. But it has made me realise that working in HTML5 will be an exercise in hackery. For my sanity\’s sake I think I will wait until later when browser support has matured. There are enough quirks as it is when working with HTML4. If you take the shiv approach to HTML5 development, can you imagine the diabolical issues which await you in some browsers once your page becomes mildly complicated?</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=469617#respond" onclick="return addComment.moveForm("comment-469617", "469617", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+1</div>
<a class="ratebtn down_active" id="btn-469617-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-469617-up" style="opacity:0.3;" title="Vote up! (1 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">129</span>
<div class="comment" id="comment-470503">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/18f5959782b375d50b23b8f2bc26dcb2?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">ArleyM</h3>
<span class="datetime"><a title="Commentlink #129" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-470503">July 12th, 2010 11:19 am</a></span>
</div>
</div>
<div class="comment-text">
<p>It’s startling how crazy this looks in FireFox 2. Was that browser always worst than IE6?! Its market share is next to nil thankfully. <a href="http://www.w3schools.com/browsers/browsers_firefox.asp" rel="nofollow">http://www.w3schools.com/browsers/browsers_firefox.asp</a></p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=470503#respond" onclick="return addComment.moveForm("comment-470503", "470503", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-470503-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-470503-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">130</span>
<div class="comment" id="comment-470963">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/272a047db6453fd9dbf3b32ecc60744d?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">evision</h3>
<span class="datetime"><a title="Commentlink #130" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-470963">July 14th, 2010 8:53 am</a></span>
</div>
</div>
<div class="comment-text">
<p>this is great – it is so simple but yet powerful</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=470963#respond" onclick="return addComment.moveForm("comment-470963", "470963", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-470963-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-470963-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">131</span>
<div class="comment" id="comment-471472">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/c840f1fbd1fdc290bdb75e76910258ce?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Ben</h3>
<span class="datetime"><a title="Commentlink #131" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-471472">July 18th, 2010 3:30 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>is not needed in html5. It can be:</p>
<p>Instead</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=471472#respond" onclick="return addComment.moveForm("comment-471472", "471472", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-471472-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-471472-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">132</span>
<div class="comment" id="comment-472660">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/25d5084704bff9d6b1975da64bdd4651?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">waleed</h3>
<span class="datetime"><a title="Commentlink #132" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-472660">July 25th, 2010 9:42 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>Create a #registration #form using #HTML5 and #CSS3 <a href="http://bit.ly/brbTDz" rel="nofollow">http://bit.ly/brbTDz</a></p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=472660#respond" onclick="return addComment.moveForm("comment-472660", "472660", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-472660-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-472660-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">133</span>
<div class="comment" id="comment-474370">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/f2920c1399b802b98a7e9abd7d9e2d78?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">prakash kumar bhola</h3>
<span class="datetime"><a title="Commentlink #133" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-474370">August 3rd, 2010 9:01 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Hey. good work. really nice tutorial for us….</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=474370#respond" onclick="return addComment.moveForm("comment-474370", "474370", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-474370-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-474370-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">134</span>
<div class="comment" id="comment-475375">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/b8623ec0ffc0426a2951bfc56b445453?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">somsakbbk</h3>
<span class="datetime"><a title="Commentlink #134" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-475375">August 9th, 2010 7:32 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Great! thanks for sharing!</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=475375#respond" onclick="return addComment.moveForm("comment-475375", "475375", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-475375-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-475375-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">135</span>
<div class="comment" id="comment-476231">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/bc56448ab2180060599dd467c67a06c9?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Azsen</h3>
<span class="datetime"><a title="Commentlink #135" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-476231">August 13th, 2010 2:58 am</a></span>
</div>
</div>
<div class="comment-text">
<p>The CSS for this is a nightmare, good luck trying to change anything. Also the html5 tags have an id and a class as well. What’s that about? Styled 3 times that’s what. Confusing as hell.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=476231#respond" onclick="return addComment.moveForm("comment-476231", "476231", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult negative">-1</div>
<a class="ratebtn down_active" id="btn-476231-down" style="opacity:0.3;" title="Vote down! (2 votes)"></a>
<a class="ratebtn up_active" id="btn-476231-up" style="opacity:0.3;" title="Vote up! (1 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">136</span>
<div class="comment" id="comment-476719">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/e228d4f1f66a96b4236e0d3604d8f587?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">bishua</h3>
<span class="datetime"><a title="Commentlink #136" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-476719">August 17th, 2010 2:24 am</a></span>
</div>
</div>
<div class="comment-text">
<p>very good artical ! thinks for working</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=476719#respond" onclick="return addComment.moveForm("comment-476719", "476719", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-476719-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-476719-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">137</span>
<div class="comment" id="comment-479061">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/cc03fa2101683633d589f2ed7ee69b3c?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Lime Web Design</h3>
<span class="datetime"><a title="Commentlink #137" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-479061">September 2nd, 2010 1:17 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>Awesome detail in this article. Great resource. The big question is when to dive into HTML5 completely. Great article.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=479061#respond" onclick="return addComment.moveForm("comment-479061", "479061", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+1</div>
<a class="ratebtn down_active" id="btn-479061-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-479061-up" style="opacity:0.3;" title="Vote up! (1 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">138</span>
<div class="comment" id="comment-480602">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/6da726ff0259b932583a235522192eb0?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">irshaid tayeb</h3>
<span class="datetime"><a title="Commentlink #138" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-480602">September 13th, 2010 6:45 am</a></span>
</div>
</div>
<div class="comment-text">
<p>wow, very nice article, thanks .</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=480602#respond" onclick="return addComment.moveForm("comment-480602", "480602", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+2</div>
<a class="ratebtn down_active" id="btn-480602-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-480602-up" style="opacity:0.3;" title="Vote up! (2 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">139</span>
<div class="comment" id="comment-481163">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/5cce99e9bf6154703d8ecdf474a750bd?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">jitendra vyas</h3>
<span class="datetime"><a title="Commentlink #139" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-481163">September 16th, 2010 8:00 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Example page has 3 Validation errors</p>
<p><a href="http://validator.w3.org/check?uri=http%3A%2F%2Fmedia.smashingmagazine.com%2Fcdn_smash%2Fwp-content%2Fuploads%2Fimages%2Fsmashing-html5%2Ffiles%2Fblock-level-links.html&charset=%28detect+automatically%29&doctype=Inline&group=0" rel="nofollow">http://validator.w3.org/check?uri=http%3A%2F%2Fmedia.smashingmagazine.com%2Fcdn_smash%2Fwp-content%2Fuploads%2Fimages%2Fsmashing-html5%2Ffiles%2Fblock-level-links.html&charset=%28detect+automatically%29&doctype=Inline&group=0</a></p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=481163#respond" onclick="return addComment.moveForm("comment-481163", "481163", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-481163-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-481163-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">140</span>
<div class="comment" id="comment-482270">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/6b8333d0d7f0febb79a57e307d6ba0a5?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Anil</h3>
<span class="datetime"><a title="Commentlink #140" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-482270">September 21st, 2010 6:05 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Thanks for the article.<br>
When i am validating your example code it shows me the 2 warnings tell me how to solve these warnings.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=482270#respond" onclick="return addComment.moveForm("comment-482270", "482270", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+1</div>
<a class="ratebtn down_active" id="btn-482270-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-482270-up" style="opacity:0.3;" title="Vote up! (1 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">141</span>
<div class="comment" id="comment-482873">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/a18754e012a9c3a4c6e3f5cad4d90237?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Lindsay</h3>
<span class="datetime"><a title="Commentlink #141" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-482873">September 23rd, 2010 4:52 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>I was wondering, this is a fantastic article and clearly HTML5 specifications are still being refined but will it be updated with the new rules of how <section> are to be used?</p>
<p><a href="http://html5doctor.com/the-section-element/" rel="nofollow">http://html5doctor.com/the-section-element/</a></p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=482873#respond" onclick="return addComment.moveForm("comment-482873", "482873", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-482873-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-482873-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">142</span>
<div class="comment" id="comment-484870">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/c2bb515af75f31dd494312de15d1dec2?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">sairam</h3>
<span class="datetime"><a title="Commentlink #142" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-484870">October 2nd, 2010 4:20 am</a></span>
</div>
</div>
<div class="comment-text">
<p>very nice thanks to shar this article</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=484870#respond" onclick="return addComment.moveForm("comment-484870", "484870", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+2</div>
<a class="ratebtn down_active" id="btn-484870-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-484870-up" style="opacity:0.3;" title="Vote up! (2 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">143</span>
<div class="comment" id="comment-485981">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/c326980b61944a653f1269ecc6b0e16a?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Darrell</h3>
<span class="datetime"><a title="Commentlink #143" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-485981">October 7th, 2010 10:51 am</a></span>
</div>
</div>
<div class="comment-text">
<p>What if the Feature block was bigger on the home page. I mean this is the home page, how is the Featured news article just something meh off to the “aside” and not really completely related to the rest of the home page? If you look at the section of 3 articles, that section is also tangentially related but separate from the Featured content too. So it can be an aside to the featured news if you look at it from another angle. So does it depend on the mindset of the operator of the site? If I consider my featured news block the most important and main thing on my home page I should label it section and the rest of other articles called the aside?</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=485981#respond" onclick="return addComment.moveForm("comment-485981", "485981", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+2</div>
<a class="ratebtn down_active" id="btn-485981-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-485981-up" style="opacity:0.3;" title="Vote up! (2 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">144</span>
<div class="comment" id="comment-489276">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/216c409be1cbf323cbd714f4010e6797?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Brett Widmann</h3>
<span class="datetime"><a title="Commentlink #144" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-489276">October 22nd, 2010 3:55 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>Nice tutorial! It works great!</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=489276#respond" onclick="return addComment.moveForm("comment-489276", "489276", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-489276-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-489276-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">145</span>
<div class="comment" id="comment-490466">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/3ed068278b6fbc0b7e42cdb37ce72e48?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Ade Budiman</h3>
<span class="datetime"><a title="Commentlink #145" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-490466">October 29th, 2010 6:08 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Very Nice. Big Thanks!</p>
<p>How About Compatibility for All Browsers with Html5 ?</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=490466#respond" onclick="return addComment.moveForm("comment-490466", "490466", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-490466-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-490466-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">146</span>
<div class="comment" id="comment-491295">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/70297080904e6ce64732e803bfa0c5df?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">dreamincolor</h3>
<span class="datetime"><a title="Commentlink #146" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-491295">November 1st, 2010 7:14 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Don´t forget this 12 Incredible HTML5 Experiments</p>
<p>Check this out: <a href="http://www.dreamincoloronline.com/12-incredible-html5-experiments/" rel="nofollow">http://www.dreamincoloronline.com/12-incredible-html5-experiments/</a></p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=491295#respond" onclick="return addComment.moveForm("comment-491295", "491295", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+2</div>
<a class="ratebtn down_active" id="btn-491295-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-491295-up" style="opacity:0.3;" title="Vote up! (2 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">147</span>
<div class="comment" id="comment-495041">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/bdb886d6626792f3c6c8584fdf1b0aff?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Rishi Kant</h3>
<span class="datetime"><a title="Commentlink #147" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-495041">November 16th, 2010 3:35 am</a></span>
</div>
</div>
<div class="comment-text">
<p>very impressed with html 5.0,thanks to share some good things about html5.0.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=495041#respond" onclick="return addComment.moveForm("comment-495041", "495041", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-495041-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-495041-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">148</span>
<div class="comment" id="comment-496130">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/999dadf3583c1e42ad3e95b8bd16f302?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Steve Z</h3>
<span class="datetime"><a title="Commentlink #148" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-496130">November 21st, 2010 4:00 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Well thats was was one of the most informative and easy-to-read web articles I have read in ages. Thanks… it most certainly has helped me (a seasoned web coder). 10/10 !</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=496130#respond" onclick="return addComment.moveForm("comment-496130", "496130", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-496130-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-496130-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">149</span>
<div class="comment" id="comment-497147">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/269177f64f113f396732f6c6cb8e433a?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Craig</h3>
<span class="datetime"><a title="Commentlink #149" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-497147">November 23rd, 2010 4:36 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Very good, but you’ve overlook the advanced hierarchy of h1, h2, h3 tags that HMTL5 allows.<br>
Although your approach is valid, it may have been preferable to use h1 and h2 in your aside and article headers rather than h2 and h3.<br>
<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#headings-and-sections" rel="nofollow">http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#headings-and-sections</a></p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=497147#respond" onclick="return addComment.moveForm("comment-497147", "497147", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-497147-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-497147-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">150</span>
<div class="comment" id="comment-504627">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/30e12b91f92315c1f8ccaef04d0ac88e?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">hiera</h3>
<span class="datetime"><a title="Commentlink #150" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-504627">December 21st, 2010 5:11 am</a></span>
</div>
</div>
<div class="comment-text">
<p>in the paragraph “Limiting our blocks”, line 4 of the code listing, did you mean float:left?</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=504627#respond" onclick="return addComment.moveForm("comment-504627", "504627", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-504627-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-504627-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">151</span>
<div class="comment" id="comment-505281">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/e8ef356d01914912d9783a622e921ece?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Tim Boeun</h3>
<span class="datetime"><a title="Commentlink #151" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-505281">December 28th, 2010 12:16 am</a></span>
</div>
</div>
<div class="comment-text">
<p>wrap content on Firefox 3.6 is still the same as Firefox 3.5.</p>
<p>Thanks for your good article.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=505281#respond" onclick="return addComment.moveForm("comment-505281", "505281", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+2</div>
<a class="ratebtn down_active" id="btn-505281-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-505281-up" style="opacity:0.3;" title="Vote up! (2 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">152</span>
<div class="comment" id="comment-505972">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/a593f8fa45ba8496c5d445da53b1b89b?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">christopher cuizon</h3>
<span class="datetime"><a title="Commentlink #152" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-505972">January 2nd, 2011 6:50 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>Can’t wait for this feature to be launch oh yeah \m/ no more scripting on ie<br>
very useful<br>
hehehe…….</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=505972#respond" onclick="return addComment.moveForm("comment-505972", "505972", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+2</div>
<a class="ratebtn down_active" id="btn-505972-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-505972-up" style="opacity:0.3;" title="Vote up! (2 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">153</span>
<div class="comment" id="comment-508209">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/a06e9c97c60d3c23c849e391301af016?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Karen Riedl</h3>
<span class="datetime"><a title="Commentlink #153" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-508209">January 16th, 2011 11:18 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Please explain that import.reset.css file more and what it is suppose to do. I have no idea what it is and does it have to be in the css?</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=508209#respond" onclick="return addComment.moveForm("comment-508209", "508209", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-508209-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-508209-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">154</span>
<div class="comment" id="comment-512260">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/79672f5367844d04c6d34fdfcd2b7e85?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Mayhem</h3>
<span class="datetime"><a title="Commentlink #154" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-512260">February 7th, 2011 12:36 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>Graceful degradation eh?</p>
<p>If someone wishes to use this in a serious webpage, i’d advise to load the final product link above in ie 7 or 8 with javascript disabled….</p>
<p>That not what i call graceful degradation…</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=512260#respond" onclick="return addComment.moveForm("comment-512260", "512260", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult negative">-3</div>
<a class="ratebtn down_active" id="btn-512260-down" style="opacity:0.3;" title="Vote down! (3 votes)"></a>
<a class="ratebtn up_active" id="btn-512260-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">155</span>
<div class="comment" id="comment-514981">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/3fee4fb093ba674fe7eec0d8d4dd97d2?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Merc Nuts</h3>
<span class="datetime"><a title="Commentlink #155" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-514981">February 22nd, 2011 8:19 am</a></span>
</div>
</div>
<div class="comment-text">
<p>please remove this article from the internet as it is years old and now stale as of Feb 2011</p>
<p>“Smashing Magazine<br>
Coding A HTML 5 Layout From Scratch”</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=514981#respond" onclick="return addComment.moveForm("comment-514981", "514981", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult negative">-3</div>
<a class="ratebtn down_active" id="btn-514981-down" style="opacity:0.3;" title="Vote down! (4 votes)"></a>
<a class="ratebtn up_active" id="btn-514981-up" style="opacity:0.3;" title="Vote up! (1 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">156</span>
<div class="comment" id="comment-521630">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/6a30583597dd455920c768c6d74ed2ae?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">JarridB</h3>
<span class="datetime"><a title="Commentlink #156" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-521630">March 23rd, 2011 3:16 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Really nice article. I would suggest that anyone who wants to know more about HTML5 goes out and buys Smashing Magzines book on it.</p>
<p>Why the use of @import in your css? Using @import has a performance impact…. I know this was just an article about coding HTML5 and not about ultra efficient html/css. </p>
<p>Groumphy Smurf – W3schools is such a helpful site but I would take anything the site with a grain of salt, that site is grossly inaccurate especially when it comes to HTML5. See this <a href="http://w3fools.com/" rel="nofollow">http://w3fools.com/</a> to see why. </p>
<p>sickdesigner – Using of > + etc. to style the specific element in relation to those around it, is from CSS 2.1. Browsers have been slow to implement some of it. Also what is wrong with lots of ID’s – using #element in a style sheet is quicker for rendering than selecting an actually element. Though i understand where you are coming from, I hate divitis and get annoying when people use heaps of divs instead of semantic elements,</p>
<p>(What a ranter I am)</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=521630#respond" onclick="return addComment.moveForm("comment-521630", "521630", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-521630-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-521630-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">157</span>
<div class="comment" id="comment-525213">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/63d66610dd23c98b419317ea26e8bac7?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Niraj Shakya</h3>
<span class="datetime"><a title="Commentlink #157" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-525213">April 10th, 2011 1:51 am</a></span>
</div>
</div>
<div class="comment-text">
<p>after i have studied this article ..i have successfully implemented as above for single column layout but when i tried the 2 column layout i’m stocked, confused.. how to float aside portion and section portion in the body. do i need different class like float-left or i have to use div again?</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=525213#respond" onclick="return addComment.moveForm("comment-525213", "525213", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-525213-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-525213-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">158</span>
<div class="comment" id="comment-525607">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/ebb4664336df2bfe5f1bf9223b02a109?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Tabish Zahid</h3>
<span class="datetime"><a title="Commentlink #158" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-525607">April 12th, 2011 5:26 am</a></span>
</div>
</div>
<div class="comment-text">
<p>awesome article …Learned alot ! HTML 5 rocks…..</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=525607#respond" onclick="return addComment.moveForm("comment-525607", "525607", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-525607-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-525607-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">159</span>
<div class="comment" id="comment-526742">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/5e712151913a7187b94aaae950f13b7b?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">sawebdesigns</h3>
<span class="datetime"><a title="Commentlink #159" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-526742">April 18th, 2011 4:27 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>great interesting and i find it very useful</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=526742#respond" onclick="return addComment.moveForm("comment-526742", "526742", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-526742-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-526742-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">160</span>
<div class="comment" id="comment-528341">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/177249f190d9a4e8327ff7a426e70a98?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Alonzo Hosford</h3>
<span class="datetime"><a title="Commentlink #160" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-528341">April 25th, 2011 9:01 am</a></span>
</div>
</div>
<div class="comment-text">
<p>I noticed the CSS on this page and the CSS on the final product page differ. In particular with the #content tag. </p>
<p>The article is still informative as some of the item used are explain on this page, but using the rendered example page opens questions.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=528341#respond" onclick="return addComment.moveForm("comment-528341", "528341", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-528341-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-528341-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">161</span>
<div class="comment" id="comment-529470">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/0f36e7229db83d14fc512dce00ffde67?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">s2prod</h3>
<span class="datetime"><a title="Commentlink #161" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-529470">May 1st, 2011 9:39 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Great, now i can update my website</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=529470#respond" onclick="return addComment.moveForm("comment-529470", "529470", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+3</div>
<a class="ratebtn down_active" id="btn-529470-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-529470-up" style="opacity:0.3;" title="Vote up! (3 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">162</span>
<div class="comment" id="comment-536065">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/0902c54fc3706fa5defd1cdd38bb0d29?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Tameem</h3>
<span class="datetime"><a title="Commentlink #162" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-536065">May 10th, 2011 11:46 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>/* Main Nav */<br>
#banner nav {<br>
background: #000305;<br>
font-size: 1.143em;<br>
height: 40px;<br>
line-height: 30px;<br>
margin: 0 auto 2em auto;<br>
padding: 0;<br>
text-align: center;<br>
width: 800px;</p>
<p> border-radius: 5px;<br>
-moz-border-radius: 5px;<br>
-webkit-border-radius: 5px;<br>
}</p>
<p> #banner nav ul {list-style: none; margin: 0 auto; width: 800px;}<br>
#banner nav li {float: left; display: inline; margin: 0;}</p>
<p> #banner nav a:link, #banner nav a:visited {<br>
color: #fff;<br>
display: inline-block;<br>
height: 30px;<br>
padding: 5px 1.5em;<br>
text-decoration: none;<br>
}<br>
#banner nav a:hover, #banner nav a:active,<br>
#banner nav .active a:link, #banner nav .active a:visited {<br>
background: #C74451;<br>
color: #fff;<br>
text-shadow: none !important;<br>
}</p>
<p> #banner nav li:first-child a {<br>
border-top-left-radius: 5px;<br>
-moz-border-radius-topleft: 5px;<br>
-webkit-border-top-left-radius: 5px;</p>
<p> border-bottom-left-radius: 5px;<br>
-moz-border-radius-bottomleft: 5px;<br>
-webkit-border-bottom-left-radius: 5px;<br>
}</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=536065#respond" onclick="return addComment.moveForm("comment-536065", "536065", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-536065-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-536065-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">163</span>
<div class="comment" id="comment-538325">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/b3a5f2e197ad44595eff67ee22074815?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">ram</h3>
<span class="datetime"><a title="Commentlink #163" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-538325">May 16th, 2011 4:57 am</a></span>
</div>
</div>
<div class="comment-text">
<p>In the sentence “That’s were Progressive Enhancement and Graceful Degradation come into play,” ‘were’ needs to be replaced with ‘where’. Just a humble suggestion :)</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=538325#respond" onclick="return addComment.moveForm("comment-538325", "538325", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+5</div>
<a class="ratebtn down_active" id="btn-538325-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-538325-up" style="opacity:0.3;" title="Vote up! (5 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">164</span>
<div class="comment" id="comment-542853">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/27248899092f9dd278c433a47912d857?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Muhammd H</h3>
<span class="datetime"><a title="Commentlink #164" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-542853">June 6th, 2011 6:30 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Very Very nice and knowledgeable and gr8 article</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=542853#respond" onclick="return addComment.moveForm("comment-542853", "542853", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-542853-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-542853-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">165</span>
<div class="comment" id="comment-543183">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/b5880b69f9162a085c73c507394e3d6c?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">hardik</h3>
<span class="datetime"><a title="Commentlink #165" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-543183">June 13th, 2011 3:54 am</a></span>
</div>
</div>
<div class="comment-text">
<p>For featured article block, “section” is more suitable than “aside”.<br>
Because, “aside” is more of for supportive content, while, “Featured Article” block is kind of major content.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=543183#respond" onclick="return addComment.moveForm("comment-543183", "543183", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-543183-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-543183-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">166</span>
<div class="comment" id="comment-543852">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/acb1eb2f85631474b70b65db1bcff340?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">maochengjie</h3>
<span class="datetime"><a title="Commentlink #166" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-543852">July 3rd, 2011 10:15 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>for the “wrap block-level elements with <a> tag” issue, firefox 3.6.18 also has the same problem with 3.5</a></p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=543852#respond" onclick="return addComment.moveForm("comment-543852", "543852", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-543852-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-543852-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">167</span>
<div class="comment" id="comment-544469">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/8dd454ef39e83db9cf1382160b52a3f3?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Mufeed Ahmad</h3>
<span class="datetime"><a title="Commentlink #167" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-544469">July 19th, 2011 5:04 am</a></span>
</div>
</div>
<div class="comment-text">
<p>HTML5.. Next generation of web.. truly said. although its in speed to bang everywhere in the web..<br>
in my words its not a new boat for us.. its just enhanced version of the same markup. So why should we fear to use? lets Rock with it. </p>
<p>Thank you very much for all the discussions over here.<br>
Mufeed Ahmad</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=544469#respond" onclick="return addComment.moveForm("comment-544469", "544469", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+3</div>
<a class="ratebtn down_active" id="btn-544469-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-544469-up" style="opacity:0.3;" title="Vote up! (3 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">168</span>
<div class="comment" id="comment-544771">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/4c09b6fadde2b1eabcbde71333b415ec?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Mark Falvey</h3>
<span class="datetime"><a title="Commentlink #168" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-544771">July 31st, 2011 7:10 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>Really informative article and so well written. Thanks!</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=544771#respond" onclick="return addComment.moveForm("comment-544771", "544771", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-544771-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-544771-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">169</span>
<div class="comment" id="comment-544814">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/3643c1f4889096dec21db874ba73caf8?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Sunil Kumar</h3>
<span class="datetime"><a title="Commentlink #169" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-544814">August 3rd, 2011 12:32 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Above given HTML5 example is too good as they have try to figure out its coding output and all. Thanks for the same.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=544814#respond" onclick="return addComment.moveForm("comment-544814", "544814", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult negative">-4</div>
<a class="ratebtn down_active" id="btn-544814-down" style="opacity:0.3;" title="Vote down! (4 votes)"></a>
<a class="ratebtn up_active" id="btn-544814-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">170</span>
<div class="comment" id="comment-545483">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/10ced4462e7ab630cdcd4b7e06113123?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Totino</h3>
<span class="datetime"><a title="Commentlink #170" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-545483">August 16th, 2011 8:37 am</a></span>
</div>
</div>
<div class="comment-text">
<p>I don’t understand something:<br>
html5 seems to be still in progress and not valid.<br>
For instance there is a change proposal in w3C to suppress mainly because it leads to complexity regarding h1-h6 elements<br>
Then starting with Html5 seems to be dangerous<br>
????????????</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=545483#respond" onclick="return addComment.moveForm("comment-545483", "545483", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-545483-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-545483-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">171</span>
<div class="comment" id="comment-545486">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/10ced4462e7ab630cdcd4b7e06113123?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Totino</h3>
<span class="datetime"><a title="Commentlink #171" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-545486">August 16th, 2011 8:54 am</a></span>
</div>
</div>
<div class="comment-text">
<p>previously I talked about hgroup element</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=545486#respond" onclick="return addComment.moveForm("comment-545486", "545486", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-545486-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-545486-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">172</span>
<div class="comment" id="comment-546990">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/cfeb019a2578358499446ed810635b53?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">irfan</h3>
<span class="datetime"><a title="Commentlink #172" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-546990">August 28th, 2011 9:09 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>Nice Article!<br>
This is a really helpful tutorial.<br>
thanks to share some good things about html5.</p>
<p>Thanks<br>
irfan</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=546990#respond" onclick="return addComment.moveForm("comment-546990", "546990", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-546990-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-546990-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">173</span>
<div class="comment" id="comment-547451">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/3b61ff4546ebb5443b7f5a5518bd7c76?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">praveen</h3>
<span class="datetime"><a title="Commentlink #173" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-547451">September 3rd, 2011 3:31 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>i’ve got a question. sometimes you use “em”, in some other cases “px”.. what are the differences? is it crucial to use them appropriately?</p>
<p>by the way.. thanks for this tutorial. it’s amazing. xD</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=547451#respond" onclick="return addComment.moveForm("comment-547451", "547451", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-547451-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-547451-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">174</span>
<div class="comment" id="comment-547903">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/571a6566628233cc36cad665c0a4a288?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">expressions</h3>
<span class="datetime"><a title="Commentlink #174" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-547903">September 10th, 2011 12:10 am</a></span>
</div>
</div>
<div class="comment-text">
<p>SM<br>
This article is more contemporary now than ever.<br>
Thanks for detailed explanation. I have been writing HTML5 and CSS3 for over an year but still found this article having vivid explanation and usage of new tags and techniques.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=547903#respond" onclick="return addComment.moveForm("comment-547903", "547903", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-547903-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-547903-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">175</span>
<div class="comment" id="comment-547909">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/4214db27630a39a2be7915e4acaf5c96?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Ninja</h3>
<span class="datetime"><a title="Commentlink #175" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-547909">September 10th, 2011 3:53 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Marvelous!! It’s such articles that make one move from novice to a pro in an overnight! :)</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=547909#respond" onclick="return addComment.moveForm("comment-547909", "547909", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-547909-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-547909-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">176</span>
<div class="comment" id="comment-548216">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/9d1c468c8ace1f90bbdbc05f84e9fb47?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Js</h3>
<span class="datetime"><a title="Commentlink #176" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-548216">September 16th, 2011 10:43 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Thanks a lot</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=548216#respond" onclick="return addComment.moveForm("comment-548216", "548216", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-548216-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-548216-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">177</span>
<div class="comment" id="comment-548298">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/e2fa01d66ab3879dd8c9dcd870ff4122?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">diarbyrag</h3>
<span class="datetime"><a title="Commentlink #177" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-548298">September 16th, 2011 5:44 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>Hi all,<br>
I don’t want to be pedantic but … the html 5 article is great and I for one am all in favour of correct grammar and semantic html, etc … however, can we please get the semantics of the article Title in correct English please</p>
<p>it is ‘AN’ html 5 layout NOT ‘A’ html 5 layout</p>
<p>just does not look right…</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=548298#respond" onclick="return addComment.moveForm("comment-548298", "548298", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+1</div>
<a class="ratebtn down_active" id="btn-548298-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-548298-up" style="opacity:0.3;" title="Vote up! (1 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">178</span>
<div class="comment" id="comment-549465">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/f352478788fdf0ba77df0b26897474e5?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">designi1</h3>
<span class="datetime"><a title="Commentlink #178" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-549465">September 30th, 2011 1:31 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Is missing the heading at aside, section and nav… if you use the outliner you´ll check that thoose parts are “Untitle Section”, “Untitle nav”…</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=549465#respond" onclick="return addComment.moveForm("comment-549465", "549465", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult negative">-1</div>
<a class="ratebtn down_active" id="btn-549465-down" style="opacity:0.3;" title="Vote down! (1 votes)"></a>
<a class="ratebtn up_active" id="btn-549465-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">179</span>
<div class="comment" id="comment-550674">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/d5a0d9e73f167171a7a056e70f61dc49?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">abey</h3>
<span class="datetime"><a title="Commentlink #179" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-550674">October 13th, 2011 9:24 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>Thanks …</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=550674#respond" onclick="return addComment.moveForm("comment-550674", "550674", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+1</div>
<a class="ratebtn down_active" id="btn-550674-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-550674-up" style="opacity:0.3;" title="Vote up! (1 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">180</span>
<div class="comment" id="comment-551162">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/3e223a5b4a281cf3a8c96cd1ce717b35?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Hajenius</h3>
<span class="datetime"><a title="Commentlink #180" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-551162">October 18th, 2011 3:59 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Cool article.</p>
<p>You could also abuse the body tag to center the content:</p>
<p>body { margin: 0 auto; width: 800px; }</p>
<p>Then you can eliminate the .body classes..</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=551162#respond" onclick="return addComment.moveForm("comment-551162", "551162", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+1</div>
<a class="ratebtn down_active" id="btn-551162-down" style="opacity:0.3;" title="Vote down! (2 votes)"></a>
<a class="ratebtn up_active" id="btn-551162-up" style="opacity:0.3;" title="Vote up! (3 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">181</span>
<div class="comment" id="comment-552770">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/cafc33ab27adda60357bd598e0882890?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">reidy68</h3>
<span class="datetime"><a title="Commentlink #181" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-552770">October 28th, 2011 9:57 am</a></span>
</div>
</div>
<div class="comment-text">
<p>…for someone like myself who’s a novice and learning web design, some of the comments are a bit overwhelming! this would seem like a great tutorial but there seems to be quite a few comments that give another method of doing things! with web design there’s a million ways to skin a cat (figuratively speaking, not literally!) but is the tutorial not just one way of doing things? as i am in the process of trying to learn web standards to make my work more accessible, i wonder if i should try html5 or leave alone for now? it’s all a learning curve i s’pose….</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=552770#respond" onclick="return addComment.moveForm("comment-552770", "552770", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+1</div>
<a class="ratebtn down_active" id="btn-552770-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-552770-up" style="opacity:0.3;" title="Vote up! (1 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">182</span>
<div class="comment" id="comment-553345">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/2bf30d492fb3ce5b49e1dfb8883ab4c3?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Jurica</h3>
<span class="datetime"><a title="Commentlink #182" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-553345">November 2nd, 2011 5:07 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>Useful article, at least for me. Thanks for sharing.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=553345#respond" onclick="return addComment.moveForm("comment-553345", "553345", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-553345-down" style="opacity:0.3;" title="Vote down! (1 votes)"></a>
<a class="ratebtn up_active" id="btn-553345-up" style="opacity:0.3;" title="Vote up! (1 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">183</span>
<div class="comment" id="comment-553456">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/b699ac7c32faafacffc780496dfe3731?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Himmat</h3>
<span class="datetime"><a title="Commentlink #183" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-553456">November 4th, 2011 5:12 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Not working rounded corners, shadows in ie6,7,8</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=553456#respond" onclick="return addComment.moveForm("comment-553456", "553456", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult negative">-1</div>
<a class="ratebtn down_active" id="btn-553456-down" style="opacity:0.3;" title="Vote down! (2 votes)"></a>
<a class="ratebtn up_active" id="btn-553456-up" style="opacity:0.3;" title="Vote up! (1 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">184</span>
<div class="comment" id="comment-553737">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/7aa9dfd9a12fce1f4b3506eecd82c79e?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Max</h3>
<span class="datetime"><a title="Commentlink #184" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-553737">November 7th, 2011 10:15 am</a></span>
</div>
</div>
<div class="comment-text">
<p>You wouldn’t happen to have a direct link to the source files for this example?</p>
<p>Many Thanks</p>
<p>Max</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=553737#respond" onclick="return addComment.moveForm("comment-553737", "553737", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult negative">-1</div>
<a class="ratebtn down_active" id="btn-553737-down" style="opacity:0.3;" title="Vote down! (1 votes)"></a>
<a class="ratebtn up_active" id="btn-553737-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">185</span>
<div class="comment" id="comment-561528">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/f2c16cc8e998211f0399c4b3281f89b4?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Sid</h3>
<span class="datetime"><a title="Commentlink #185" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-561528">December 9th, 2011 2:44 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>Why we use ” with some of the fonts. e.g. ‘Trebuchet MS’</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=561528#respond" onclick="return addComment.moveForm("comment-561528", "561528", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+1</div>
<a class="ratebtn down_active" id="btn-561528-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-561528-up" style="opacity:0.3;" title="Vote up! (1 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">186</span>
<div class="comment" id="comment-563008">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/b16b62df06bf1d90b7b6136cb3ee1a04?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">CMZ</h3>
<span class="datetime"><a title="Commentlink #186" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-563008">December 22nd, 2011 3:28 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>Article needs some proofing. Title should be, “Coding An HTML 5 Layout From Scratch” and “aftermath” is one word.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=563008#respond" onclick="return addComment.moveForm("comment-563008", "563008", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-563008-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-563008-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">187</span>
<div class="comment" id="comment-563533">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/2325869a18bc53b0315974968a939aff?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Pali Madra</h3>
<span class="datetime"><a title="Commentlink #187" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-563533">January 2nd, 2012 3:32 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Thank you for the tutorial. It would be nice if the source files are available. The images would help in determining if you were to practice writing HTML5</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=563533#respond" onclick="return addComment.moveForm("comment-563533", "563533", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-563533-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-563533-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">188</span>
<div class="comment" id="comment-563770">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/f10eb4c91b8b3b000ea0b7419ea83058?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Anita Clark Realtor</h3>
<span class="datetime"><a title="Commentlink #188" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-563770">January 5th, 2012 5:38 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>For an html rookie like me, this is a very good resource. The code is easy to follow and I like that you provided a snapshot of what the page would look like from a web standpoint.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=563770#respond" onclick="return addComment.moveForm("comment-563770", "563770", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-563770-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-563770-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">189</span>
<div class="comment" id="comment-565334">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/f620f4647fb816073c9152a284245e64?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Reef</h3>
<span class="datetime"><a title="Commentlink #189" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-565334">January 16th, 2012 4:24 am</a></span>
</div>
</div>
<div class="comment-text">
<p>this tutorial royally SUCKS it doesn’t conclude with source files… things are all over the place.. and above all the CSS does not work :(</p>
<p>-1</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=565334#respond" onclick="return addComment.moveForm("comment-565334", "565334", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult negative">-3</div>
<a class="ratebtn down_active" id="btn-565334-down" style="opacity:0.3;" title="Vote down! (4 votes)"></a>
<a class="ratebtn up_active" id="btn-565334-up" style="opacity:0.3;" title="Vote up! (1 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">190</span>
<div class="comment" id="comment-566306">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/b1b06d36af26977f58e870813d9beee6?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Jack</h3>
<span class="datetime"><a title="Commentlink #190" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-566306">January 21st, 2012 10:38 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Thanks for this page, but your markup and css don’t render as advertised.<br>
It would be great if you could deliver html and css that actual render as expected<br>
so I could be confident in your competence. I’m left not trusting anything you<br>
presented.</p>
<p>Jack</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=566306#respond" onclick="return addComment.moveForm("comment-566306", "566306", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult negative">-3</div>
<a class="ratebtn down_active" id="btn-566306-down" style="opacity:0.3;" title="Vote down! (5 votes)"></a>
<a class="ratebtn up_active" id="btn-566306-up" style="opacity:0.3;" title="Vote up! (2 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">191</span>
<div class="comment" id="comment-570892">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/3d87eefcab541058af12a66232a9ee67?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Gokul</h3>
<span class="datetime"><a title="Commentlink #191" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-570892">February 22nd, 2012 8:16 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Thanks for the article. I can learn a lot not only about HTML5 and CSS3, but also about the standard of coding html and css that should keep in mind.</p>
<p>Anyway THANKS again. </p>
<p>Gokul</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=570892#respond" onclick="return addComment.moveForm("comment-570892", "570892", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-570892-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-570892-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">192</span>
<div class="comment" id="comment-571066">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/ac53676f66854a97d90ffca85eab2322?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">uday</h3>
<span class="datetime"><a title="Commentlink #192" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-571066">February 23rd, 2012 2:32 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Hi, I am going make application like twitter but my own application do not want to use api of twitter so can you please tell me if i Use HTML 5 to develop application does it good idea? and if you know any sample Twit application but not twitter can you please suggest me. Thanking you in advance</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=571066#respond" onclick="return addComment.moveForm("comment-571066", "571066", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult positive">+1</div>
<a class="ratebtn down_active" id="btn-571066-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-571066-up" style="opacity:0.3;" title="Vote up! (1 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">193</span>
<div class="comment" id="comment-576291">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/493ed8324d021ae2838b907f6c89b881?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Cameron</h3>
<span class="datetime"><a title="Commentlink #193" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-576291">April 5th, 2012 6:10 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Awesome write up, this is huge! I’ve been out of the loop of things for way too long when it comes to HTML and CSS, this was a great bump to bringing me up to speed, also reintroduced me to better habits such as using globals. I’ve looked into CSS pre-processor frameworks, yet I’ve been too busy with client work to give them a shot. I think I’m going to try converting this over to using “less” as my “Hello World” into CSS pre-processor f-work. Do you use them at all?</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=576291#respond" onclick="return addComment.moveForm("comment-576291", "576291", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-576291-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-576291-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">194</span>
<div class="comment" id="comment-578806">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/3a1e1ede460987714c302bf7250f786f?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Saeed</h3>
<span class="datetime"><a title="Commentlink #194" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-578806">May 3rd, 2012 10:30 am</a></span>
</div>
</div>
<div class="comment-text">
<p>really nice. keep it up</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=578806#respond" onclick="return addComment.moveForm("comment-578806", "578806", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-578806-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-578806-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">195</span>
<div class="comment" id="comment-579583">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/94d79a9f743839e46c116d5a6f41a4f3?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Ava Richardson</h3>
<span class="datetime"><a title="Commentlink #195" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-579583">May 17th, 2012 2:34 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>Wow this is quite a beginning tutorial! Great job!</p>
<p>A group of student teachers at my university produced a series of HTML5 how to videos to introduce others to the basics of HTML5 coding and CSS style sheets. Our free videos include instructions and examples so you can follow along at home with the online instructor. Check it out at:<br>
<a href="http://www.youtube.com/playlist?list=PL7D551B17087A03C9&feature=plcp" rel="nofollow"> HTML5 &CSS3 Video Tutorials by myCSULA</a></p>
<p>Thanks!</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=579583#respond" onclick="return addComment.moveForm("comment-579583", "579583", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-579583-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-579583-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">196</span>
<div class="comment" id="comment-583539">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/4f82f77a37a64ba408eedaf6744a567a?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Matt</h3>
<span class="datetime"><a title="Commentlink #196" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-583539">June 21st, 2012 8:41 am</a></span>
</div>
</div>
<div class="comment-text">
<p>How can I create an interactive map like this: <a href="http://se.deltasd.bc.ca/vision/" rel="nofollow">http://se.deltasd.bc.ca/vision/</a> while using HTML5?</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=583539#respond" onclick="return addComment.moveForm("comment-583539", "583539", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-583539-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-583539-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">197</span>
<div class="comment" id="comment-613440">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/27327c38325d8cfd599dfdb0ff8274a8?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">Ken</h3>
<span class="datetime"><a title="Commentlink #197" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-613440">September 25th, 2012 11:07 am</a></span>
</div>
</div>
<div class="comment-text">
<p>If you do a Globalogiq search for “<!DOCTYPE HTML>” (case insensitive) you can get a bunch of examples of sites with working HTML5. It should be enough to get you started.</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=613440#respond" onclick="return addComment.moveForm("comment-613440", "613440", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-613440-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-613440-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">198</span>
<div class="comment" id="comment-619303">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/12b81ec470134ac4468a6435d6e96d87?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo"> <div class="authormeta">
<h3 class="comment-author">SuperCRIG</h3>
<span class="datetime"><a title="Commentlink #198" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-619303">October 18th, 2012 6:10 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>I tried to change my profile picture, i selected a random image and it started loading but it never completed. Yes, i’m talking about my Avatar/Profile picture which doesn’t responds. Even if the loading gets completed, the profile picture does not shows..<br>
Help me please</p>
</div>
<div class="commentmeta">
<div class="reply">
<a class="comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/?replytocom=619303#respond" onclick="return addComment.moveForm("comment-619303", "619303", "respond", "9045")">Reply</a> </div>
<div class="commentrating clearfix">
<div class="rateresult">0</div>
<a class="ratebtn down_active" id="btn-619303-down" style="opacity:0.3;" title="Vote down! (0 votes)"></a>
<a class="ratebtn up_active" id="btn-619303-up" style="opacity:0.3;" title="Vote up! (0 votes)"></a>
</div>
</div>
</div>
</li>
</ol>
</div>
<div id="best-comments" style="display: none;">
<ol id="ratedcomments-overview" class="commentlist">
<li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">1</span>
<div class="comment" id="bestcomment-372411">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/1896270c8cfb70ca1203fe8b39999bf8?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo">
<div class="authormeta">
<h3 class="comment-author">Yurgen</h3>
<span class="datetime"><a title="Commentlink #1" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372411">August 4th, 2009 12:06 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Wow! Very nice article.</p>
</div>
<div class="commentmeta">
<div class="commentrating clearfix">
<div class="rateresult positive">+17</div>
</div>
</div>
</div>
</li><li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">2</span>
<div class="comment" id="bestcomment-372424">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/90fbce3924bb9b26f23f6f4d5ceeaf6e?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo">
<div class="authormeta">
<h3 class="comment-author">Rich Clark</h3>
<span class="datetime"><a title="Commentlink #2" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372424">August 4th, 2009 12:25 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Hi</p>
<p>Good write up & thanks for the links to the HTML 5 Doctor & HTML 5 Gallery, hope you find them useful. A few things I feel that I should point out to make use of even more HTML 5 are.</p>
<p>* You can use the <code><time></code> element rather than <code><abbr></code> for the entry date, it’s more semantic and can still be used for microformats<br>
* The 2005-2009 paragraph would be more semantic in the now non-presentational <code><small></code> element<br>
* If you so wished each article could have a <code><h1></code> for it’s title<br>
* <code><figure></code> could include a <code><legend></code> (though until this is implemented in browsers you will have to use a <code><p class="legend"></code> replacement, see <a href="http://html5doctor.com/legend-not-such-a-legend-anymore/" rel="nofollow">http://html5doctor.com/legend-not-such-a-legend-anymore/</a></p>
<p>Hope that helps your readers.</p>
<p>Cheers</p>
<p>Rich Clark (a HTML 5 Doctor!)</p>
</div>
<div class="commentmeta">
<div class="commentrating clearfix">
<div class="rateresult positive">+9</div>
</div>
</div>
</div>
</li><li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">3</span>
<div class="comment" id="bestcomment-372423">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/39c50f59631077764f39c7842dd1a305?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo">
<div class="authormeta">
<h3 class="comment-author">MaTYO</h3>
<span class="datetime"><a title="Commentlink #3" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372423">August 4th, 2009 12:21 am</a></span>
</div>
</div>
<div class="comment-text">
<p>good tutorial, not sure weather or not to start coding in HTML5 or not yet tho! :/</p>
</div>
<div class="commentmeta">
<div class="commentrating clearfix">
<div class="rateresult positive">+6</div>
</div>
</div>
</div>
</li><li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">4</span>
<div class="comment" id="bestcomment-372506">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/5326a29a31e2fe0415a678727dbc544d?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo">
<div class="authormeta">
<h3 class="comment-author">Rusty</h3>
<span class="datetime"><a title="Commentlink #4" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372506">August 4th, 2009 4:22 am</a></span>
</div>
</div>
<div class="comment-text">
<p>@shaggy</p>
<p>Were you told you will need to change to html 5? NOOOOOOOOO!</p>
<p>This article if faaaaaaaar from useless, if you think you know more – go ahead and prove it! ;)</p>
<p>Great article.</p>
</div>
<div class="commentmeta">
<div class="commentrating clearfix">
<div class="rateresult positive">+6</div>
</div>
</div>
</div>
</li><li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">5</span>
<div class="comment" id="bestcomment-454416">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/725a1650e19d38e83047424e0755e7fa?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo">
<div class="authormeta">
<h3 class="comment-author">Bird</h3>
<span class="datetime"><a title="Commentlink #5" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-454416">April 17th, 2010 8:05 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>LARS, STOP SHOUTING. YOU’RE HURTING MY EARS.</p>
</div>
<div class="commentmeta">
<div class="commentrating clearfix">
<div class="rateresult positive">+6</div>
</div>
</div>
</div>
</li><li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">6</span>
<div class="comment" id="bestcomment-372420">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/7246069e5b8df4ddedd185e3395ed298?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo">
<div class="authormeta">
<h3 class="comment-author">Le Marquis</h3>
<span class="datetime"><a title="Commentlink #6" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372420">August 4th, 2009 12:17 am</a></span>
</div>
</div>
<div class="comment-text">
<p>I’m diving in this article right now. Looks very impressive…</p>
</div>
<div class="commentmeta">
<div class="commentrating clearfix">
<div class="rateresult positive">+5</div>
</div>
</div>
</div>
</li><li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">7</span>
<div class="comment" id="bestcomment-538325">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/b3a5f2e197ad44595eff67ee22074815?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo">
<div class="authormeta">
<h3 class="comment-author">ram</h3>
<span class="datetime"><a title="Commentlink #7" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-538325">May 16th, 2011 4:57 am</a></span>
</div>
</div>
<div class="comment-text">
<p>In the sentence “That’s were Progressive Enhancement and Graceful Degradation come into play,” ‘were’ needs to be replaced with ‘where’. Just a humble suggestion :)</p>
</div>
<div class="commentmeta">
<div class="commentrating clearfix">
<div class="rateresult positive">+5</div>
</div>
</div>
</div>
</li><li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">8</span>
<div class="comment" id="bestcomment-372454">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/96fd62089ba92fa2cc24d63085db409a?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo">
<div class="authormeta">
<h3 class="comment-author">sickdesigner</h3>
<span class="datetime"><a title="Commentlink #8" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372454">August 4th, 2009 1:33 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Ok, seriously not cool.</p>
<p>Why give classes and ids to every tag when HTML 5 is about a better semantic separation between code, one of the consequences of this being the lack of need for said classes and ids.<br>
It’s as pointless as <em> and in my opinion serves to further propagate classitis and iditis, both diseases related to the more famous divitis.</em></p><em>
</em><p><em>If you’re using CSS3 wouldn’t it be a much better choice to use > + etc. to style the specific element in relation to those around it, rather than use the “old”, css 2.1 way?</em></p>
</div>
<div class="commentmeta">
<div class="commentrating clearfix">
<div class="rateresult positive">+4</div>
</div>
</div>
</div>
</li><li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">9</span>
<div class="comment" id="bestcomment-372438">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/9062898453308f76b9cf06f3e535e154?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo">
<div class="authormeta">
<h3 class="comment-author">sooterkein</h3>
<span class="datetime"><a title="Commentlink #9" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372438">August 4th, 2009 12:45 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Huh…</p>
<p> html lang=es ? Espagnol ?</p>
<p>Ariba Ariba! Abrazar Smashing HTML 5!</p>
</div>
<div class="commentmeta">
<div class="commentrating clearfix">
<div class="rateresult positive">+4</div>
</div>
</div>
</div>
</li><li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">10</span>
<div class="comment" id="bestcomment-372486">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/d78606b3355a17b53c9e290940599d52?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo">
<div class="authormeta">
<h3 class="comment-author">chaitrax</h3>
<span class="datetime"><a title="Commentlink #10" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372486">August 4th, 2009 2:56 am</a></span>
</div>
</div>
<div class="comment-text">
<p>5 thanks…</p>
</div>
<div class="commentmeta">
<div class="commentrating clearfix">
<div class="rateresult positive">+3</div>
</div>
</div>
</div>
</li><li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">11</span>
<div class="comment" id="bestcomment-411247">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/4665a104168e9b55fb313df3689ba43b?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo">
<div class="authormeta">
<h3 class="comment-author">Johan de Jong</h3>
<span class="datetime"><a title="Commentlink #11" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-411247">November 18th, 2009 6:41 am</a></span>
</div>
</div>
<div class="comment-text">
<p>I’m sorry I have to say this, but the example has nothing to do with HTML5. Except for the fact that there are custom (which are used in HTML5) tags.</p>
<p>Example :<br>
The in HTML5 is a replacement of the , and tags especially for navigation purposes. So the use of the extra tag is useless.</p>
<p>Besides that, HTML5 supports the use of custom tags (since there is no dtd), so why still use id’s and classes??? The only thing you have to do is add them with the IE-HTML5-fix, which is a lot nicer.</p>
<p>Just my two cents, but if you do it, do it good.</p>
</div>
<div class="commentmeta">
<div class="commentrating clearfix">
<div class="rateresult positive">+3</div>
</div>
</div>
</div>
</li><li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">12</span>
<div class="comment" id="bestcomment-446174">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/79db48535d7b046906f6dd338dbbbc31?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo">
<div class="authormeta">
<h3 class="comment-author">Robert Wakeford</h3>
<span class="datetime"><a title="Commentlink #12" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-446174">March 10th, 2010 3:18 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>I certainly agree that html5 should not be used in production environments yet, however, I’ve been in this game for over ten years now, and bitter experience has shown me that you need to start getting yourself aquainted new technologies, as soon as they appear on the horizon otherwise you suddenly discover that the competition has addopted them and you’re seriously out dated, and playing catch-up.</p>
<p>I will certainly be creating sample html5 layouts to explore the new features.</p>
</div>
<div class="commentmeta">
<div class="commentrating clearfix">
<div class="rateresult positive">+3</div>
</div>
</div>
</div>
</li><li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">13</span>
<div class="comment" id="bestcomment-544469">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/8dd454ef39e83db9cf1382160b52a3f3?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo">
<div class="authormeta">
<h3 class="comment-author">Mufeed Ahmad</h3>
<span class="datetime"><a title="Commentlink #13" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-544469">July 19th, 2011 5:04 am</a></span>
</div>
</div>
<div class="comment-text">
<p>HTML5.. Next generation of web.. truly said. although its in speed to bang everywhere in the web..<br>
in my words its not a new boat for us.. its just enhanced version of the same markup. So why should we fear to use? lets Rock with it. </p>
<p>Thank you very much for all the discussions over here.<br>
Mufeed Ahmad</p>
</div>
<div class="commentmeta">
<div class="commentrating clearfix">
<div class="rateresult positive">+3</div>
</div>
</div>
</div>
</li><li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">14</span>
<div class="comment" id="bestcomment-529470">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/0f36e7229db83d14fc512dce00ffde67?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo">
<div class="authormeta">
<h3 class="comment-author">s2prod</h3>
<span class="datetime"><a title="Commentlink #14" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-529470">May 1st, 2011 9:39 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Great, now i can update my website</p>
</div>
<div class="commentmeta">
<div class="commentrating clearfix">
<div class="rateresult positive">+3</div>
</div>
</div>
</div>
</li><li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">15</span>
<div class="comment" id="bestcomment-372552">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/4a16dea2205b959c26bf9a6284e3c938?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo">
<div class="authormeta">
<h3 class="comment-author">Pipo Zoft</h3>
<span class="datetime"><a title="Commentlink #15" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372552">August 4th, 2009 6:49 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Thank you for share your knowledge with us…..</p>
</div>
<div class="commentmeta">
<div class="commentrating clearfix">
<div class="rateresult positive">+2</div>
</div>
</div>
</div>
</li><li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">16</span>
<div class="comment" id="bestcomment-372526">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/fd8896210a071dbb0836160ccd616118?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo">
<div class="authormeta">
<h3 class="comment-author">Jessica</h3>
<span class="datetime"><a title="Commentlink #16" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372526">August 4th, 2009 5:20 am</a></span>
</div>
</div>
<div class="comment-text">
<p>OMG, theres no way I can keep up with this stuff, I’m still trying to wrap my head around CCS 1 lol ^_^ Good article though!!</p>
</div>
<div class="commentmeta">
<div class="commentrating clearfix">
<div class="rateresult positive">+2</div>
</div>
</div>
</div>
</li><li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">17</span>
<div class="comment" id="bestcomment-372477">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/fbd323e9c326533ab5c9757c53d8d198?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo">
<div class="authormeta">
<h3 class="comment-author">Teddy Zetterlund</h3>
<span class="datetime"><a title="Commentlink #17" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372477">August 4th, 2009 2:25 am</a></span>
</div>
</div>
<div class="comment-text">
<p>sickdesigner: You might want to consider how that’ll effect the performance though.</p>
<p>Enrique Ramírez: Instead of the “body” class, why not just use the body element as the page wrapper?</p>
</div>
<div class="commentmeta">
<div class="commentrating clearfix">
<div class="rateresult positive">+2</div>
</div>
</div>
</div>
</li><li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">18</span>
<div class="comment" id="bestcomment-372533">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/4ca9c0cdd80876b3b3ab5efc6a4c5d73?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo">
<div class="authormeta">
<h3 class="comment-author">Pradeep CD</h3>
<span class="datetime"><a title="Commentlink #18" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372533">August 4th, 2009 5:40 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Good stuff… HTML 5 is great…easy…</p>
</div>
<div class="commentmeta">
<div class="commentrating clearfix">
<div class="rateresult positive">+2</div>
</div>
</div>
</div>
</li><li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">19</span>
<div class="comment" id="bestcomment-372538">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/cfc9eb0b9528819a8705287b88da29f9?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo">
<div class="authormeta">
<h3 class="comment-author">Craig</h3>
<span class="datetime"><a title="Commentlink #19" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372538">August 4th, 2009 5:55 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Thanks! Really looking forward to all of the great HTML5 stuff to come.</p>
</div>
<div class="commentmeta">
<div class="commentrating clearfix">
<div class="rateresult positive">+2</div>
</div>
</div>
</div>
</li><li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">20</span>
<div class="comment" id="bestcomment-372802">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/f78549e50ded27045d835d67812e56cd?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo">
<div class="authormeta">
<h3 class="comment-author">Andy</h3>
<span class="datetime"><a title="Commentlink #20" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372802">August 4th, 2009 11:39 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>Progressive enhancement:</p>
<blockquote cite="Smashing Magazine"><p>building first for the less capable, outdated browser and then enhance for the latest technologies</p></blockquote>
<p>Don’t forget that we should be building for accessibility too – design and code from the beginning not only for outdated <em>browsers</em> but also for other devices, such as assistive technologies. Too often we worry about what a design looks like in a browser – i.e. to a sighted person. Plenty of blind people use the web too and the Progressive Enhancement ideology, when applied properly, can make a website useable for them too.</p>
</div>
<div class="commentmeta">
<div class="commentrating clearfix">
<div class="rateresult positive">+2</div>
</div>
</div>
</div>
</li><li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">21</span>
<div class="comment" id="bestcomment-374186">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/300fef6681dafcc9ff37c7a16ea792c3?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo">
<div class="authormeta">
<h3 class="comment-author">Richard Eagleton</h3>
<span class="datetime"><a title="Commentlink #21" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-374186">August 9th, 2009 10:18 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>Just wanted to say thanks for giving a good rundown of the HTML5 semantic elements.</p>
<p>One question, though, is about the global-forms.css file. You said in the article you would go into it more but never did. So what is the purpose of it?</p>
<p>Incidentally, in the code you have above for the social icons, you end up with a background for LastFM in IE7. I checked the final page code which works properly and the code above for Line 11 should be<br>
<q><code>.social a[href*='last.fm'], .social a[href*='lastfm.'] {background-image: url('../images/icons/lastfm.png');}</code></q><br>
ie. an extra dot after lastfm in the second selector. I also found that you missed including the ie.css file in the code above too (sorry, just a few things I discovered as I followed your code step-by-step)</p>
</div>
<div class="commentmeta">
<div class="commentrating clearfix">
<div class="rateresult positive">+2</div>
</div>
</div>
</div>
</li><li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">22</span>
<div class="comment" id="bestcomment-437186">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/4035eac212ec4bc96dd6b8efa35a90d3?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo">
<div class="authormeta">
<h3 class="comment-author">Aamir Afridi</h3>
<span class="datetime"><a title="Commentlink #22" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-437186">January 22nd, 2010 4:18 am</a></span>
</div>
</div>
<div class="comment-text">
<p>I was about to start markup of a website in HTML5 and couldn’t find the place to start from. I was looking for EXACTLY something like this article from where I can make a start and move on, thank you for such a nice article :)</p>
</div>
<div class="commentmeta">
<div class="commentrating clearfix">
<div class="rateresult positive">+2</div>
</div>
</div>
</div>
</li><li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">23</span>
<div class="comment" id="bestcomment-485981">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/c326980b61944a653f1269ecc6b0e16a?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo">
<div class="authormeta">
<h3 class="comment-author">Darrell</h3>
<span class="datetime"><a title="Commentlink #23" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-485981">October 7th, 2010 10:51 am</a></span>
</div>
</div>
<div class="comment-text">
<p>What if the Feature block was bigger on the home page. I mean this is the home page, how is the Featured news article just something meh off to the “aside” and not really completely related to the rest of the home page? If you look at the section of 3 articles, that section is also tangentially related but separate from the Featured content too. So it can be an aside to the featured news if you look at it from another angle. So does it depend on the mindset of the operator of the site? If I consider my featured news block the most important and main thing on my home page I should label it section and the rest of other articles called the aside?</p>
</div>
<div class="commentmeta">
<div class="commentrating clearfix">
<div class="rateresult positive">+2</div>
</div>
</div>
</div>
</li><li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">24</span>
<div class="comment" id="bestcomment-480602">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/6da726ff0259b932583a235522192eb0?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo">
<div class="authormeta">
<h3 class="comment-author">irshaid tayeb</h3>
<span class="datetime"><a title="Commentlink #24" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-480602">September 13th, 2010 6:45 am</a></span>
</div>
</div>
<div class="comment-text">
<p>wow, very nice article, thanks .</p>
</div>
<div class="commentmeta">
<div class="commentrating clearfix">
<div class="rateresult positive">+2</div>
</div>
</div>
</div>
</li><li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">25</span>
<div class="comment" id="bestcomment-484870">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/c2bb515af75f31dd494312de15d1dec2?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo">
<div class="authormeta">
<h3 class="comment-author">sairam</h3>
<span class="datetime"><a title="Commentlink #25" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-484870">October 2nd, 2010 4:20 am</a></span>
</div>
</div>
<div class="comment-text">
<p>very nice thanks to shar this article</p>
</div>
<div class="commentmeta">
<div class="commentrating clearfix">
<div class="rateresult positive">+2</div>
</div>
</div>
</div>
</li><li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">26</span>
<div class="comment" id="bestcomment-505972">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/a593f8fa45ba8496c5d445da53b1b89b?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo">
<div class="authormeta">
<h3 class="comment-author">christopher cuizon</h3>
<span class="datetime"><a title="Commentlink #26" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-505972">January 2nd, 2011 6:50 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>Can’t wait for this feature to be launch oh yeah \m/ no more scripting on ie<br>
very useful<br>
hehehe…….</p>
</div>
<div class="commentmeta">
<div class="commentrating clearfix">
<div class="rateresult positive">+2</div>
</div>
</div>
</div>
</li><li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">27</span>
<div class="comment" id="bestcomment-491295">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/70297080904e6ce64732e803bfa0c5df?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo">
<div class="authormeta">
<h3 class="comment-author">dreamincolor</h3>
<span class="datetime"><a title="Commentlink #27" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-491295">November 1st, 2010 7:14 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Don´t forget this 12 Incredible HTML5 Experiments</p>
<p>Check this out: <a href="http://www.dreamincoloronline.com/12-incredible-html5-experiments/" rel="nofollow">http://www.dreamincoloronline.com/12-incredible-html5-experiments/</a></p>
</div>
<div class="commentmeta">
<div class="commentrating clearfix">
<div class="rateresult positive">+2</div>
</div>
</div>
</div>
</li><li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">28</span>
<div class="comment" id="bestcomment-505281">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/e8ef356d01914912d9783a622e921ece?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo">
<div class="authormeta">
<h3 class="comment-author">Tim Boeun</h3>
<span class="datetime"><a title="Commentlink #28" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-505281">December 28th, 2010 12:16 am</a></span>
</div>
</div>
<div class="comment-text">
<p>wrap content on Firefox 3.6 is still the same as Firefox 3.5.</p>
<p>Thanks for your good article.</p>
</div>
<div class="commentmeta">
<div class="commentrating clearfix">
<div class="rateresult positive">+2</div>
</div>
</div>
</div>
</li><li class="comment even thread-even depth-1 clearfix ">
<span class="commentnumber">29</span>
<div class="comment" id="bestcomment-373973">
<div class="comment-author">
<img alt="" src="http://0.gravatar.com/avatar/ef57999cd41e55020875d00de42f2940?s=38&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo">
<div class="authormeta">
<h3 class="comment-author">Aaron White</h3>
<span class="datetime"><a title="Commentlink #29" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-373973">August 8th, 2009 5:48 pm</a></span>
</div>
</div>
<div class="comment-text">
<p>I was hitting a dry spell in my Web Design, but after reading this article I’ve started again. Thank you Smashing Magazine! gratefully!</p>
</div>
<div class="commentmeta">
<div class="commentrating clearfix">
<div class="rateresult positive">+1</div>
</div>
</div>
</div>
</li><li class="comment odd alt thread-odd thread-alt depth-1 clearfix ">
<span class="commentnumber">30</span>
<div class="comment" id="bestcomment-372456">
<div class="comment-author">
<img alt="" src="http://1.gravatar.com/avatar/f170e32acb89cc504e947bcdd7f2f171?s=38&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D38&r=G" class="avatar avatar-38 photo">
<div class="authormeta">
<h3 class="comment-author">Saud Khan</h3>
<span class="datetime"><a title="Commentlink #30" href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/#comment-372456">August 4th, 2009 1:46 am</a></span>
</div>
</div>
<div class="comment-text">
<p>Agree with Rich Clark (Comment #4); however this is still a good tutorial for anyone wishing to learn HTML5 and how to use it with progressive enhancement.</p>
<p>Due to high penetration of non-compliant browsers, progressive enhancement techniques are going to play vital role for several years even if HTML5 recommendations are finalized today.</p>
</div>
<div class="commentmeta">
<div class="commentrating clearfix">
<div class="rateresult positive">+1</div>
</div>
</div>
</div>
</li></ol>
</div>
</div>
<div id="respond">
<h3>Leave a Comment</h3>
<p class="desc">Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and <code>rel="nofollow"</code> is in use. So, please do not use a spammy keyword or a domain as your name, or it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!</p>
<form action="http://coding.smashingmagazine.com/wp-comments-post.php" method="post" id="commentform">
<div class="clearfix">
<p class="input-half">
<label for="comment_author">Your name <span class="required">*</span></label>
<input type="text" name="author" id="comment_author" value="" tabindex="1" class="input">
</p>
<p class="input-half">
<label for="email">Your email <span class="required">*</span></label>
<input type="text" name="email" id="email" value="" tabindex="2" class="input">
</p>
</div>
<div id="message-box">
<div class="cancel-comment-reply right">
<small><a rel="nofollow" id="cancel-comment-reply-link" href="/2009/08/04/designing-a-html-5-layout-from-scratch/#respond" style="display:none;">Click here to cancel reply.</a></small>
</div>
<label for="comment">Your message <span class="required">*</span></label>
<textarea name="comment" id="comment" rows="10" tabindex="4" class="input textarea"></textarea>
</div>
<p id="submit-form"><input name="submit" type="submit" value="Submit comment"><input type="hidden" name="comment_post_ID" value="9045" id="comment_post_ID">
<input type="hidden" name="comment_parent" id="comment_parent" value="0">
</p>
<p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="90c0725d65"></p> </form>
</div>
</div><!-- .col.main -->
</div><!-- .grid -->
<p><a href="#top" class="backtotop" title="Jump to the top of the page">↑ Back to top</a></p>
</div><!-- .fluid -->
</div><!-- #container -->
<div id="wpsidebar">
<div class="col side">
<div class="sm-search wp-search-form">
<form method="get" action="http://www.smashingmagazine.com/search-results/" target="_top">
<span class="declare">Search on Smashing Magazine</span>
<input name="q" type="text" placeholder="e.g. Responsive design">
<button class="search_submit" type="submit"><span class="first-type">Search</span><span class="last-type">Go!</span></button>
<input type="hidden" name="cx" value="partner-pub-6779860845561969:5884617103">
<input type="hidden" name="cof" value="FORID:10">
<input type="hidden" name="ie" value="UTF-8">
</form>
</div>
<div class="ed spnsrlistwrapper">
<span class="declare">Advertisement</span>
<span class="awithus"><a href="mailto:advertising@smashingmagazine.com" title="Advertise with us!" class="sprite ed-us">Advertise with us!</a></span>
<div id="spnsrlisttarget"><ul id="spnsrlist" class="bnnr-list"><li><a href="http://w3-markup.com" target="_blank" onmousedown="this.href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=4360__zoneid=70__OXLCA=1__cb=4b41b4f01b__oadest=http%3A%2F%2Fw3-markup.com'" style="border: none;"><img src="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ai.php?filename=banner_w3m_200x125.jpg&contenttype=jpeg" alt="PSD to HTML" title="PSD to HTML" border="0"></a><br><a href="http://w3-markup.com" target="_blank" onmousedown="this.href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=4360__zoneid=70__OXLCA=1__cb=4b41b4f01b__oadest=http%3A%2F%2Fw3-markup.com'">PSD to HTML</a><div id="beacon_4b41b4f01b" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="http://auslieferung.commindo-media-ressourcen.de/www/delivery/lg.php?bannerid=4360&campaignid=135&zoneid=70&loc=http%3A%2F%2Fcoding.smashingmagazine.com%2F2009%2F08%2F04%2Fdesigning-a-html-5-layout-from-scratch%2F&referer=http%3A%2F%2Fwww.google.com%2Furl%3Fsa%3Dt%26rct%3Dj%26q%3D%26esrc%3Ds%26source%3Dweb%26cd%3D2%26ved%3D0CEgQFjAB%26url%3Dhttp%253A%252F%252Fcoding.smashingmagazine.com%252F2009%252F08%252F04%252Fdesigning-a-html-5-layout-from-scratch%252F%26ei%3DYCHGUPmrEYTW8gTo8oHgDg%26usg%3DAFQjCNGCyRSBMgWxVSPJMXDGB963__sJAQ%26sig2%3D_NIsGS76idz0hb3_wyYNvA&cb=4b41b4f01b" alt="" style="width: 0px; height: 0px;"></div>
</li><li><a href="http://www.psd2html.com/" target="_blank" onmousedown="this.href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5017__zoneid=24__OXLCA=1__cb=ce79c17633__oadest=http%3A%2F%2Fwww.psd2html.com%2F'" style="border: none;"><img src="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ai.php?filename=200-125.png&contenttype=png" alt="" title="" border="0"></a><br><a href="http://www.psd2html.com/" target="_blank" onmousedown="this.href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5017__zoneid=24__OXLCA=1__cb=ce79c17633__oadest=http%3A%2F%2Fwww.psd2html.com%2F'">PSD2HTML.com</a><div id="beacon_ce79c17633" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="http://auslieferung.commindo-media-ressourcen.de/www/delivery/lg.php?bannerid=5017&campaignid=1626&zoneid=24&loc=http%3A%2F%2Fcoding.smashingmagazine.com%2F2009%2F08%2F04%2Fdesigning-a-html-5-layout-from-scratch%2F&referer=http%3A%2F%2Fwww.google.com%2Furl%3Fsa%3Dt%26rct%3Dj%26q%3D%26esrc%3Ds%26source%3Dweb%26cd%3D2%26ved%3D0CEgQFjAB%26url%3Dhttp%253A%252F%252Fcoding.smashingmagazine.com%252F2009%252F08%252F04%252Fdesigning-a-html-5-layout-from-scratch%252F%26ei%3DYCHGUPmrEYTW8gTo8oHgDg%26usg%3DAFQjCNGCyRSBMgWxVSPJMXDGB963__sJAQ%26sig2%3D_NIsGS76idz0hb3_wyYNvA&cb=ce79c17633" alt="" style="width: 0px; height: 0px;"></div>
</li><li><a href="http://www.dreamtemplate.com/?ref=sm" target="_blank" onmousedown="this.href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=2877__zoneid=24__OXLCA=1__cb=011c013f97__oadest=http%3A%2F%2Fwww.dreamtemplate.com%2F%3Fref%3Dsm'" style="border: none;"><img src="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ai.php?filename=200x125-dt-2.gif&contenttype=gif" alt="Premium Web Templates" title="Premium Web Templates" border="0"></a><br><a href="http://www.dreamtemplate.com/?ref=sm" target="_blank" onmousedown="this.href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=2877__zoneid=24__OXLCA=1__cb=011c013f97__oadest=http%3A%2F%2Fwww.dreamtemplate.com%2F%3Fref%3Dsm'">Premium Web Templates</a><div id="beacon_011c013f97" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="http://auslieferung.commindo-media-ressourcen.de/www/delivery/lg.php?bannerid=2877&campaignid=1026&zoneid=24&loc=http%3A%2F%2Fcoding.smashingmagazine.com%2F2009%2F08%2F04%2Fdesigning-a-html-5-layout-from-scratch%2F&referer=http%3A%2F%2Fwww.google.com%2Furl%3Fsa%3Dt%26rct%3Dj%26q%3D%26esrc%3Ds%26source%3Dweb%26cd%3D2%26ved%3D0CEgQFjAB%26url%3Dhttp%253A%252F%252Fcoding.smashingmagazine.com%252F2009%252F08%252F04%252Fdesigning-a-html-5-layout-from-scratch%252F%26ei%3DYCHGUPmrEYTW8gTo8oHgDg%26usg%3DAFQjCNGCyRSBMgWxVSPJMXDGB963__sJAQ%26sig2%3D_NIsGS76idz0hb3_wyYNvA&cb=011c013f97" alt="" style="width: 0px; height: 0px;"></div>
</li><li><a href="http://www.zoho.com/projects/lp/project-management-and-collaboration.html" target="_blank" onmousedown="this.href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=4538__zoneid=24__OXLCA=1__cb=5eea52966a__oadest=http%3A%2F%2Fwww.zoho.com%2Fprojects%2Flp%2Fproject-management-and-collaboration.html'" style="border: none;"><img src="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ai.php?filename=project-mgt(200x125)_15.jpg&contenttype=jpeg" alt="Online Project Management" title="Online Project Management" border="0"></a><br><a href="http://www.zoho.com/projects/lp/project-management-and-collaboration.html" target="_blank" onmousedown="this.href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=4538__zoneid=24__OXLCA=1__cb=5eea52966a__oadest=http%3A%2F%2Fwww.zoho.com%2Fprojects%2Flp%2Fproject-management-and-collaboration.html'">Online Project Management</a><div id="beacon_5eea52966a" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="http://auslieferung.commindo-media-ressourcen.de/www/delivery/lg.php?bannerid=4538&campaignid=1587&zoneid=24&loc=http%3A%2F%2Fcoding.smashingmagazine.com%2F2009%2F08%2F04%2Fdesigning-a-html-5-layout-from-scratch%2F&referer=http%3A%2F%2Fwww.google.com%2Furl%3Fsa%3Dt%26rct%3Dj%26q%3D%26esrc%3Ds%26source%3Dweb%26cd%3D2%26ved%3D0CEgQFjAB%26url%3Dhttp%253A%252F%252Fcoding.smashingmagazine.com%252F2009%252F08%252F04%252Fdesigning-a-html-5-layout-from-scratch%252F%26ei%3DYCHGUPmrEYTW8gTo8oHgDg%26usg%3DAFQjCNGCyRSBMgWxVSPJMXDGB963__sJAQ%26sig2%3D_NIsGS76idz0hb3_wyYNvA&cb=5eea52966a" alt="" style="width: 0px; height: 0px;"></div>
</li><li><a href="http://www.jotform.com/?utm_source=smashing&utm_medium=banner&utm_content=logo&utm_campaign=smashing" target="_blank" onmousedown="this.href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=4850__zoneid=24__OXLCA=1__cb=05c61856fc__oadest=http%3A%2F%2Fwww.jotform.com%2F%3Futm_source%3Dsmashing%26utm_medium%3Dbanner%26utm_content%3Dlogo%26utm_campaign%3Dsmashing'" style="border: none;"><img src="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ai.php?filename=smashingnoupebanner6a_4.png&contenttype=png" alt="Online Form Builder" title="Online Form Builder" border="0"></a><br><a href="http://www.jotform.com/?utm_source=smashing&utm_medium=banner&utm_content=logo&utm_campaign=smashing" target="_blank" onmousedown="this.href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=4850__zoneid=24__OXLCA=1__cb=05c61856fc__oadest=http%3A%2F%2Fwww.jotform.com%2F%3Futm_source%3Dsmashing%26utm_medium%3Dbanner%26utm_content%3Dlogo%26utm_campaign%3Dsmashing'">Online Form Builder</a><div id="beacon_05c61856fc" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="http://auslieferung.commindo-media-ressourcen.de/www/delivery/lg.php?bannerid=4850&campaignid=1729&zoneid=24&loc=http%3A%2F%2Fcoding.smashingmagazine.com%2F2009%2F08%2F04%2Fdesigning-a-html-5-layout-from-scratch%2F&referer=http%3A%2F%2Fwww.google.com%2Furl%3Fsa%3Dt%26rct%3Dj%26q%3D%26esrc%3Ds%26source%3Dweb%26cd%3D2%26ved%3D0CEgQFjAB%26url%3Dhttp%253A%252F%252Fcoding.smashingmagazine.com%252F2009%252F08%252F04%252Fdesigning-a-html-5-layout-from-scratch%252F%26ei%3DYCHGUPmrEYTW8gTo8oHgDg%26usg%3DAFQjCNGCyRSBMgWxVSPJMXDGB963__sJAQ%26sig2%3D_NIsGS76idz0hb3_wyYNvA&cb=05c61856fc" alt="" style="width: 0px; height: 0px;"></div>
</li><li><a href="http://www.corbisimages.com/rf?cid=ba_1012_amr_1_Corb_smas" target="_blank" onmousedown="this.href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=4871__zoneid=24__OXLCA=1__cb=10aff708ec__oadest=http%3A%2F%2Fwww.corbisimages.com%2Frf%3Fcid%3Dba_1012_amr_1_Corb_smas'" style="border: none;"><img src="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ai.php?filename=corbis_rf_200x125_img1_5.jpg&contenttype=jpeg" alt="Royality-Free Images" title="Royality-Free Images" border="0"></a><br><a href="http://www.corbisimages.com/rf?cid=ba_1012_amr_1_Corb_smas" target="_blank" onmousedown="this.href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=4871__zoneid=24__OXLCA=1__cb=10aff708ec__oadest=http%3A%2F%2Fwww.corbisimages.com%2Frf%3Fcid%3Dba_1012_amr_1_Corb_smas'">Royality-Free Images</a><div id="beacon_10aff708ec" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="http://auslieferung.commindo-media-ressourcen.de/www/delivery/lg.php?bannerid=4871&campaignid=1662&zoneid=24&loc=http%3A%2F%2Fcoding.smashingmagazine.com%2F2009%2F08%2F04%2Fdesigning-a-html-5-layout-from-scratch%2F&referer=http%3A%2F%2Fwww.google.com%2Furl%3Fsa%3Dt%26rct%3Dj%26q%3D%26esrc%3Ds%26source%3Dweb%26cd%3D2%26ved%3D0CEgQFjAB%26url%3Dhttp%253A%252F%252Fcoding.smashingmagazine.com%252F2009%252F08%252F04%252Fdesigning-a-html-5-layout-from-scratch%252F%26ei%3DYCHGUPmrEYTW8gTo8oHgDg%26usg%3DAFQjCNGCyRSBMgWxVSPJMXDGB963__sJAQ%26sig2%3D_NIsGS76idz0hb3_wyYNvA&cb=10aff708ec" alt="" style="width: 0px; height: 0px;"></div>
</li><li><a href="http://teamtreehouse.com/join/free-month?utm_source=smashing-magazine&utm_medium=banner&utm_campaign=smashing-magazine&utm_content=200x125-black&cid=1043" target="_blank" onmousedown="this.href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5001__zoneid=24__OXLCA=1__cb=bf19bd918a__oadest=http%3A%2F%2Fteamtreehouse.com%2Fjoin%2Ffree-month%3Futm_source%3Dsmashing-magazine%26utm_medium%3Dbanner%26utm_campaign%3Dsmashing-magazine%26utm_content%3D200x125-black%26cid%3D1043'" style="border: none;"><img src="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ai.php?filename=200x125_learn_dev_design-new_5.gif&contenttype=gif" alt="Learn HTML5, CSS3, UX and more" title="Learn HTML5, CSS3, UX and more" border="0"></a><br><a href="http://teamtreehouse.com/join/free-month?utm_source=smashing-magazine&utm_medium=banner&utm_campaign=smashing-magazine&utm_content=200x125-black&cid=1043" target="_blank" onmousedown="this.href='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5001__zoneid=24__OXLCA=1__cb=bf19bd918a__oadest=http%3A%2F%2Fteamtreehouse.com%2Fjoin%2Ffree-month%3Futm_source%3Dsmashing-magazine%26utm_medium%3Dbanner%26utm_campaign%3Dsmashing-magazine%26utm_content%3D200x125-black%26cid%3D1043'">Learn HTML5, CSS3, UX and more</a><div id="beacon_bf19bd918a" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="http://auslieferung.commindo-media-ressourcen.de/www/delivery/lg.php?bannerid=5001&campaignid=1779&zoneid=24&loc=http%3A%2F%2Fcoding.smashingmagazine.com%2F2009%2F08%2F04%2Fdesigning-a-html-5-layout-from-scratch%2F&referer=http%3A%2F%2Fwww.google.com%2Furl%3Fsa%3Dt%26rct%3Dj%26q%3D%26esrc%3Ds%26source%3Dweb%26cd%3D2%26ved%3D0CEgQFjAB%26url%3Dhttp%253A%252F%252Fcoding.smashingmagazine.com%252F2009%252F08%252F04%252Fdesigning-a-html-5-layout-from-scratch%252F%26ei%3DYCHGUPmrEYTW8gTo8oHgDg%26usg%3DAFQjCNGCyRSBMgWxVSPJMXDGB963__sJAQ%26sig2%3D_NIsGS76idz0hb3_wyYNvA&cb=bf19bd918a" alt="" style="width: 0px; height: 0px;"></div><div style="display:none">
<!-- Google Code for Smashing Magazine Users -->
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 1017883234;
var google_conversion_label = "neTrCM6DyAMQ4tSu5QM";
var google_custom_params = window.google_tag_params;
var google_remarketing_only = true;
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script><iframe name="google_conversion_frame" width="300" height="13" src="http://googleads.g.doubleclick.net/pagead/viewthroughconversion/1017883234/?random=1355161956395&cv=7&fst=1355161956395&num=1&fmt=1&label=neTrCM6DyAMQ4tSu5QM&guid=ON&u_h=1440&u_w=2560&u_ah=1414&u_aw=2560&u_cd=24&u_his=3&u_tz=-300&u_java=true&u_nplug=12&u_nmime=79&ref=http%3A//www.google.com/url%3Fsa%3Dt%26rct%3Dj%26q%3D%26esrc%3Ds%26source%3Dweb%26cd%3D2%26ved%3D0CEgQFjAB%26url%3Dhttp%253A%252F%252Fcoding.smashingmagazine.com%252F2009%252F08%252F04%252Fdesigning-a-html-5-layout-from-scratch%252F%26ei%3DYCHGUPmrEYTW8gTo8oHgDg%26usg%3DAFQjCNGCyRSBMgWxVSPJMXDGB963__sJAQ%26sig2%3D_NI&url=http%3A//coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/&frm=0" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no"><img height="1" width="1" border="0" src="http://googleads.g.doubleclick.net/pagead/viewthroughconversion/1017883234/?frame=0&random=1355161956395&cv=7&fst=1355161956395&num=1&fmt=1&label=neTrCM6DyAMQ4tSu5QM&guid=ON&u_h=1440&u_w=2560&u_ah=1414&u_aw=2560&u_cd=24&u_his=3&u_tz=-300&u_java=true&u_nplug=12&u_nmime=79&ref=http%3A//www.google.com/url%3Fsa%3Dt%26rct%3Dj%26q%3D%26esrc%3Ds%26source%3Dweb%26cd%3D2%26ved%3D0CEgQFjAB%26url%3Dhttp%253A%252F%252Fcoding.smashingmagazine.com%252F2009%252F08%252F04%252Fdesigning-a-html-5-layout-from-scratch%252F%26ei%3DYCHGUPmrEYTW8gTo8oHgDg%26usg%3DAFQjCNGCyRSBMgWxVSPJMXDGB963__sJAQ%26sig2%3D_NI&url=http%3A//coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/&frm=0" /></iframe>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/1017883234/?value=0&amp;label=neTrCM6DyAMQ4tSu5QM&amp;guid=ON&amp;script=0"/>
</div>
</noscript>
</div>
</li><li><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=4878__zoneid=24__OXLCA=1__cb=3ed1c7d53d__oadest=http%3A%2F%2Fwww.zoho.com%2Fsites%2Ffree-website-builder.html%3Futm_source%3Dsmashing-magazine%26utm_medium%3Dbanner%26utm_content%3Dfree-website%26utm_campaign%3Dsmashing-magazine" target="_blank" style="border: none;"><img src="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ai.php?filename=fw200x125.png&contenttype=png" alt="Free Websites" title="Free Websites" border="0"></a><br><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=4878__zoneid=24__OXLCA=1__cb=3ed1c7d53d__oadest=http%3A%2F%2Fwww.zoho.com%2Fsites%2Ffree-website-builder.html%3Futm_source%3Dsmashing-magazine%26utm_medium%3Dbanner%26utm_content%3Dfree-website%26utm_campaign%3Dsmashing-magazine" target="_blank">Free Websites</a><div id="beacon_3ed1c7d53d" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="http://auslieferung.commindo-media-ressourcen.de/www/delivery/lg.php?bannerid=4878&campaignid=1735&zoneid=24&loc=http%3A%2F%2Fcoding.smashingmagazine.com%2F2009%2F08%2F04%2Fdesigning-a-html-5-layout-from-scratch%2F&referer=http%3A%2F%2Fwww.google.com%2Furl%3Fsa%3Dt%26rct%3Dj%26q%3D%26esrc%3Ds%26source%3Dweb%26cd%3D2%26ved%3D0CEgQFjAB%26url%3Dhttp%253A%252F%252Fcoding.smashingmagazine.com%252F2009%252F08%252F04%252Fdesigning-a-html-5-layout-from-scratch%252F%26ei%3DYCHGUPmrEYTW8gTo8oHgDg%26usg%3DAFQjCNGCyRSBMgWxVSPJMXDGB963__sJAQ%26sig2%3D_NIsGS76idz0hb3_wyYNvA&cb=3ed1c7d53d" alt="" style="width: 0px; height: 0px;"></div>
</li><li><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=3738__zoneid=24__OXLCA=1__cb=daf12457e7__oadest=http%3A%2F%2Fwww.wix.com%2Fhtml5%2Fwebsites_400%3Futm_campaign%3Dma_smashingmagazine.com%26experiment_id%3Dma_smashingmagazine.com200roshlp" target="_blank" style="border: none;"><img src="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ai.php?filename=200x125_cirlcles_new.png&contenttype=png" alt="Create free stunning websites!" title="Create free stunning websites!" border="0"></a><br><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=3738__zoneid=24__OXLCA=1__cb=daf12457e7__oadest=http%3A%2F%2Fwww.wix.com%2Fhtml5%2Fwebsites_400%3Futm_campaign%3Dma_smashingmagazine.com%26experiment_id%3Dma_smashingmagazine.com200roshlp" target="_blank">Create free stunning sites!</a><div id="beacon_daf12457e7" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="http://auslieferung.commindo-media-ressourcen.de/www/delivery/lg.php?bannerid=3738&campaignid=130&zoneid=24&loc=http%3A%2F%2Fcoding.smashingmagazine.com%2F2009%2F08%2F04%2Fdesigning-a-html-5-layout-from-scratch%2F&referer=http%3A%2F%2Fwww.google.com%2Furl%3Fsa%3Dt%26rct%3Dj%26q%3D%26esrc%3Ds%26source%3Dweb%26cd%3D2%26ved%3D0CEgQFjAB%26url%3Dhttp%253A%252F%252Fcoding.smashingmagazine.com%252F2009%252F08%252F04%252Fdesigning-a-html-5-layout-from-scratch%252F%26ei%3DYCHGUPmrEYTW8gTo8oHgDg%26usg%3DAFQjCNGCyRSBMgWxVSPJMXDGB963__sJAQ%26sig2%3D_NIsGS76idz0hb3_wyYNvA&cb=daf12457e7" alt="" style="width: 0px; height: 0px;"></div>
</li><li><script language="JavaScript" type="text/javascript" src="http://view.atdmt.com/SHS/jview/348574350/direct/01?click=http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5000__zoneid=24__OXLCA=1__cb=3d06391080__oadest=">
</script><a target="_blank" href="http://clk.atdmt.com/goiframe/274214771/348574350/direct/01" onclick="(new Image).src='http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5000__zoneid=24__OXLCA=1__cb=3d06391080__oadest=http://t.atdmt.com'" style="border: none;"><img src="http://spe.atdmt.com/b/SHSSHSSHSTSST/200x125_zeus_bird_subscription_nl.jpg" border="0"></a><noscript><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5000__zoneid=24__OXLCA=1__cb=3d06391080__oadest=http%3A%2F%2Fclk.atdmt.com%2FSHS%2Fgo%2F348574350%2Fdirect%2F01%2F" target="_blank"><img border="0" src="http://view.atdmt.com/SHS/view/348574350/direct/01/" /></a></noscript>
<br>
<a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5000__zoneid=24__OXLCA=1__cb=3d06391080__oadest=http%3A%2F%2Fwww.shutterstock.com%2F%3Fsid%3DSMSHM1004%26pl%3Dsmashingmagazine-200x125%26utm_medium%3Dtext_link" target="_blank">Royalty-Free Stock Images</a><div id="beacon_3d06391080" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="http://auslieferung.commindo-media-ressourcen.de/www/delivery/lg.php?bannerid=5000&campaignid=1778&zoneid=24&loc=1&referer=http%3A%2F%2Fcoding.smashingmagazine.com%2F2009%2F08%2F04%2Fdesigning-a-html-5-layout-from-scratch%2F&cb=3d06391080" alt="" style="width: 0px; height: 0px;"></div>
</li><li class="double"><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=4726__zoneid=77__OXLCA=1__cb=07de0052ef__oadest=http%3A%2F%2Fad.au.doubleclick.net%2Fclk%3B264175606%3B89718897%3Bh%3Fhttp%3A%2F%2Fwww.squarespace.com%2Fapi%2Ftrack%2FRedirect%3Furl%3D%2F%26channel%3Ddisplay%26subchannel%3Dsmashing%26source%3Dros%26campaign%3D410x125" target="_blank" style="border: none;"><img src="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ai.php?filename=410x125-4.jpg&contenttype=jpeg" alt="" title="" border="0"></a><div id="beacon_07de0052ef" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="http://auslieferung.commindo-media-ressourcen.de/www/delivery/lg.php?bannerid=4726&campaignid=1676&zoneid=77&loc=http%3A%2F%2Fcoding.smashingmagazine.com%2F2009%2F08%2F04%2Fdesigning-a-html-5-layout-from-scratch%2F&referer=http%3A%2F%2Fwww.google.com%2Furl%3Fsa%3Dt%26rct%3Dj%26q%3D%26esrc%3Ds%26source%3Dweb%26cd%3D2%26ved%3D0CEgQFjAB%26url%3Dhttp%253A%252F%252Fcoding.smashingmagazine.com%252F2009%252F08%252F04%252Fdesigning-a-html-5-layout-from-scratch%252F%26ei%3DYCHGUPmrEYTW8gTo8oHgDg%26usg%3DAFQjCNGCyRSBMgWxVSPJMXDGB963__sJAQ%26sig2%3D_NIsGS76idz0hb3_wyYNvA&cb=07de0052ef" alt="" style="width: 0px; height: 0px;"></div>
</li><li><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=4907__zoneid=24__OXLCA=1__cb=d6d3be4fd1__oadest=http%3A%2F%2Fwww.freshbooks.com%2Fpainless-billing%2F%3Fref%3D8441" target="_blank" style="border: none;"><img src="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ai.php?filename=200x125-quote.png&contenttype=png" alt="Make Billing Painless With Freshbooks" title="Make Billing Painless With Freshbooks" border="0"></a><br><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=4907__zoneid=24__OXLCA=1__cb=d6d3be4fd1__oadest=http%3A%2F%2Fwww.freshbooks.com%2Fpainless-billing%2F%3Fref%3D8441" target="_blank">FreshBooks</a><div id="beacon_d6d3be4fd1" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="http://auslieferung.commindo-media-ressourcen.de/www/delivery/lg.php?bannerid=4907&campaignid=1746&zoneid=24&loc=http%3A%2F%2Fcoding.smashingmagazine.com%2F2009%2F08%2F04%2Fdesigning-a-html-5-layout-from-scratch%2F&referer=http%3A%2F%2Fwww.google.com%2Furl%3Fsa%3Dt%26rct%3Dj%26q%3D%26esrc%3Ds%26source%3Dweb%26cd%3D2%26ved%3D0CEgQFjAB%26url%3Dhttp%253A%252F%252Fcoding.smashingmagazine.com%252F2009%252F08%252F04%252Fdesigning-a-html-5-layout-from-scratch%252F%26ei%3DYCHGUPmrEYTW8gTo8oHgDg%26usg%3DAFQjCNGCyRSBMgWxVSPJMXDGB963__sJAQ%26sig2%3D_NIsGS76idz0hb3_wyYNvA&cb=d6d3be4fd1" alt="" style="width: 0px; height: 0px;"></div>
</li><li><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5003__zoneid=24__OXLCA=1__cb=dfc2fcebba__oadest=http%3A%2F%2Fwww.fonthaus.com%2F" target="_blank" style="border: none;"><img src="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ai.php?filename=fonthaus.png&contenttype=png" alt="FontHaus. Since 1990" title="FontHaus. Since 1990" border="0"></a><br><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=5003__zoneid=24__OXLCA=1__cb=dfc2fcebba__oadest=http%3A%2F%2Fwww.fonthaus.com%2F" target="_blank">FontHaus. Since 1990</a><div id="beacon_dfc2fcebba" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="http://auslieferung.commindo-media-ressourcen.de/www/delivery/lg.php?bannerid=5003&campaignid=1780&zoneid=24&loc=http%3A%2F%2Fcoding.smashingmagazine.com%2F2009%2F08%2F04%2Fdesigning-a-html-5-layout-from-scratch%2F&referer=http%3A%2F%2Fwww.google.com%2Furl%3Fsa%3Dt%26rct%3Dj%26q%3D%26esrc%3Ds%26source%3Dweb%26cd%3D2%26ved%3D0CEgQFjAB%26url%3Dhttp%253A%252F%252Fcoding.smashingmagazine.com%252F2009%252F08%252F04%252Fdesigning-a-html-5-layout-from-scratch%252F%26ei%3DYCHGUPmrEYTW8gTo8oHgDg%26usg%3DAFQjCNGCyRSBMgWxVSPJMXDGB963__sJAQ%26sig2%3D_NIsGS76idz0hb3_wyYNvA&cb=dfc2fcebba" alt="" style="width: 0px; height: 0px;"></div>
</li><li><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=4896__zoneid=24__OXLCA=1__cb=19dbf89287__oadest=https%3A%2F%2Fwww.zoho.com%2Finvoice%3Futm_source%3Dsmashing-magazine%26utm_medium%3Dbanner%26utm_content%3Dbird%26utm_campaign%3Donline-advertising" target="_blank" style="border: none;"><img src="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ai.php?filename=200x125-invoice-bird.jpg&contenttype=jpeg" alt="Hassle free invoicing" title="Hassle free invoicing" border="0"></a><br><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=4896__zoneid=24__OXLCA=1__cb=19dbf89287__oadest=https%3A%2F%2Fwww.zoho.com%2Finvoice%3Futm_source%3Dsmashing-magazine%26utm_medium%3Dbanner%26utm_content%3Dbird%26utm_campaign%3Donline-advertising" target="_blank">Hassle free invoicing</a><div id="beacon_19dbf89287" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="http://auslieferung.commindo-media-ressourcen.de/www/delivery/lg.php?bannerid=4896&campaignid=1739&zoneid=24&loc=http%3A%2F%2Fcoding.smashingmagazine.com%2F2009%2F08%2F04%2Fdesigning-a-html-5-layout-from-scratch%2F&referer=http%3A%2F%2Fwww.google.com%2Furl%3Fsa%3Dt%26rct%3Dj%26q%3D%26esrc%3Ds%26source%3Dweb%26cd%3D2%26ved%3D0CEgQFjAB%26url%3Dhttp%253A%252F%252Fcoding.smashingmagazine.com%252F2009%252F08%252F04%252Fdesigning-a-html-5-layout-from-scratch%252F%26ei%3DYCHGUPmrEYTW8gTo8oHgDg%26usg%3DAFQjCNGCyRSBMgWxVSPJMXDGB963__sJAQ%26sig2%3D_NIsGS76idz0hb3_wyYNvA&cb=19dbf89287" alt="" style="width: 0px; height: 0px;"></div>
</li><li><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=4588__zoneid=24__OXLCA=1__cb=d5a90dddf1__oadest=http%3A%2F%2Fmarkup-service.com%2F" target="_blank" style="border: none;"><img src="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ai.php?filename=banner_ms_smashing.png&contenttype=png" alt="" title="" border="0"></a><br><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=4588__zoneid=24__OXLCA=1__cb=d5a90dddf1__oadest=http%3A%2F%2Fmarkup-service.com%2F" target="_blank">PSD to HTML5/CSS3</a><div id="beacon_d5a90dddf1" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="http://auslieferung.commindo-media-ressourcen.de/www/delivery/lg.php?bannerid=4588&campaignid=1625&zoneid=24&loc=http%3A%2F%2Fcoding.smashingmagazine.com%2F2009%2F08%2F04%2Fdesigning-a-html-5-layout-from-scratch%2F&referer=http%3A%2F%2Fwww.google.com%2Furl%3Fsa%3Dt%26rct%3Dj%26q%3D%26esrc%3Ds%26source%3Dweb%26cd%3D2%26ved%3D0CEgQFjAB%26url%3Dhttp%253A%252F%252Fcoding.smashingmagazine.com%252F2009%252F08%252F04%252Fdesigning-a-html-5-layout-from-scratch%252F%26ei%3DYCHGUPmrEYTW8gTo8oHgDg%26usg%3DAFQjCNGCyRSBMgWxVSPJMXDGB963__sJAQ%26sig2%3D_NIsGS76idz0hb3_wyYNvA&cb=d5a90dddf1" alt="" style="width: 0px; height: 0px;"></div>
</li></ul></div><!-- /#spnsrlisttarget -->
</div><!-- /.ed.spnsrlistwrapper -->
<div class="inner">
<div class="textwidget"><div class="sidebartabs"><div id="smashing-highlights" class="smashingwidget"><h3><a href="http://www.smashingmagazine.com/smashing-highlights/" style="border: none;"><span>Smashing Highlights</span><img src="http://www.smashingmagazine.com/files/smashing-widget/v006/img/sm-highlights.png" alt="Smashing Highlights"></a></h3>
<p>In this section, we present to you the most valued and appreciated articles from the last few years on Smashing Magazine.</p>
<ul class="topiclist">
<li><a href="http://www.smashingmagazine.com/2009/12/08/free-smashing-christmas-icon-set/">Free Smashing Christmas Icon Set (39 Icons)</a><p>All icons are designed in 3 different style: realistic 3D style, simple shape style and button style – hence the icons are extremely versatile. This set is available in both vector and pixel format and available for free download and use.</p></li>
<li><a href="http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/">A Closer Look At Font Rendering</a><p>This article presents the mechanisms of type rendering, how they were developed, and how and why they are applied by the various operating systems and browsers—so that when it comes time to choose a font for your next project, you know what to look out for to ensure the quality of the typography is consistently high.</p></li>
<li><a href="http://www.smashingmagazine.com/2011/08/29/the-lost-art-of-design-etiquette/">The Lost Art Of Design Etiquette</a><p>We work with a ridiculously large number of things, and how we organize them (or choose not to) is often left to personal preference. But our messy habits result in confusion for the designer or developer who inherits your work. Does it really need to be this way?</p></li>
</ul></div><!-- /#highlights --></div></div>
<div id="sidebarspecialtarget"><div id="sidebarspecial"><a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=4866__zoneid=72__OXLCA=1__cb=f99bbd7019__oadest=http%3A%2F%2Fwww.corbisimages.com%2Frf%3Fcid%3Dba_1012_amr_1_Corb_smas" target="_blank" style="border: none;"><img src="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ai.php?filename=corbis_rf_420x200_img1_5.jpg&contenttype=jpeg" alt="" title="" border="0"></a><div id="beacon_f99bbd7019" style="position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="http://auslieferung.commindo-media-ressourcen.de/www/delivery/lg.php?bannerid=4866&campaignid=1732&zoneid=72&loc=http%3A%2F%2Fcoding.smashingmagazine.com%2F2009%2F08%2F04%2Fdesigning-a-html-5-layout-from-scratch%2F&referer=http%3A%2F%2Fwww.google.com%2Furl%3Fsa%3Dt%26rct%3Dj%26q%3D%26esrc%3Ds%26source%3Dweb%26cd%3D2%26ved%3D0CEgQFjAB%26url%3Dhttp%253A%252F%252Fcoding.smashingmagazine.com%252F2009%252F08%252F04%252Fdesigning-a-html-5-layout-from-scratch%252F%26ei%3DYCHGUPmrEYTW8gTo8oHgDg%26usg%3DAFQjCNGCyRSBMgWxVSPJMXDGB963__sJAQ%26sig2%3D_NIsGS76idz0hb3_wyYNvA&cb=f99bbd7019" alt="" style="width: 0px; height: 0px;"></div>
</div></div><!-- /#sidebarspecialtarget -->
<div class="sidebar-smash-box smashingbook-printed"> <div class="textwidget"><a href="http://www.the-mobile-book.com" "="" style="border: none;"><img alt="Smashing Mobile Book" src="http://media.smashingmagazine.com/wp-content/uploads/2012/11/the-mobile-book-111px-optimized.png"></a>
<p><strong>Brand New Printed <a href="http://www.smashingmagazine.com/2012/10/16/the-mobile-book-preorder/">Mobile Book</a></strong><br>If you're looking for a good book on Mobile, this is the one. Our new book about the best mobile practices, techniques and design patterns.<br><strong><a href="http://www.the-mobile-book.com">Pre-order now and save 20% off!</a></strong></p>
<a href="http://www.smashingbook.com" style="border: none;"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/11/smashing-books-31-optimized.png" alt="Smashing Printed Books"></a>
<p><strong>Get Your Smashing Books!</strong><br>The Smashing books are the best printed books we've produced so far: valuable, cutting-edge, high-quality books that every designer should have on their bookshelf. <strong><a href="http://www.smashingbook.com"> Get your books now: printed or eBooks!</a></strong></p></div>
</div><!-- /.smashingbook-printed --> <div class="sidebartabs">
<div id="newsletter_widget" class="smashingwidget">
<h3><a href="http://www.smashingmagazine.com/the-smashing-newsletter/" style="border: none;"><span>The Smashing Newsletter</span><img src="http://media.smashingmagazine.com/wp-content/uploads/files/smashing-widget/v006/img/smnl.png" alt="Smashing Newsletter"></a></h3>
<div id="mc_embed_signup" class="sm-search">
<p>Subscribe to our email newsletter for useful tips and valuable resources, sent out every second Tuesday.</p>
<form action="http://smashingmagazine.us1.list-manage1.com/subscribe/post?u=16b832d9ad4b28edf261f34df&id=a1666656e0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate">
<input name="EMAIL" type="text" placeholder="email address">
<button class="search_submit" type="submit"><span class="first-type">Subscribe</span></button>
<div class="clearfix">
<div class="num-subscribers"><script type="text/javascript" src="http://smashingmagazine.us1.list-manage1.com/subscriber-count?b=34&u=e768e688-36c3-4c2d-88fa-982d9d3f254b&id=a1666656e0"></script><div class="mc-badge mc-badge05 mc-badge05-sub04" style="color: #51514a;font-family: sans-serif;font-size: 11px;font-weight: bold;margin: 0;padding: 0;width: auto;display: inline-block;"> <p style="color: #e95c41;font-family: sans-serif;font-size: 11px;font-weight: bold;margin: 0;padding: 0;line-height: 1em;width: auto;max-width: 195px;"><span class="subscriber-count" style="display: block;float: left;padding-top: 0px;background-color: #e95c41;color: #fff;padding: 4px 6px;line-height: 1em;-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;font-size: 14px;margin-right: 5px;border-top: 1px solid #983c2a;">124,938</span> <span style="display: block;float: left;padding-top: 0px;">Subscribers</span> <a href="http://www.mailchimp.com/monkey-rewards/?utm_source=freemium_newsletter&utm_medium=email&utm_campaign=monkey_rewards&aid=16b832d9ad4b28edf261f34df&afl=1" target="_blank" class="powered-by" style="color: #51514a;font-family: sans-serif;font-size: 11px;font-weight: bold;margin: 0;padding: 0;background: transparent url(http://gallery.mailchimp.com/089443193dd93823f3fed78b4/images/powered_by_mailchimp01.png) 50% bottom no-repeat;display: block;height: 15px;width: 113px;text-indent: -9999px;float: left;padding-top: 0px;">Email marketing powered by MailChimp</a></p></div></div>
</div>
</form>
</div>
</div><!-- /#network_widget -->
</div><!-- /.sidebartabs -->
<div class="sidebar-smash-box smashingmag-conference"> <div class="textwidget"><a href="http://lanyrd.com/profile/smashingmag/" style="border: none;"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/12/craft-conference.png" alt="Conference" title="Conference"></a>
<p><strong>Let's meet!</strong><br>Vitaly Friedman, the editor-in-chief of Smashing Magazine, will be attending the <strong>InspireConf</strong> conference in Leiden, Holland, on 9th–12th of December. <strong><a href="http://www.twitter.com/smashingmag">Let's meet!</a></strong></p></div>
</div><!-- /.smashingmag-conference --> <div class="sidebartabs">
<div id="jobs" class="smashingwidget">
<h3><a href="http://jobs.smashingmagazine.com/?pk_campaign=sm&piwik_kwd=widget" style="border: none;"><span>Smashing Job Board</span><img src="http://www.smashingmagazine.com/files/smashing-widget/v006/img/sm-jobs.png" alt="Smashing Jobs"></a></h3>
<ul class="topiclist">
<li style="display:none;"></li>
<li class="clearfix"><a href="http://feedproxy.google.com/~r/smjobs/~3/G_1-B0RDwwI/2225558">Web Designer - Viator - (San Francisco, CA) - FullTime</a><p>Web Designer Viator, Inc. Location: San Francisco, CA Responsible to:UX/UI Manager Communicates & Cooperates with:Marketing Team, Product…</p></li><li class="clearfix"><a href="http://feedproxy.google.com/~r/smjobs/~3/_0IwuHEPQJ4/2225444">Digital Interface Developer/Designer - Shine United, LLC - (Madison, WI) - FullTime</a><p>Job Qualifications: You are a user-experience and development wizard. And no, that doesn’t mean you should show up to work wearing your wizard hat. You have…</p></li> </ul>
<p class="view-more"><a href="http://jobs.smashingmagazine.com?pk_campaign=sm&piwik_kwd=widget">View more job openings…</a></p>
</div><!-- /#jobs -->
</div><!-- /.sidebartabs -->
<div class="sidebar-smash-box smashingmag-meetup"> <div class="textwidget"></div>
</div><!-- /.smashingmag-meetup --> </div><!-- /.inner -->
<div class="sidebar-smash-box smashingmag-promo-field"> <div class="textwidget"><a href="http://www.smashingmagazine.com/ebooks/" style="border: none;"><img src="http://media.smashingmagazine.com/wp-content/uploads/2012/11/best-of-no-150px-optimized.png" alt="Smashing Anniversary eBook"></a>
<p><strong>Free eBook: "Best of Smashing Magazine"</strong><br>We've got a gift for you! To celebrate our birthday, we've released a free eBook with best articles published here on Smashing Magazine over all these years. In PDF, ePUB and Mobi. <strong><a href="http://www.smashingmagazine.com/ebooks/">Get it now for free!</a></strong></p></div>
</div><!-- /.smashingmag-promo-field --> <div class="two clearfix">
<div class="left">
<div class="textwidget"><div class="inner popular-posts-area">
<h2 class="popular">Tags</h2>
<ul class="popular-list sidelist">
<li><a href="http://mobile.smashingmagazine.com/tag/android/">Android</a></li>
<li><a href="http://www.smashingmagazine.com/tag/branding/">Branding</a></li>
<li><a href="http://www.smashingmagazine.com/tag/business/">Business</a></li>
<li><a href="http://www.smashingmagazine.com/tag/business-cards/">Business Cards</a></li>
<li><a href="http://coding.smashingmagazine.com/tag/captcha/">Captcha</a></li>
<li><a href="http://www.smashingmagazine.com/tag/cheat-sheets/">Cheat Sheets</a></li>
<li><a href="http://coding.smashingmagazine.com/tag/Essentials/">Coding Essentials</a></li>
<li><a href="http://www.smashingmagazine.com/content-strategy-storytelling/">Content Strategy</a></li>
<li><a href="http://www.smashingmagazine.com/tag/conferences/">Conferences</a></li>
<li><a href="http://www.smashingmagazine.com/tag/copyright/">Copyright</a></li>
<li><a href="http://coding.smashingmagazine.com/tag/css/">CSS</a> & <a href="http://coding.smashingmagazine.com/tag/css3/">CSS3</a></li>
<li><a href="http://www.smashingmagazine.com/web-design-essentials-examples-and-best-practices/">Design Best Practices</a></li>
<li><a href="http://www.smashingmagazine.com/tag/legacy/">Design Legacy</a></li>
<li><a href="http://www.smashingmagazine.com/tag/downloads/">Downloads</a></li>
<li><a href="http://uxdesign.smashingmagazine.com/tag/e-commerce/">E-Commerce</a></li>
<li><a href="http://www.smashingmagazine.com/tag/email/">Email</a></li>
<li><a href="http://www.smashingmagazine.com/tag/errors/">Errors</a></li>
<li><a href="http://www.smashingmagazine.com/tag/Facebook/">Facebook</a></li>
<li><a href="http://www.smashingmagazine.com/tag/Fireworks/">Fireworks</a></li>
<li><a href="http://uxdesign.smashingmagazine.com/tag/forms/">Forms</a></li>
<li><a href="http://coding.smashingmagazine.com/tag/frameworks/">Frameworks</a></li>
<li><a href="http://www.smashingmagazine.com/tag/freebies/">Freebies</a></li>
<li><a href="http://www.smashingmagazine.com/tag/free-fonts/">Free Fonts</a></li>
<li><a href="http://coding.smashingmagazine.com/tag/HTML/">HTML</a> & <a href="http://coding.smashingmagazine.com/tag/HTML5/">HTML5</a></li>
<li><a href="http://www.smashingmagazine.com/tag/icons/">Icons</a></li>
<li><a href="http://www.smashingmagazine.com/tag/innovation/">Innovation</a></li>
<li><a href="http://www.smashingmagazine.com/tag/illustrator/">Illustrator</a></li>
<li><a href="http://www.smashingmagazine.com/tag/indesign/">InDesign</a></li>
<li><a href="http://www.smashingmagazine.com/tag/inspiration/">Inspiration</a></li>
<li><a href="http://coding.smashingmagazine.com/tag/internet-explorer/">Internet Explorer</a></li>
<li><a href="http://mobile.smashingmagazine.com/tag/ipad/">iPad</a> & <a href="http://mobile.smashingmagazine.com/tag/iPhone/">iPhone</a></li>
<li><a href="http://coding.smashingmagazine.com/tag/javascript/">JavaScript</a></li>
<li><a href="http://coding.smashingmagazine.com/tag/jquery/">jQuery</a></li>
<li><a href="http://coding.smashingmagazine.com/tag/layouts/">Layouts</a></li>
<li><a href="http://coding.smashingmagazine.com/tag/linux/">Linux</a></li>
<li><a href="http://www.smashingmagazine.com/guidelines-for-mobile-web-development/">Mobile</a></li>
<li><a href="http://www.smashingmagazine.com/tag/navigation/">Navigation</a></li>
<li><a href="http://www.smashingmagazine.com/tag/pdf/">PDF</a></li>
<li><a href="http://coding.smashingmagazine.com/tag/performance/">Performance</a></li>
<li><a href="http://www.smashingmagazine.com/tag/photography/">Photography</a></li>
<li><a href="http://www.smashingmagazine.com/tag/photoshop/">Photoshop</a></li>
<li><a href="http://coding.smashingmagazine.com/tag/PHP/">PHP</a></li>
<li><a href="http://www.smashingmagazine.com/portfolio-web-design-showcases/">Portfolios</a></li>
<li><a href="http://coding.smashingmagazine.com/tag/plugins/">Plugins</a></li>
<li><a href="http://www.smashingmagazine.com/tag/print/">Print</a></li>
<li><a href="http://uxdesign.smashingmagazine.com/tag/prototyping/">Prototyping</a></li>
<li><a href="http://www.smashingmagazine.com/tag/psd/">PSD</a></li>
<li><a href="http://uxdesign.smashingmagazine.com/tag/psychology/">Psychology</a></li>
<li><a href="http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/">Responsive Design</a></li>
<li><a href="http://coding.smashingmagazine.com/tag/ruby-on-rails/">Ruby on Rails</a></li>
<li><a href="http://www.smashingmagazine.com/tag/search/">Search</a></li>
<li><a href="http://coding.smashingmagazine.com/tag/security/">Security</a></li>
<li><a href="http://www.smashingmagazine.com/tag/seo/">SEO</a></li>
<li><a href="http://www.smashingmagazine.com/back-end-server-administration-php-guidelines/">Servers</a></li>
<li><a href="http://www.smashingmagazine.com/tag/showcases/">Showcases</a></li>
<li><a href="http://www.smashingmagazine.com/tag/studies/">Studies</a></li>
<li><a href="http://www.smashingmagazine.com/tag/techniques/">Techniques</a></li>
<li><a href="http://www.smashingmagazine.com/tag/templates/">Templates</a></li>
<li><a href="http://www.smashingmagazine.com/tag/textures/">Textures</a></li>
<li><a href="http://www.smashingmagazine.com/tag/themes/">Themes</a></li>
<li><a href="http://www.smashingmagazine.com/tag/tools/">Tools</a></li>
<li><a href="http://www.smashingmagazine.com/tag/tutorials/">Tutorials</a></li>
<li><a href="http://www.smashingmagazine.com/tag/typography/">Typography</a></li>
<li><a href="http://www.smashingmagazine.com/tag/twitter/">Twitter</a></li>
<li><a href="http://uxdesign.smashingmagazine.com/tag/ui/">UI Design</a></li>
<li><a href="http://uxdesign.smashingmagazine.com/tag/usability/">Usability</a></li>
<li><a href="http://www.smashingmagazine.com/tag/useful/">Useful Resources</a></li>
<li><a href="http://uxdesign.smashingmagazine.com/tag/user-experience/">User Experience</a></li>
<li><a href="http://www.smashingmagazine.com/tag/vectors/">Vectors</a></li>
<li><a href="http://www.smashingmagazine.com/tag/vintage/">Vintage</a></li>
<li><a href="http://www.smashingmagazine.com/tag/wallpapers/">Wallpapers</a></li>
<li><a href="http://www.smashingmagazine.com/tag/web-design/">Web Design</a></li>
<li><a href="http://www.smashingmagazine.com/tag/wireframing/">Wireframing</a></li>
<li><a href="http://wp.smashingmagazine.com/tag/themes/">WordPress Themes</a></li>
<li><a href="http://wp.smashingmagazine.com/tag/plugins/">WordPress Plugins</a></li>
</ul>
</div></div>
</div><!-- /.left -->
<div class="right">
<div id="twitter">
<div class="inner">
<h2 class="icon twitter">Twitter</h2>
<a href="http://twitter.com/smashingmag" class="follow-us">Follow Us</a>
</div>
<ul id="tweetlist">
<li style="display:none;"></li>
<li class="twitter-item"> <a href="http://twitter.com/paul_irish" class="twitter-user">@paul_irish</a> It's so useful, an necessary for the community to grow! / Thanks, <a href="http://twitter.com/laurakalbag" class="twitter-user">@laurakalbag</a>! <a href="http://twitter.com/smashingmag/statuses/278042687888838656" class="tweet-status" title="2012-12-10T08:45:00+01:00">about 10 hours ago</a></li><li class="twitter-item"> <a href="http://twitter.com/paul_irish" class="twitter-user">@paul_irish</a> Stumbled upon @laurakalbag's article a week ago. It's wonderful that people like Laura keep writing about their findings. <a href="http://twitter.com/smashingmag/statuses/278042577306017792" class="tweet-status" title="2012-12-10T08:44:00+01:00">about 10 hours ago</a></li><li class="twitter-item"> "It’s good to share what we know. You needn’t be the first, you’ll just help if you’re the first that somebody finds." <a href="http://t.co/XMhbNqMf">http://t.co/XMhbNqMf</a> <a href="http://twitter.com/smashingmag/statuses/278041226622668800" class="tweet-status" title="2012-12-10T08:39:00+01:00">about 10 hours ago</a></li><li class="twitter-item"> From "The Importance of Sensibility in Designers and Developers": <a href="http://t.co/W4ghJ1nm">http://t.co/W4ghJ1nm</a> by <a href="http://twitter.com/miekd" class="twitter-user">@miekd</a> <a href="http://twitter.com/smashingmag/statuses/278035455822426112" class="tweet-status" title="2012-12-10T08:16:00+01:00">about 11 hours ago</a></li><li class="twitter-item"> "If you design an interactive product and can't prototype, there is inevitably going to be a ceiling of skill level that you will hit." <a href="http://twitter.com/smashingmag/statuses/278035330450481152" class="tweet-status" title="2012-12-10T08:16:00+01:00">about 11 hours ago</a></li><li class="twitter-item"> <a href="http://twitter.com/shanbrunson" class="twitter-user">@shanbrunson</a> Could you please be more specific? It works perfectly fine here. <a href="http://twitter.com/smashingmag/statuses/278032018250530816" class="tweet-status" title="2012-12-10T08:02:00+01:00">about 11 hours ago</a></li> </ul>
</div><!-- /#twitter -->
<div class="ed sidebared">
<div id="sidebaredtarget"><div id="sidebared"></div></div>
</div><!-- /.ed.sidebared -->
<div class="ed sidebared">
<div id="sidebaredthreetarget"><div id="sidebaredthree"></div></div>
</div>
<div class="inner interact-area">
<h2 class="icon interact">Connect</h2>
<ul class="interact-list sidelist">
<li><a href="http://www.smashingmagazine.com/about/">About us</a></li>
<li><a href="http://www.smashingmagazine.com/contact/">Contact us</a></li>
<li><a href="http://www.smashingmagazine.com/publishing-policy/">Publishing Policy</a></li>
<li><a href="http://www.smashingmagazine.com/the-smashing-newsletter/">Email Newsletter</a></li>
<li><a href="http://www.smashingmagazine.com/how-to-become-a-smashing-magazine-author/">Become an Author</a></li>
<li class="twitter"><a href="http://twitter.com/smashingmag">Follow us on Twitter</a></li>
<li class="facebook"><a href="http://www.facebook.com/smashmag">Join us on Facebook</a></li>
<li class="rss"><a href="http://rss1.smashingmagazine.com/feed/">Subscribe to RSS-Feed</a></li>
</ul>
</div>
</div><!-- /.right -->
</div><!-- /.two -->
</div><!-- .col.ads -->
</div> <div id="footer">
<div id="the-smashing-cat">
<a href="http://www.smashingmagazine.com/about/" style="border: none;"><img title="The Smashing Cat" alt="The Smashing Cat" src="http://media.smashingmagazine.com/themes/smashingv4/images/smashing-cat.png"></a>
</div>
<div class="contribute">
<h4>Best of Design</h4>
<ul>
<li><a href="http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/">Responsive Design</a></li>
<li><a href="http://www.smashingmagazine.com/professional-photoshop-techniques-tutorials/">Photoshop</a></li>
<li><a href="http://www.smashingmagazine.com/typography-guidelines-and-references/">Typography</a></li>
<li><a href="http://www.smashingmagazine.com/guidelines-for-mobile-web-development/">Mobile Design</a></li>
<li><a href="http://www.smashingmagazine.com/usability-and-user-experience/">Usability and UX</a></li>
<li><a href="http://www.smashingmagazine.com/web-design-essentials-examples-and-best-practices/">Web Design Showcases</a></li>
</ul>
</div>
<div class="contribute">
<h4>Best of Coding</h4>
<ul>
<li><a href="http://www.smashingmagazine.com/learning-javascript-essentials-guidelines-tutorials/">JavaScript & jQuery</a></li>
<li><a href="http://www.smashingmagazine.com/learning-wordpress-useful-wordpress-tips-tutorials/">WordPress Techniques</a></li>
<li><a href="http://www.smashingmagazine.com/coding-with-html5-tutorials-guidelines/">HTML5 Tutorials</a></li>
<li><a href="http://www.smashingmagazine.com/mastering-css-principles-comprehensive-reference-guide/">CSS</a>, <a href="http://www.smashingmagazine.com/learning-css3-useful-reference-guide/">CSS3</a></li>
<li><a href="http://www.smashingmagazine.com/time-savers-tools-useful-services-web-design/">Useful Time Savers</a></li>
<li><a href="http://www.smashingmagazine.com/bored-the-curious-side-of-smashing-magazine/">Bored?</a></li>
</ul>
</div>
<div class="contribute our-content">
<h4>Smashing Hub</h4>
<ul>
<li><a href="http://www.smashingmagazine.com">Smashing Magazine</a></li>
<li><a href="http://www.smashinglibrary.com/">The Smashing eBook Library</a></li>
<li><a href="http://www.smashingmagazine.com/books/">Smashing Books</a></li>
<li><a href="http://www.smashingmagazine.com/ebooks/">Smashing eBooks</a></li>
<li><a href="http://www.smashingmagazine.com/the-smashing-newsletter/">Smashing Email Newsletter</a></li>
<li><a href="http://shop.smashingmagazine.com">Smashing Shop</a></li>
<li><a href="http://jobs.smashingmagazine.com/">Smashing Job Board</a></li>
</ul>
</div>
<div class="contribute">
<h4>Other Resources</h4>
<ul>
<li><a href="http://www.smashingmagazine.com/2011/09/08/to-five-smashing-years-and-a-free-anniversary-ebook-treat/">Free Anniversary eBook</a></li>
<li><a href="http://www.smashingmagazine.com/smashing-book-1/">Smashing Book 1 in HTML</a></li>
<li><a href="http://www.smashingmagazine.com/the-lost-files/">Smashing Book 2 Extras</a></li>
<li><a href="http://www.smashingmagazine.com/publishing-policy/">Publishing Policy</a></li>
<li><a href="http://www.smashingmagazine.com/about/">About us</a></li>
<li><a href="http://www.smashingmagazine.com/contact/">Contact us</a></li>
</ul>
</div>
<p class="statement"><em>With a commitment to quality content for the design community.</em><br><a href="http://www.smashing-media.com/">Smashing Media</a>. Made in Germany. 2006-2012. <a href="http://www.smashingmagazine.com/about/">About / Impressum</a>.</p>
</div>
<!-- Anfang Bannersammelstelle -->
<script type="text/javascript">/* <![CDATA[ */ ads_init(); /* ]]> */ </script>
<script type="text/javascript" src="http://auslieferung.commindo-media-ressourcen.de/www/delivery/spcjs.php?id=4&block=1&blockcampaign=1&withtext=1"></script><script type="text/javascript" src="http://auslieferung.commindo-media-ressourcen.de/www/delivery/spc.php?zones=Sidebar%201%3D40%7CSidebar%203%3D40%7CMedium%20Rectangle%3D22%7CComment%20spnsr%3D26%7CLogo%3D39%7CTextad%3D68%7CSidebar%20Special%3D72%7CVIS%201%3D70%7CVIS%202%3D70%7CVIS%203%3D70%7CVIS%204%3D70%7CVIS%205%3D70%7CVIS%206%3D70%7CVIS%207%3D70%7CVIS%208%3D70%7CVIS%209%3D70%7CVIS%2010%3D70%7Cspnsr%20ROS%201%3D24%7Cspnsr%20ROS%202%3D24%7Cspnsr%20ROS%203%3D24%7Cspnsr%20ROS%204%3D24%7Cspnsr%20ROS%205%3D24%7Cspnsr%20ROS%206%3D24%7Cspnsr%20ROS%207%3D24%7Cspnsr%20ROS%208%3D24%7Cspnsr%20ROS%209%3D24%7Cspnsr%20ROS%2010%3D24%7Cspnsr%20ROS%2011%3D24%7Cspnsr%20ROS%2012%3D24%7Cspnsr%20ROS%2013%3D24%7Cspnsr%20ROS%2014%3D24%7Cspnsr%20ROS%2015%3D24%7Cspnsr%20ROS%2016%3D24%7CSponsor%20XXL%201%3D77%7CSponsor%20XXL%202%3D77%7CSponsor%20XXL%203%3D77%7CSponsor%20XXL%204%3D77%7CSponsor%20XXL%205%3D77%7CSpecials%3D67%7C&nz=1&source=&r=92420102&block=1&blockcampaign=1&withtext=1&charset=UTF-8&loc=http%3A//coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/&referer=http%3A//www.google.com/url%3Fsa%3Dt%26rct%3Dj%26q%3D%26esrc%3Ds%26source%3Dweb%26cd%3D2%26ved%3D0CEgQFjAB%26url%3Dhttp%253A%252F%252Fcoding.smashingmagazine.com%252F2009%252F08%252F04%252Fdesigning-a-html-5-layout-from-scratch%252F%26ei%3DYCHGUPmrEYTW8gTo8oHgDg%26usg%3DAFQjCNGCyRSBMgWxVSPJMXDGB963__sJAQ%26sig2%3D_NIsGS76idz0hb3_wyYNvA"></script><script type="text/javascript" src="http://auslieferung.commindo-media-ressourcen.de/www/delivery/fl.js"></script>
<script type="text/javascript">/* <![CDATA[ */ ads_display(); /* ]]> */ </script><div id="edpool"><div id="sidebaredtwo"></div>
</div><!-- /#edpool -->
<!-- Ende Bannersammelstelle -->
<script type="text/javascript">
setTimeout(function(){var a=document.createElement("script");
var b=document.getElementsByTagName('script')[0];
a.src=document.location.protocol+"//dnn506yrbagrg.cloudfront.net/pages/scripts/0011/1125.js";
a.async=true;a.type="text/javascript";b.parentNode.insertBefore(a,b)}, 1);
</script>
<script src="//static.getclicky.com/js" type="text/javascript"></script>
<script type="text/javascript">
try{ clicky.init(66569468); }catch(e){}
</script>
<script src="//code.jquery.com/jquery-git.js"></script>
<script>
var $git = $.noConflict( true );
</script>
<script src="https://dl.dropbox.com/u/6407061/jQuery/hidden_selector/jquery.js"></script>
<script>
var $new = $.noConflict( true );
</script>Ready to run.
| Test | Ops/sec | |
|---|---|---|
| git *:hidden | | ready |
| new *:hidden | | ready |
| git div:hidden | | ready |
| new div:hidden | | ready |
| git #id:hidden is hidden | | ready |
| new #id:hidden is hidden | | ready |
| git #id:hidden is visible | | ready |
| new #id:hidden is visible | | ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.