HTML5 Intro: Use It Today!

November 14th, 2010 Leave a comment
Like the article?
Do you program in HTML5?

Ever since Apple announced that they would not be supporting Flash in favor of the multimedia features of HTML5, there has been a lot of media attention on HTML5. Unfortunately, along with the media coverage there has been a tremendous amount of myth and misrepresentation regarding the level of browser support for HTML5. I’ve even heard some designers say that HTML5 won’t be ready until 2012 and that we should all sit tight and wait for it! The truth is that many of the elements of HTML5 are available for use today and browser support is pretty good. We’re going to look at some of the elements of HTML 5 that can be used today, how to work around browsers that don’t support them yet and ways to change how you work with HTML 4 or XHTML to prepare yourself for HTML5.

HTML 5 differs in syntax from HTML 4 and XHTML. It no longer matters whether the tags are lower or upper case. It is also no longer necessary to close tags. Attributes can be quoted or not. All of the following tags are valid HTML5:

<meta charset=utf-8 >
<meta charset=utf-8 />
<meta charset="utf-8" >
<META charset=utf-8>
<META CHARSET=utf-8>

…and so on. This may seem like pretty lax syntax, especially to those of us accustomed to XHMTL. The truth is, however, that the browsers never really cared about XHTML syntax as long as the content type sent by the server was text/html. In beginning to work with HTML5, the key is to pick a style and be consistent. If you’re used to working with XHTML, go ahead and stick to that style of syntax since it is familiar.

You should also note that HTML5’s syntax for the meta tag is different. It is still valid to write:

<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />

However, it is no longer necessary. HTML5 can instead use simply:

<meta charset=utf-8>

You will also notice that the doctype is shorter in HTML5. Here’s a valid HTML 5 doctype:

<!doctype html>

Yep, that’s it! No URLs or links. Simple. Now, let’s make a simple page. Try this:

<!doctype html>
<meta charset=utf-8>
<title>Hello World</title>
<h1>Hello World!</h1>
<p>This is written in HTML 5</p>

Try viewing this in IE or Firefox. You’ll find a perfectly formatted HTML page. This will look odd to those of us familiar with XHTML as it doesn’t have <head>, <body> or <html> tags. In HTML5 these three elements are entirely optional. This is because web browsers assume them anyway and the designers of HTML 5 felt it would make for a leaner syntax to omit them. Since they are optional, you can include them if you like. Having said this, it is important to note that in terms of current browser support, Internet Explorer requires these elements in order to apply CSS styles to your HTML5 elements. So for now, you will probably want to include them in your HTML 5 work.

Now, let’s consider a “typical” web page. You might have something that looks like this in terms of your layout:

Page Layout

In HTML 4 or XHTML, you would create this structure using the <div> tag and CSS classes. It might look something like:

<body>
<div id="Header">
<!--Header Content-->
</div>
<div id="Sidebar">
<!--Sidebar Content →
</div>
<div id="Content">
<!--Content-->
</div>
<div id="Footer">
<!--Footer Content-->
</div>
</body>

In HTML5, we have new structural elements that are intended to better follow the structure of a “typical” web page. Here’s a sample page (we’re including the optional <html>, <head> and <body> elements because we will want to use CSS to style the elements):

<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>My HTML 5 Page</title>
</head>
<body>
<header>
<!-- Header Content -->
</header>
<nav>
<!-- Sidebar Content --> 
</nav>
<article>
<!-- Main Content --> 
</article>
<footer>
<!-- Footer Content --> 
</footer>
</body>
</html>

These elements don’t do anything special in terms of layout or style. They’re simply block level elements much like a <div> or <p> but they’re more descriptive of the content that each tag surrounds. This is what we refer to as semantic web design. This default page will lay them out as a block one right above the other in the order that they appear. We still need to use CSS to style the elements so the <nav> element may have a float applied to make it appear on the side, etc. We select these elements in CSS just as we would any other HTML tag. For example:

header {
	color: black;
}

The major browsers have decent support for HTML5’s new elements and for styling them with CSS with one notable exception – everybody’s favorite Internet Explorer. In order to apply styles to HTML 5 elements in IE, you will need to use Javascript. Here’s a sample script for IE:

document.createElement('header');
document.createElement('nav');
document.createElement('article');
document.createElement('footer');

While this script won’t hurt other browsers, you can include it only for IE using conditional tags. There’s an enabling script for HTML 5 that you can download from:

http://remysharp.com/2009/01/07/html5-enabling-script/

You can download this script and include it in the head of your HTML5 pages to allow IE to style the HTML5 elements.

Of course, this IE issue brings up one important concept. IE users who have disabled Javascript will not be able to view your HTML 5 pages properly as the CSS styles will not be applied to the new HTML 5 elements. While this probably represents a small number of users, it can be common among corporate users so you will need to consider your target audience. It may not be appropriate to use HTML 5 for some projects until browser support becomes more standardized.

Which leads to some ways that you can start preparing yourself for HTML5 while writing HTML 4 or XHTML pages. You can begin thinking in HTML5 by using the new structural elements as the basis for your semantic class names in XHTML. Name your CSS classes using the standard HTML5 elements such as ‘nav’, ‘header’, ‘article’ in order to mark your content up semantically. This way, when you later need to convert them to HTML5 you can just replace the <div> tags with the appropriate HTML5 element.

HTML5 won’t be finalized in many ways until 2012 and browser support will improve with each new release. However, many elements of HTML5 are fully supported today and there are a number of Javascript workarounds to add support for additional elements. Unless your web site target IE users who have disabled Javascript, there is no reason you can’t start using HTML5 now. And even if you’re still forced to use XHTML, you can begin using the structure of HTML 5 to name your semantic classes so that future upgrades to HTML5 will be simple. HTML5 is coming but you can start using it now.

Help us spread the word!
  • Twitter
  • Facebook
  • LinkedIn
  • Pinterest
  • Delicious
  • DZone
  • Reddit
  • Sphinn
  • StumbleUpon
  • Google Plus
  • RSS
  • Email
  • Print
If you liked this article, consider enrolling in one of these related courses:
Don't miss another post! Receive updates via email!

Comment