This infographic is a handy one-stop reference source for the HTML5 markup language and all of the spiffy tricks you can do with it. Let’s dive right in.
New tags:
These tags are mostly about the expanded media capabilities of the mobile and desktop browser arena. The fun element you’ll probably be playing with first is {canvas}, which is practically a whole design space in itself and bears much resemblance to SVG. There’s {audio} and {video} for multimedia. And there’s a system of handy form tags for creating simple web forms with menus and entry fields.
Outdated tags:
The next section is about tags that are no longer supported. Most of these won’t be missed, as we hardly know anyone who ever used the {acronym} tag. What was that even supposed do?
Existing tags:
These are the grandfather tags from previous HTML versions. Rest easy, your {h1}…{h6} tags still work. You also still have the obscure formatting stuff that CSS has mostly replaced years ago.
Existing attributes:
These are the current attribute tags still supported from HTML4 to HTML5. Mostly these are used for Javascript / Flash hooks, though it’s entirely possible to use them in conjunction with canvas elements and CSS popups as well.
Browser support:
And now, the part that gives us all nightmares: the support. Both desktop and mobile modules show that the typical anarchy of every browser doing whatever they want has continued. You want to see as many orange dots as possible for whatever feature you’re trying to use. Keep in ind that the features are broken down into two alternating blocks for the support graph, to include everything on the list.
Of note: nobody supports Ruby annotation – this has nothing to do with the Ruby-on-Rails language, it’s for supporting kanji characters with a pronunciation guide. Browsers will have a fallback for that. Outside of that and a few niche functions, most everything has even support except for – you guessed it – Internet Explorer 11.0. Nearly half of HTML5 still isn’t supported on the scapegoat browser.
On the mobile side, the story’s more hit-and-miss. No browser supports all features evenly, but Firefox, Chrome, and Android are neck-and-neck for most complete feature support and the rest are scattered.
Canvas:
And now the part you all were waiting for, a complete Canvas tag section. There’s several references for various effects, drawing kit for your arcs, beziers, and rectangles, line-styling, shadows, and more. You might not have known that solid geometric primitives can be combined with CSG operations like XOR and addition. There’s also rotations and transformations, and many more cool tricks besides.
It’s worth pointing out that many of these canvas elements are going to reduce labor as time goes on. That’s because charts, graphs, and even infographics can now be presented in the same visual medium, while being simpler to edit and update as time wears on. Even with sketchy support, you should encourage your clients in the future to host data in HTML5 canvas format just so you don’t have to worry about somebody (or you) having to manually edit a PNG image and trying to remember what font you used.
Enjoy this handy reference from makeawebsitehub.com.
