html5
Article, HTML5

HTML5: Quick Introduction

As a Web developer, the first think you need to be aware of is the real definition of HTML5. In fact, HTML5 is not ONE single technology, it is a whole bunch of APIs that combine HTML, CSS3 and of course JavaScript. So if you are thinking about detecting “HTML5” and then set the correct code for your website: It Won’t Work ! However, you can detect support for individual features like canvas tags or some of the new tags that we will take a look to in the next articles.

So, if you’re wondering what you have to do in order to convert your old HTML4 web application to HTML5. Well, the W3C working group have made it easy for us, in the way that you don’t have to code again all your application or learn things you already know. But of course, you can improve you application so it can fit nicely into the HTML5 world, and remain compatible with older browsers, namely IE6/5/6/7/8.

Now, with all that being said, I guess you want to see some lines of code. So, lets start!

To upgrade your application, it all start with changing a simple line of code which is of course the Doctype. The new HTML5 Doctype is as simple as typing:

[cce_html]< !DOCTYPE html>[/cce_html]

Isn’t that so simple? No more version, no more DTD validation file, just two words!

Well, of cours bear in mind that the new HTML5 Doctype won’t break your older code because HTML4 tags are still supported by HTML5. So, you have to proceed to this change if you want to validate your application and most of all, if you want to play with the new semantic tags such as the <article></article><section></section><header></header>, and <footer>.

I should mention also that the <!DOCTYPE> is not mandatory but I recommend you to put it in your code because that tells the browser to switch to Strict Mode, which means that your code will be treated as standard compliant code.

Now, the next step is to define the language you use in your application and charset as well. In fact, these two elements are very important in a web application because there are used by search engines and also for accessibility reasons, so please do not forget to use them!

So, you can set the language attribute to the correct language used by your web application, in my case I used “en” because I obviously use English as my main language. And this is how you define it:

[cce_html]<html lang="en">[/cce_html]

Right? Next, we set the default charset, and for this I assume that you are already using the UTF-8 charset in your current application, if not please switch to this charset as soon as you can, I even advice you to set this charset as your default charset in your code editor. This will avoid a lot of headaches, believe me :) To set the UTF-8 charset, add this line to the head section of your HTML5 document:

[cce_html]<meta charset="utf-8">[/cce_html]

Now, let’s put it all together:

[cce_html]<!DOCTYPE html><html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="author" content="">
        <meta ...>
        <title>...</title>
        <link ...>
        <style>...</style>
    </head>
    <body>
        <h1>My HTML5 clean template</h1>
        <script ...></script>
    </body>
</html>
[/cce_html]

So I think this needs a bit of explanation :)

  1. As you can notice, we put the <meta charset=”utf-8″> at the very top of the head section, and we did it for purpose: The browser needs to know what charset it should use to encode the rest of the document!
  2. I intentionally put the <script> just before the closing body tag, because of performance issues!
  3. The <style> may remain in the head section so the Render Engine of the browser can proceed quickly and apply styles to your page!

Well, I believe I reached the end of my article. Please feel free to read the other articles related to HTML5 for more advanced techniques.

Standard