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:
<!doctype html>
Two words! That’s easy enough. The Character Set is similarly easy and uses UTF-8:
<meta charset="UTF-8">
Hit The Road Jack
The following tags are Deprecated in HTML5:
- acronym
- applet
- basefont
- big
- center
- dir
- font
- frame
- frameset
- isindex
- noframes
- noscript
- s
- strike
- tt
- u
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
Ping
The first new attribute to discuss is the Ping attribute that gets applied to the <a> tag. There has never been an easy way to track outgoing links. It usually requires hitting some javascript, etc… for your analytics to track it. URL shortening services have attempted to cover this ground as of late.
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>
Async
The next new attribute is Async. This little guy gets included on a tag that is bringing in an external script file, like javascript. If the async attribute is present (oddly enough, it really doesn’t matter what you set it to, just being present is all it takes) the browser knows to load that included script in the background without delaying the load of the actual page. When the external resource loads, it’s contents then execute, if that is what is intended. Here’s an example of the script:
<script src=”javascriptfile.js” async=”async”></script>
New HTML5 Tags
<canvas>
The canvas tag gives you a space that you can interact with using a scripting language like javascript to draw shapes, images, fills and shadows, and then manipulate them. Here’re a list of soem shapes:
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.
<audio>
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>
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>
- <command>
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
- color
- date, time, datetime, month, week…
- color
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!
How to Audit your Online Marketing
If you are executing digital marketing, congratulations! You are most likely already one step ahead of your competition, and making strides to meaningfully connect with prospects online. But, how do you know if you’re seeing continual success year over year, and improving your metrics?
Without the tools in place to analyze and benchmark your efforts, it is impossible to scale your online marketing and ensure continuous success.
