It will be a while before we can start using real HTML5, but because HTML5 is as much about defining current behaviour as it is about adding new, there is already a very large part available to us today. Here are the parts you can use today.
HTML5 is arriving sooner rather than later. The 2022 date means that it’s fully supported, finished, done. It doesn’t mean we can’t use it. For example, CSS2.1, from 1998, still isn’t fully supported, finished, done, either. We all use that as well, right?
A lot of the HTML5 supported today are actually browser quirks, formalised. It’s usable right now, will get you acquainted with HTML5 and will basically make your front-end life easier :) (And it all works in Internet Explorer too!)
There is much, much more to HTML5 than visible in this article. This article only focusses on what you can use now. If you want more info on HTML5, check the specifications, or the whatwg blog.
<!doctype html>The simplified doctype is ierhaps the most iconic idea in HTML5. It turns out, the above code is all that’s needed to trigger standards mode. The validator understands it as well. Quite a change from the humongous HTML4 or XHTML doctype declarations, no?
<meta charset="utf-8">This works the same as the doctype. You don’t need anything more than this to make your browser set a charset. It turned out that people so often mistype this attribute, (content="text/html; charset=utf-8"), that browser parsers actually encountered charset=utf-8 more than the whole content attribute. Since it’s legal to omit the quotes, charset is being parsed as an attribute in all browsers. And it’s legal in HTML5.
<script>
//your javascript
</script>
<style>
// your css
</style>You no longer have to declare the type attribute with text/javascript or text/css. All browsers already act as if anything inside those tags is javascript or CSS.
HTML5 introduces a bunch of new elements that allow you to better describe your document:
These are not all the new elements, but they are the ones that are going to replace the numerous divs used today. While you can use them already, I consider it a bit tricky in-production (it’s dependent on javascript). Instead of using the elements however, it’s a smart thing to start using these names as classes for the divs you currently use. When the time comes, it’s easy to just switch over to these elements.
When you start using HTML5 like in the examples above, you have the benefit of acquainting yourself with HTML5, still make websites that work today and more importantly, make sure your websites will still work for a long time to come!
Hi, I'm Kilian. I make Polypane, the
browser for responsive web development and design. If you're reading this site, that's probably
interesting to you. Try it out!
Did you know you can create files using JavaScript right inside your browser and have users download them? You can create files with a proper name and mime type and it only takes a few lines of code. Creating downloadable files with JavaScript in your browser only takes a few lines of code. Check out the…
Media queries are what make modern responsive design possible. With them you can set different styling based on things like a users screen size, device capabilities or user preferences. But how do they work, which ones are there and which ones should you use? For the Polypane blog I wrote the complete guide to media queries.…
I got invited to talk about Electron at QCon San Francisco in November and the video and transcript of the presentation are now available. Electron gives you the power to write a single application for Windows, MacOS and Linux. But Electron apps can easily feel out of place among other applications, exactly because you have…