As everybody knows, browser support for the new HTML5, CSS3 and
JavaScript features is increasing rapidly. This progress makes it
more and more interesting for developers to get the hands dirty and
start coding with the new tools at hand. I wrote this blog post to
lay out a base HTML file that offers support for the new HTML5
features and also includes some workarounds that makes your new
page as cross browser as possible. Of course there will always be
some differences in whether or not and in what way each browser is
implementing the new features so you still need to be testing your
page on all popular browsers. This base file acts however as a
kick-start to get you going as fast as possible.
In the following text I will explain every segment of the
file.
If you want to download
the file right way, you can find it here.
=======================================================================
Let's start with a simple line, the doctype. Different
from any other doctypes we've seen in the past, this one is clean
and simple. It basically just tells the browser that a HTML file is
loaded and it should be treated that way. In essence it's just
superfluous but since older browsers will lapse into quirks mode
without, we specify it at the first line in our page.
<!DOCTYPE html>
The second line will be the good old html opening
element. Note that the use of the <html> element, as well as
the <head> and <body> elements is simply a matter of
style. You can leave them out, and your page will work perfectly
well, even on old browsers that don't know a thing about HTML5.
One thing we see on this line is the lang attribute. It
indicates the webpage's natural language which is especially good
for search engines looking for a page in a specific language.
A second thing is the xmlns attribute. This attribute
is purely a matter of personal taste. Since HTML5 no longer
requires to setup your page in clean XML style you are allowed to
use uppercase and lowercase characters interchangeably in your
element definitions. As another example, closing an element in good
order is also no longer required. By specifying the xhtml namespace
by setting the xmlns attribute you tell any validator that you are
using that the file should be setup conform the xhtml schema. Note
that it does not matter for a browser that displays your page as he
will present it to you just as easily whether you specify the
namespace or not.
The last attribute on
this line is a class definition on the html element. What
this does is that when the modernizr script (which I will discuss
later) gets executed, it will add a bunch of classes to the html
element that indicates whether or not a specific CSS3 feature is
supported or not. This way, you can distinguish your styling based on these classes. For
example if csstransforms3d is not supported, a class called
"no-csstransforms3d" will be added. If the browser does provide in
the csstransforms3d feature, a class called "csstransforms3d" will be added
here. Check this feature out by looking at the generated source
when the page is loaded in a browser.
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" class="no-js">
Let's continue with the head element. Nothing special
with the element itself but let's look a bit further at the
specified charset. What this line does is to tell browsers
that it's serving out pages with the UTF-8 type of
encoding. Of course you can specify any encoding that you like but
UTF-8 is one of the most commonly used.
Another interesting line in this code snippet is the comment
line that is placed right below the character encoding. This line
is actually specific for Microsoft's Internet Explorer which comes
up with security messages where the user needs to click the famous
"allow blocked content" button before anything gets executed on the
page. Since the new HTML5 capabilities are highly related to the
execution of the executing of JavaScript on the page, we want to
prevent IE for asking the question and just get it to execute the
code.
<head>
<meta charset="utf-8">
<!-- saved from url=(0014)about:internet -->
The following line in our base file is the classic
title element. This is nothing new. It just display's the
title of your page in the browser's title bar.
The next lines however are a bit more interesting. The first
line starts off with a classic if statement that tells the browser
only to include the code within the statement if the browser is
Internet Explorer and more specific, an IE version that is below
version 9. The first line within the statement includes a piece of
JavaScript that is developed to include all HTML5 specific elements
like aside, header and article. The
second line includes some styling that makes the added elements act
the same as the classic div element (a block element) so
any IE version older than version 9 will display the page correctly
as well. Other browsers like Firefox do not seem to have the
problem and display the page correctly as default behaviour.
<title>HTML5 - Kickstart</title>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<style type="text/css">
article, aside, figure, figcaption, footer,
header, hgroup, nav, section, summary {
display: block;
}
</style>
<![endif]-->
The last line that we have within the head section of the page
include the modernizr file I mentioned earlier. One of the
useful things of this library is that you can check for support of
certain HTML5 specific features in the browser that the page is
currently executed in. So if you have a piece of JavaScript code
like this...
if(Modernizr.draganddrop)
var dosomething = true;
...you can figure out whether or not the browser is supporting
drag and drop functionality. Another thing that modernizr does is
to look for the no-js class in the html element as we discussed
earlier.
<script src="modernizr-2.0.6.js" type="text/javascript"></script>
</head>
The next thing we need to do is open the body section, do some
cool stuff, close the section again and close the html document as
well. And we are done...
<body>
...
</body>
</html>