Snippets: HTML5 Template & CSS Reset

Snippets: HTML5 Template & CSS Reset
October 21, 20106 Comments

If you haven't started using HTML5 for markup in your projects, now is always a good time to start. There are tons of good tutorials and posts out there that will teach you all about the new spec.

I just wanted to share a simple HTML5 template and CSS reset I use to start out each new project in hopes someone would find it useful. It contains the basic layout formula, stylesheets, latest version of jQuery, Remy Sharp's html5shim and Google Analytics code.

You can also grab the snippets and others from my Snipplr page here.

HTML5 Starting Point Template

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<meta name="description" content="A description about your site" />
	<meta name="keywords" content="keywords, separated, by, comma" />
	<title>Untitled Document</title>
	<link rel="shortcut icon" href="favicon.ico" />
	<link rel="stylesheet" href="css/style.css" media="screen" />
	<link rel="stylesheet" href="css/print.css" media="print" />
	<link rel="stylesheet" href="css/mobile.css" media="handheld" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<!--[if IE]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
</head>

<body>
	<section id="header">
		<header>
			<h1><a href="#">Site Title</a></h1>
			<nav>
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
			</nav>
		</header>
	</section>

	<section id="main">
		<article>
			<hgroup>
				<a href="#">
					<h1>Heading Title</h1>
					<h2>Heading Title 2</h2>
				</a>
			</hgroup>
			<p>Article Filler</p>
		</article>
		<aside>
			Sidebar Filler
		</aside>
	</section>

	<section id="footer">
		<footer>
			&copy; Copyright Year by Author. All Rights Reserved.
		</footer>
	</section>

	<script type="text/javascript">
		var _gaq = _gaq || [];
		_gaq.push(['_setAccount', 'XX-XXXXXXX-XX']);
		_gaq.push(['_trackPageview']);

		(function() {
			var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
			ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		})();
	</script>
</body>
</html>

CSS Reset

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;font-weight:normal;}ol,ul,nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block;}input,select{vertical-align:middle;}abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help;}hr{display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;
padding:0;}input[type='submit'],input[type='button'],input[type='text'],input[type='tel'],input[type='email'],input[type='url']{font:inherit;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;}

Author: Jason

Hi, I'm Jason. A front end developer from Grand Rapids, Michigan, and founder of VagrantRadio. I enjoy working with Css, jQuery, Php, learning new techniques in Photoshop and you should follow me on Twitter or Snipplr.

Mojo Themes
  • http://www.ao6-labs.eu AoSiX 
    <a href="#">
      Heading Title
      Heading Title 2
   </a>

    <a> can’t contain ; this is bad :O

    • http://www.vagrantradio.com VagrantRadio

      AoSiX, I’m afraid I don’t see a “;” in there, but I assure you this is the correct syntax for a linked hgroup.

      Also, had to reformat your comment to make it display properly. Next time when writing code, use <pre> </pre> and & lt ; – &gt ; for brackets.

  • http://twitter.com/cointilt Will Ayers

    I would suggest adding a blank IE conditional statement right after the title like so:

    This will prevent from any of the other conditional statements from acting like scripts and stopping all other downloads until complete.

    • http://www.vagrantradio.com VagrantRadio

      Hey Will,

      Looks like your code got stripped out if there was any. Thanks for the suggestion!

  • http://www.vagrantradio.com VagrantRadio

    So what’s the point of this? I guess I fail to see what it does, the other IE conditional in there is a script.

Scroll to top