HTML5 meta tags and other header stuff you always forget

by Francesco Spreafico on .[it] ⇒

This page is now totally useless! Go check the HTML5 Boilerplate, instead!

Why?

How many times have you needed to start a new HTML page from scratch and, for the love of God, you couldn't remember every meta tag, every link tag, every standard script that you know you have to include in all pages? Even now, with the easier, shorter HTML5 syntax you always need to go find an existing page and copy them. Well, now you don't need to do that any more. And if you don't know or care for HTML5 (even though you should) it doesn't matter, this baby works everywhere.

How?

Just copy this text (or the portions you need) and paste it at the top of the new empty page.

<!DOCTYPE html>
<html lang="en">
<head>
	<title></title>
	<meta charset="utf-8">
	<meta name="description" content="">
	<meta name="robots" content="all">
	<link rel="stylesheet" href="">
	<link rel="canonical" href="">
	<link rel="alternate" type="application/rss+xml" title="" href=""> 
	<!--[if lte IE 6]>
		<link rel="stylesheet" href="">
	<![endif]-->	
	<!--[if lt IE 9]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
</head>
<body>
	
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</body>
</html>

What?

A few notes about the code.

  1. The new doctype declaration is just lovely, isn't it? As I said, use if freely, it works.
  2. The lang attribute is actually ignored by Google. I like using it, though. Of course you can change en to whatever language you need.
  3. The robots meta tag is completely useless, since all (or index, follow, it's the same) is what happens when you don't use it, but if you need to use noindex and/or nofollow that's where you have to write them.
  4. The canonical meta tag is useful if you have more than one url pointing to the same page.
  5. That little RSS icon most browsers show when there's a feed for the page you're viewing? You set it up here, with the alternate meta tag. (It has other uses too, but maybe this is the most common.)
  6. If you still support IE 6 you might have to include some CSS rules to fix its bugs... and conditional comments might be the best way to do it. [if lte IE 6] is for that.
  7. As long as IE 8 (and lower) will stick around, so will the HTML5 shiv. Including it, you'll be able to use those new fancy semantic HTML5 tags without IE exploding. If you don't use them, you don't need to include this script. Of course IE 9 will support them, that explains the conditional comment [if lt IE 9].
  8. I use jQuery, so I've included that too (at the bottom of the page for performance reasons, if you follow Yahoo suggestions). You could use ScriptSrc.net to keep it current or to pick up a different library.

Resources?

Wanna know more about these topics? Here are a few useful links:

And some useful HTML5 resources:

PS: The color scheme used in the code is, of course, Zenburn.

Save on Delicious Share on Facebook Share on Google Buzz Share on Twitter http://bit.ly/headtags