Here is my HTML5 template. It also contains a few things I like to put in my pages.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/reset-fonts-grids/reset-fonts-grids.css">
<link rel="stylesheet" href="stylesheets/html5reset.css" />
<link rel="stylesheet" href="stylesheets/pageStyle.css" />
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="stylesheets/smalldevice.css" />
<link rel="stylesheet" href="stylesheets/printstyle.css" media="print" />
<link rel="shortcut icon" href="images/favicon.ico" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
WebFont.load(
{
google:
{
families: [ 'Tangerine', 'Cantarell', 'Yanone Kaffeesatz' ]
}
});
</script>
<script src="scripts/jQueryFunctions.js"></script>
<script src="scripts/html5functions.js"></script>
</head>
<body>
<div id="page">
<header>
<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script><script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<hgroup>
<h1>Page Header</h1>
<h2>Page Sub Heading</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section>
<article>First article on left.
</article>
<article>
<canvas id="myDrawing" width="200" height="200">
<p>Your browser doesn't support canvas.</p>
</canvas>
</article>
</section>
<aside>
The stuff aside
<article class="yellowbox">
This is the text in the box.
</article>
</aside>
<footer>
footer represents a footer for a section and can contain information about the author, copyright information, et cetera.
</footer>
</div>
</body>
</html>
Enjoy!
No comments:
Post a Comment