HTML5 is still a work in progress
, and some parts are still being refined or are subject to change, but partial experimental support is already existent in most major browsers. At this point I wouldn’t recommend building a whole website in HTML5 without any kind of contingency for those whose browsers don’t support it or behave differently than some others, but it pays to get prepared early on.
To that end, I’ve compiled a short list of some of the cool new things HTML5 can do.
Semantic blocks
I could write an entire article on why better semantics are good for the developer, the designer, and search engines (and I plan to.) The short version is these elements provide for overall improved structure of HTML documents, including fewer structural errors.
New form controls
The datalist element allows you to define a list of “hint” items for a text input field. The progress element is a progress bar, and the meter element is a graphical meter. These aren’t new concepts in HTML documents, but having native elements for them makes the developer’s job easier and improves compatibility. Input elements also allow new types, including datetime, range, email, and color. Further, form elements have a bunch of new attributes allowing built-in form validation, which even allows regular expression matching! Having this extremely useful functionality built-in rather than custom-coding JavaScript for every form is a huge step forward.
New Media Tags
One of the objectives in HTML5 was to reduce how often plugins needed to be used. Embedding audio and video clips with native tags means fewer instances of the Flash, Windows Media Player, and Quicktime plugins, for example. The embed element, which was not part of the HTML4 specification, but returned to HTML5 in a more simple form, supporting only the width, height, src, and type attributes, along with the standard HTML5 attributes and event attributes.
The canvas Element
The canvas element is simply a placeholder for graphics drawn with JavaScript. Because there’s no plugin involved, however, it has less operational overhead than Flash, for example, while also allowing easier integration with the rest of the page. This is something you need to see in action, so here are a couple examples I found. Ball Pool (be sure to shake your browser window around, that’s the coolest part in my opinion) and Liquid Particles (notice that the particles interact with the mouse even if it’s outside the canvas)
WebSockets and Server-Sent Events
Traditionally, HTML is stateless. Basically that means that the browser requests a file from the server and the server returns some data. For each file a new request is made. Persistent logins and other apparent states are achieved with cookies, server-side data, forms, etc. Furthermore, there’s no way for the server to tell the client something unless it specifically asks.Both of these new-to-html technologies provide a means for the server and client to interact more flexibly. Server-Sent Events basically listen for some data to be sent from the server, and the server can send that data whenever it needs to. Great for chat applications for example. The benefit here is that requests aren’t being sent back and forth, and in fact nothing is being sent unless there’s relevant data. WebSockets are a more robust mechanism that also allow the browser to send data to the server. This is how most network/internet-enabled stand-alone applications (such as multiplayer games) communicate. Typical web servers aren’t capable of handling this communication yet, but some are, and we’ll likely see more of them implement it soon.
I hope you enjoyed this brief look at a few of the things HTML5 is improving. Be sure to check the official spec working draft and the related W3Schools tutorial for more details and ongoing status. And don’t forget to check out our Web Design and Development page.
