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">
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.
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:
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>
<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.
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>
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
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!