A html5 website template starter kit.

by Ochronus on April 17, 2011

A html5 website template starter kit.

 









<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My shiny site</title>
</head>
<body>
<header>
<nav>
<ul>
<li>Menu item</li>
</ul>
</nav>
</header>
<section>
<article>
<header>
<h2>Article title</h2>
<p>Posted on <time datetime="2011-04-15T16:31:24+02:00">April 15th 2011</time> by <a href="#">Writer</a> – <a href="#comments">6 comments</a></p>
</header>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</article>
<article>
<header>
<h2>Article title</h2>
<p>Posted on <time datetime="2011-04-15T16:31:24+02:00">April 15th 2011</time>  by <a href="#">Writer</a> – <a href="#comments">6 comments</a></p>
</header>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</article>
</section>
<aside>
<h2>About section</h2>
<p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</aside>
<footer>
<p>Copyright 2011 Your name</p>
</footer>
</body>
</html>








 
Enhanced by Zemanta

Tagged as: html, html5, Markup Languages

  • Pingback: HTML all you need to know» Blog Archive » HTML5 page structure

  • Pingback: HTML5 page structure | Web Scripts Maniacs

  • HJ

    I see you are not using the (new?) meta charset=utf-8, but an http-equiv meta tag for denoting the encoding. Is there a specific reason for that?

    Otherwise thanks for sharing :)

    • http://blog.mostof.it/ ochronus

      No specific reason, they are equivalent – I guess I got used to the full notation :)

  • http://www.rizzif.com/ Francesco Rizzi

    Yay! Thanks: the time I spent wondering how others are thinking about using HTML5 to structure their site!
    Personally, I’m still pushing for the H1-H6 to be used as HTML5 suggests – so I’d use H1′s in your example. And I suggest including an hgroup in the header (although, of course, you currently have just a nav in it). Still: thanks for sharing – I like to have comparison data points

  • Pingback: A basic CSS3 reset

  • Pingback: Links for 2011-04-18 — Business Developer Talk

Previous post:

Next post: