With all of the headlines surrounding flash versus HTML5 lately, I thought I’d take a moment to share some of the changes in HTML5. For the most part, I think most people will tell you that there’s still a place for flash, but it may be smaller. I’m not really interested in that debate as much as I am the overall changes that come with HTML5, so let’s dig in.
One of the nice things about HTML5 is that it is meant to be simpler and more intuitive, although HTML in general is pretty easy. For instance, the new document type looks like this:
Two words! That’s easy enough. The Character Set is similarly easy and uses UTF-8:
Hit The Road Jack
The following tags are Deprecated in HTML5:
Some of those may be missed by some, but I have to say, no tears are being shed here.
Structural Elements The Way They Should Have Always Been
The new Structural Elements in HTML5 resemble what websites actually look like now and are much more intuitive. They should help when browsing code as well. They are:
- header: header of the page
- nav: pretty obvious :)
- section: defines any sections of the page
- article: primary content (we call it the body copy)
- aside: extra content like a side bar in 3 column layout
- footer: footer of the page
- figure: images that annotate an article
New HTML5 Attributes
The new Ping attribute (shown below) let’s your visitor go to the external site specified in the href attribute, but now the browser knows to hit your ping attribute destination as well where you can process that exiting link and do any tracking you’d like.
<a href=”http://www.protocol80.com” ping=”http://www.mywebsite.com/trackpings” >protocol 80</a>
New HTML5 Tags
Primatives: rectangles, paths, arcs, curves (beizier & quadratic), images, fills (solids, gradients, patterns of images), shadows
You can also animate the shapes, etc… with transformations:
Transformations: coordinate transformations, rotate whole canvas, scale, composite, clipping path
You can see why this poses some competition for flash.
The audio tag is pretty strait forward. It allows you to embed an audio clip in the page. It also allows you to specify multiple clips to test which is supported by the viewer's browser. There are some options like AutoPlay, AutoBuffer, Controls, and Loop as well.
Video is much like audio, and poses a big threat to flash on the various video sites like youtube.
HTML5 Inline Semantic Elements
There are some new inline semantic elements that should make a life a little easier:
- Mark: Show <m>highlighted text</m>
- Time: Meeting at <time>9:00am</time>
- Meter: I would walk <meter>500</meter> miles
- Progress: <progress value=”5” max=”20”>100</progress>
- Menu: <menu>
HTML5 Input Types
In my opinion, this long overdue. There are some new input types with HTML5 that will really help out. Peep them below:
- text pwd, checkbox, file, radio
- search, email, tel, url
- date, time, datetime, month, week…
Timeline for HTML5
Are you ready for this? 2022! No, that’s not a typo. The editor of HTML5 working draft was quoted in December of 2009 as pegging 2022 as the official, all approved version. That doesn’t seem to mean squat considering many browsers are already supporting aspects of HTML5.
One thing’s for sure, there are a lot of welcomed changes!