Get started with HTML5 - Code template and browser support

Get started with HTML5 - Code template and browser support

HTML5 has recently become the hot subject in web design, everyone is using it! I've come across a few great resources aimed at providing a complete solution for building a website in HTML5, CSS3 and all sorts of other emerging technologies, but it soon becomes apparent that you really don't need something that complex. So I decided to give you the bare-bones code for building a webpage in HTML5.

The code


<!doctype html>
<html lang="en">
	<head>
		<title>Title goes here.</title>
		
		<meta charset="utf-8">
		
		<!--[if lt IE 9]>
		<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>
	<body>
		<header>
		
		</header>
		<article>
		
		</article>
		<footer>
		
		</footer>
	</body>
</html>

The above code includes the new HTML5 Doctype which is pretty much all you need to get going. In HTML5 you can write your code just how you did before; both HTML and XHTML mark-up is allowed, however some tags are no longer usable and there are a few new tags you need to learn.

I would recommend reading the W3 Schools guide to HTML5. It includes information on New Elements, Video, HTML5 Canvas, Geolocation and Web Storage. If you can handle all of the jargon, it's probably worth reading the HTML5 specification from W3 too.

Better browser support

It is safe to assume that most modern browsers will support at least the basic features of HTML5. Unfortunately, Internet Explorer only supports HTML5 from IE 9 and much of the internet's population is still using versions below that, so here I have some solutions: 


<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

HTML5 Shiv is a JavaScript file which adds new HTML5 elements so that Internet Explorer can recognise them, but also supports printing HTML5 elements and includes the default styles for those elements. The script is contained within conditional comments so it will only load in older versions of IE. 


<!doctype html>
<!--[if lt IE 7]> <html class="ie6 flag-old" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="ie7 flag-old" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="ie8 flag-old" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->

This might look like a big mess but the preceding code shows a great way of detecting older versions of Internet Explorer so that you can display specific CSS rules. It works by giving the html tag the class 'flag-old' if the browser is IE 8 or below (followed by a class of ie6, ie7 or ie8).

More detailed code


<!doctype html>
<!--[if lt IE 7]> <html class="ie6 flag-old" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="ie7 flag-old" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="ie8 flag-old" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>
		<title>Title goes here.</title>
		
		<meta charset="utf-8">
		<meta name="author" content="Name" />
		<meta name="description" content="Description goes here." />
		
		<link rel="stylesheet" href="/style.css" type="text/css" />
		<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
		<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
		
		<!--[if lt IE 9]>
		<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>
	
	<body>
		<header>
		
		</header>
		<article>
		
		</article>
		<footer>
		
		</footer>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		<script>window.jQuery || document.write('<script src="/js/jquery-1.7.1.min.js"><\/script>')</script>
		
		<script src="/js/script.js"></script>
		
		<script type="text/javascript">
			var _gaq = _gaq || [];
			_gaq.push(['_setAccount', 'UA-XXXXX-X']);
			_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>

Finally I have compiled a slightly more realistic template for you to use. It has a few more Meta tags in the head and also supports jQuery and Google Analytics.

The mark-up validates as HTML5.

Further Reading

If you're looking for something a bit more detailed and with lots of features take a look at the following projects:

  • HTML5 Boilerplate - "A rock-solid default for HTML5 awesome."
  • HTML5 Reset - "Like a lot of developers, we start every HTML project with the same set of HTML and CSS files. We've been using these files for a long time and have progressively added bits and pieces to them as our own personal best practices have evolved."
  • Modernizr - "Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites."

In my opinion much of the code is not needed (I prefer things to be simple) but some of it is very useful. HTML5 Boilerplate is very much like a framework so I wouldn't bother trying to integrate it into an existing site; just start from scratch.

Comments