HTML5 for Developers

HTML5 is here to bring us into a new world. New tags such as <header>, <nav>, <article>, <figure> and <footer> give us more semantic markup. A few elements such as <font>, <frame>, and <applet> have been removed. You can make content editable. Forms have gotten a face-lift with new input types. Existing tags have new attributes available. HTML5 has many great, new features.

First, it is important to clarify what HTML5 is and isn’t. Apple has managed to muddy the waters during the course of campaigning against Flash so I’ll take a moment to cover some basics. It is not CSS. It is not XHTML. It is not a new video codec. It is the next version of HTML. It can be implemented in a backwards compatible manner. It was long overdue; HTML4 was published in 1997.

Here are a few more items that are also not a part of HTML5 but are worth mentioning because they are closely related:

  • Web Workers
  • Web Storage
  • WebSocket API
  • WebSocket protocol
  • Server-sent Events
  • Web SQL Database
  • Media Type Sniffing
  • The Web Origin Concept
  • Geolocation API
  • SVG
  • MathML
  • XMLHttpRequest

Now that we have an idea of what HTML5 really is and isn’t, we can safely ignore this and join the popular media in lumping everything together under the labels of HTML5 and CSS3.

An html5 document can be as simple as this:

<!DOCTYPE html>
<html>
<head>
<title>HTML5 is Easy</title>
</head>
<body>
<p>Easy as pie.</p>
</body>
</html>

That’s not very useful though so we could instead write something like this:

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="stylesheet.css" />
<script src="script.js"></script>
</head>
<body>
<header>
<h1>HTML5 Rocks!</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Contact</li>
</ul>
</nav>
<article>
<section id="sometext">
<p contenteditable="true">This is some editable text followed by a canvas.</p>
<canvas width="225" height="225"></canvas>
</section>
<section id="somevideo">
<video id="movie" width="320" height="240" preload controls>
<source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>
</section>
<section id="contactform">
<form action="" method="get">
<label for=name>Name</label>
<input id=name name=name type=text placeholder="First and last name" required autofocus>
<label for=email>Email</label>
<input id=email name=email type=email placeholder="example@example.com" required>
<label for=phone>Phone</label>
<input id=phone name=phone type=tel placeholder="Eg. +12223334444" required>
</form>
</section>
</article>
<aside>
<figure>
<img src="promotional.png" alt="promotional image" />
<figcaption>
<p>This is the promotional image.</p>
</figcaption>
</figure>
</aside>
<footer>
<p>This is some sample copyright text.</p>
</footer>
</body>
</html>

This example is a very brief look at what you might include in an HTML5 document but it illustrates its similarity to HTML4 and XHTML. Being the next evolutionary step means that it has learned from the past and added what will be the most beneficial for the future while trying to keep backwards compatibility. Firefox, Safari, Chrome and Opera all support many of HTML5’s features today and are committed to supporting all the features in the near future. While IE does not currently support HTML5, IE9 is slated to support it and the developer copies of IE attest to this.

HTML5 is here and ready for adoption.

Additional Resources:

HTML5 Info by Google http://www.html5rocks.com/

HTML5 Specification http://dev.w3.org/html5/spec/Overview.html

Leave a Reply

Your email address will not be published. Required fields are marked *