HTML5 is certainly a hot topic and if you are a web developer you have to at least know the basics of it. Thankfully it is fairly easy to learn if you know what is going on. In this tutorial I am going to go through some of the basics that will help you get started coding HTML5.
DOCTYPE
The biggest change is the fact that the DOCTYPE has been simplified. No longer are you required to know long DOCTYPEs. In fact, it has been simplified to the point where it can actually be memorized. For example, if you were doing a traditional HTML4 document your DOCTYPE would look something like this:
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Good luck actually memorizing that. In HTML5 it is simply:
<!DOCTYPE html>
Much easier to memorize.
Changes in the HEAD tag
HTML5 is smart enough to know what kind of documents you might be linking to your page like Javascript and CSS. In the past we would have to declare what type of document you were attaching by a type=“text/css” or type=“text/javascript”. This is no longer needed.
New Tags
HTML5 brings a bunch of new, more semantic tags to use in your code. Gone are the days where you have to write a header like
<div id="header"></div>
Now you can simply use the new header tag.
<header></header>
Here is a list of some common new tags that you would do well to learn
Header - Defines a header of a page or section.
Footer - Defines the footer of a page or section.
Article - Defines content that is self-contained and could be independently distributed or reused. For example, this could be a blog post.
Section - Defines a group of common elements or information.
Aside - Defines information that is related to the content around the aside element. For example, this could include bullet points to an article.
Hgroup - Defines a group of headers (the headers such as H1 and H2 not the header tag itself).
Nav - Defines navigation
There are many many more tags but this are the ones that you should know and use first. A good place to learn about all the tags is http://html5doctor.com/
Multimedia
Because it is such an involved subject I will leave the full explanation of this for another tutorial but HTML5 has the capability to show multimedia such as movies and audio with the video and audio tags. Right now there is a browser fight for which formats to support so if you do include this into your page, make sure you include all formats including Flash for browsers that do not support these tags. Again, this is a deep topic and will be fully covered in another tutorial.
Technology
This is another section that is very deep so I won’t go into it much here, but HTML5 has some advanced technology behind it to support Offline Storage, Geolocation APIs, Canvases, Web Workers and XMLHttpRequest 2. A lot of these also need Javascript to work but these are powerful technologies that are built in the specification.
Support
This is the big question. “Can I use it now?” The answer is yes. In fact if you are reading this on my site then you are already seeing it in action because this site is made with HTML5. Now just writing the new DOCTYPE and the new tags isn’t enough because past browsers don’t know what HTML5 is so you have to do a little work to get it to display correctly. Most notable is the IE browsers. Currently the only IE browser that can understand HTML5 is IE9 which at the time of this writing was just released a couple weeks ago. Past IE browsers don’t recognize the tags and won’t display them correctly. For this we will have to add the HTML5 tags to the browser’s DOM (Document Object Model) via javascript. The script is confusing if you don’t know javascript but thankfully you don’t need to understand it. Also Google has taken the time to host it on it’s CDN (Content Delivery Network) for us to use and take advantage of. In your head tag place this code:
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
This will make it so IE can see the new tags and style them. Without this IE will not even be able to style the tags with CSS.
We also have another problem that needs to be addressed. IE can now see the tags, but it doesn’t know what tags are Block Level elements or what ones are Inline elements. We can use CSS for this. There are only a few tags that we need to worry about so add this to your CSS document:
header, footer, aside, nav, article, section {
display: block;
}
That is it. Your website should now we ready to be displayed in all browsers.
The A Tag
There is one more thing that I want to go over. In HTML5, the a element is now considered a block element. We don’t include this into our CSS because it would cause havoc with styling the site. HTML5 browsers will also display them inline despite them technically being a block level element. So what gives. Why the change?
The change goes the way of necessity. For example, say we wanted to make this whole section link to another page:
<div>
<ul>
<li>Point one</li>
<li>Point one</li>
</ul>
</div>
To get this to link to another page, we would have to use javascript or make the unordered list into a bunch of span tags. With HTML5 it is now valid to wrap the whole section with an a tag such as this:
<a href="#">
<div>
<ul>
<li>Point one</li>
<li>Point one</li>
</ul>
</div>
</a>
This is now perfectly valid in HTML5.
Conclusion
HTML5 is a very powerful spec that is still changing but you can use it right now. In order to help you get started you can use my HTML5 Vanilla Kit which comes with all the code that I have talked about here. You can download a free copy at http://cibgraphics.com/projects/vanilla
Let me know if you have any questions about HTML5 in the comments section below.
Kelly-Anne Leyman
Posted on
Fabulous Tutorial!