Introduction to HTML5 – Part 1

Part of doing Web Development is staying on top of your game and up to date with all the new techniques and technologies constantly coming out. Currently, the most prominent of these new toys are HTML5 and CSS3. In this series I’m going to be doing an overview of HTML5: What you can use now, what you should hold back on, and what you can do with it.

Part 1 will cover the structure of your html documents when switching from html4/xhtml to html5.

1. The almighty !DOCTYPE

When I started out as a developer, the doctype was just something I copied and pasted to the top of my html documents (I wised up later and placed it in a template), but what exactly is it? To put it as simply as possible, the doctype tells your browser how to render the html that follows.

Most people are used to seeing this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Or at least in our company we code in XHTML Strict. There are other options too, such as Transitional, but we recommend using Strict.

HTML5 makes it a lot easier — you don’t have to remember long lines, or even set up a template. Let me introduce to you the HTML5 doctype:

<!DOCTYPE html>

That’s it. No extra code needed!

Can you use this?

Yes, all of the good browsers, and even some of those that aren’t that good (IE, I’m looking at you), understand it already. Your documents will also validate as HTML5 if you use the w3 validation tools.

2. The <html> tag

Your old html tag most likely looked like this:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

The xmlns and xml attributes were used to tell your browser that elements in your document are in the XHTML namespace, as well as which natural language to use — English in the example above.

In HTML5, the html tag has also been simplified:

<html lang="en" >

No more xmlns or xml attribute is needed. The page will still validate if you leave them in there, but every byte that we can save on a page helps.

Can you use this?

Yes, but if you’re still uncomfortable with switching to HTML5 completely you can leave in the xmlns and xml attributes without it creating problems.

3. The <META> tags

The only meta tag that really changes in HTML5, at the moment, is the tag that tells your browser which character set is being used on the page, the good old:

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

Once again HTML5 has simplified this for us, and less code equals smaller file size which equals faster loading which equals happier users! The new meta tag for setting the character set is:

<meta charset="utf-8" />

You can replace “utf-8″ with the character set you use.

Can you use this?

One word, Yes.

4. Including CSS

As you may have noticed by now, HTML5 is focusing on simplifying your html code. More of that when including stylesheets:

Usually your code might look something like this:

<link rel="stylesheet" href="css/style.css" type="text/css" />

HTML5 has simplified it somewhat to:

<link rel="stylesheet" href="css/style.css" />

The reason for this is that there aren’t really any file types except css for stylesheets. So the smart guys behind HTML5 thought that it was useless to add the type attribute since if you’re including a stylesheet we already know what the type is going to be.

Can you use this?

Once again, yes.

5. Including Javascript

The exact same thing that holds for css, holds for javascript. We’re simply making the tags shorter, saving on file size and improving performance.

The script includes were:

<script src="js/anvil.js" type="text/javascript" ></script>

Now scripts are always javascript scripts, and we don’t need to tell the browser that. So for HTML5 we simply do:

<script src="js/anvil.js" ></script>

Can you use this?

As you might have guessed, yes.

In conclusion

All of these methods are supported by modern browsers, so feel free to start using them!

Part 2 of the series will cover some of the new elements/tags you can use in your HTML5 documents, as well as which browsers support them.

Leave a Reply