After a small throwback post of my original Tips and Tricks – jQuery Select2 blog for our #T4 series, and posting a CSS Blog about Mastering Multiple Backgrounds, it’s time I came back around and finished the HTML5 – Back to Basics with a Strong Foundation series with Part 2!
I highly recommend reading part one of the series. I outlined many HTML5 techniques that had never been possible with anything but Flash or jQuery before. In this blog I’ll continue with additional techniques that I couldn’t fit into the first blog.
I stand by my previous statement that if we forget what we’ve done and scripted for over two decades with previous versions of HTML and return to the basics with HTML5, we can re-learn a whole new foundation that is sure to make us stronger developers and smarter engineers.
IV. No More Declaring Types!
<links> can be FREE of the type attribute!
- Instead of:
- We can now just simply declare:
<link type=”text/css” rel=”stylesheet” href=”css/stylesheet.css” />
<link rel=”stylesheet” href=”css/stylesheet.css” />
Something so little . . . yet so awesome!
V. SEMANTICS! Well . . . partial semantics anyway!
No longer do we have to write:
<div id=”header”> <h1>Header Content</h1> </div> <div id=”footer”> <h1>Footer Content</h1> </div>
Now, with semantic Headers and Footers, we can simply do:
<header> <h1>Header Content</h1> </header> <footer> <h1>Footer Content</h1> </footer>
Whoo! That’s an AWESOME change. Of course there could be a LOT more semantic changes, but we all know those will be coming soon! Until then, we can enjoy what we have.
VI. Video Support without Third-Party Plugins
Check this out:
<video controls preload> <source src="/myVideo.ogv" type="video/ogg; codecs='vorbis, theora'" /> <source src="/myVideo.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" /> <p> Your browser is way too old. <a href="/myVideo.mp4">Download instead.</a> </p> </video>
You’ll notice there are TWO
<source> tags; this is because browsers like IE and Safari have already started supporting advanced video formats such as mp4. Firefox and Chrome are still in the process, but for now we still need to provide ogv/ogg videos. It’s only a matter of time before all the browsers will support mp4, but this is definitely a huge step forward from third-party plugins!
You should also notice there are two attributes listed in the
<video> tag: controls and preload. Controls embed native video playback controls in the video player while preload allows the video to be preloaded, which is GREAT if you have a page just dedicated to viewing the video.
Thanks for tuning in, and let us know what YOUR favorite new features of HTML5 are! And if you’re interested in a gaming series with HTML5, holla at us, and I’ll get on it! I’ve been dying to write a blog series dedicated to teaching HTML5 gaming with the