There’s been a lot of buzz about HTML 5 lately. I’ve seen a wave of articles talking about the new version of HTML in the RSS feeds I follow. Work on HTML 5, which commenced in 2004, is far from complete, but we’re starting to see some new and exciting features being released in the current draft.
So what’s new? For front-end developers, there are a few improvements in version 5 that aim to make life easier and cut down on development time.
So What’s Different?
Well, a lot, but one of the most significant changes from HTML 4 is that HTML 5 is not based on SGML. It has, however, been designed to be backward-compatible with common parsing of older versions of HTML.
In the SGML rulebook, element names are not case sensitive, you can have elements with optional closing tags (like the paragraph tag), and you can have attribute values without quotation marks. XHTML 1.0 and 1.1 are based on a rulebook called XML. In the XML rulebook, element and attribute names are case sensitive, every opening tag must have a closing tag, and attribute values must be quoted.
HTML 5 defines a markup language that isn’t based on either rulebook, but that can be written in either “HTML form” (or serialization, as the specs call it) or “XHTML form.” This gives page authors more flexibility.
Page Structure
HTML 5 brings a whole set of new elements that make it much easier to structure pages. Now, we have tags like:
<header> <nav> <article> <section> <footer>
HTML 4 lacks the necessary semantics for describing these parts of the page specifically. The new tags should replace the all-too-common “use div” elements, giving each a descriptive ID or class.
Typical markup for an HTML 5 document could look something like this:
<body> <header>...</header> <nav>...</nav> <article> <section>...</section> </article> <aside>...</aside> <footer>...</footer> </body>
Embedded Media
The popularity of audio and video on the Web is undeniable. Sites such as YouTube, MySpace, and Facebook make it easier than ever for anyone to publish rich content to the Web. HTML 4 lacks the means to embed and control multimedia successfully; many sites rely on Flash to perform those tasks.
HTML 5 promises two tags to aid in the embedding process:
<audio> <video>
There are many additional attributes available for each of these tags, should the author of a Web page require more-detailed control over its content. But for purposes of demonstration, this would be a typical use:
<video src="video.ogv" controls poster="poster.jpg"
width="320" height="240">
<a href="video.ogv">Download movie</a>
</video>
<audio src="sample_audio.mp3" controls>
<a href="sample_audio.mp3">Download song</a>
</audio>
The optional “poster” attribute can be used to specify an image that will be displayed in place of the video before the video has begun playing. The “controls” attribute is a true-or-false attribute that indicates whether the author wants the built-in controls turned on or off by default.
Regular expressions
HTML 5 extends the input element by offering new attributes that allow you to specify what data you will allow as input. These attributes include min and max (to set a numeric range), and HTML 5 also offers new values for the type attribute, such as url, email, date, and time.
Enter a US or Canadian Postal Code:</p>
<input type="text" name="postCode"
required="required"
pattern="([0-9]{5}(-[0-9]{4})?)|([0-9][A-Z][0-9]\s+[A-Z][0-9][A-Z])"
title="US: 99999-1234; Canadian: 0A1&#160;B2C" />
The value of the pattern attribute is a regular expression, as defined in ECMAScript and used in JavaScript.
Canvas
The new Canvas element consists of a drawable region defined in HTML code with “height” and “width” attributes. JavaScript code may access the area through a full set of drawing functions similar to other common 2D APIs, thus allowing for dynamically generated graphics. Some anticipated uses of Canvas include building graphs, animation, games, and image composition.
See the yellow square? That’s being drawn by JavaScript into the Canvas tag. Currently only FireFox, Chrome, and Opera support the canvas tag.
This is an early example of the improvements the Web-development community can look forward to with the release of HTML 5. Of course, not all browsers will be swift to support the new specifications, so don’t throw out that HTML bible just yet!
Do you have any other HTML 5 tips and features you find exciting? We’d love to hear about them!
Comments