I Think I Got It. Let's Talk Specifics.


Traditionally, it takes a lot of code and a whole bunch of things called "Third Party Plug-ins" to get things like Flash videos or even audio to work on a website. In HTML4, developers have to work around the constraints created by things like Apple's Quicktime or Adobe's Flash Plug-in to get multimedia content to even show up. This usually results in a lot of code (and sometimes hacks) to get the content to display properly for everyone. Once HTML5 is viable across all browsers, the process of "embedding" multimedia content will become easier for developers to code and for users to view. It will also reduce the chance of content being displayed improperly or not displayed at all because developers won't need to rely on users to ensure that they have the proper plug-ins (and sometimes browser version) to view a website.

Toggle Section Summary

HTML5's New "Media" Elements

Three of the new HTML5 elements that will help to make media integration into web content easier fall under what the W3C calls "Media Elements". These three elements—the video, audio and embed tags—help to create a standardized way for developers to code external media into their HTML.

Toggle Section Summary

Tip!

If you want to see what the code snippets render on a web page, click on the images to see a larger example. Also, if you'd like to take a very in-depth look at how the HTML5 elements discussed below work, click on the green-highlighted element name to go to the W3CSchools website.

1. The <video> Element

The video element—or <video> tag—is the new HTML5 standard for having video placed on a web page. With a single HTML string, video content can easily be placed and viewed within a web page. In HTML4, a video player API (like Flash Player, Quicktime or Silverlight) would be required to do this resulting in a lot of extra coding for the developer. So, like a lot of things in HTML5, using video will become a lot easier on the web resulting (eventually) in more and more web pages displaying richer content for users.

Toggle Section Summary

Code for the HTML5 video element.

The video tag is already supported by many, but not all, browser clients. Google Chrome, Mozilla Firefox and Apple Safari can already parse the video tag. Opera's browser (aptly named "Opera") has released partial support for the video tag and is working on making the browser fully compatible. Microsoft's Internet Explorer currently has not support for the new video tag and there is no word on when full support will be attained.

Toggle Section Summary

2. The <audio> Element

Code for the HTML5 audio element.

The <audio> tag is HTML5's new way for developers to control how audio content is contained within websites. Like the video element, the audio element slims down the code that was required by HTML4 to have audio embedded in a site. Not eternal audio player is required meaning that, so long as the user's browser can render HTML5 the audio will play.


Unlike the video tag, the audio tag is currently supported by very few browsers. Only Version 3.5 of Firefox and Safari can handle the audio tag at the moment. Chrome, IE and Opera all currently have no support for the HML5 audio tag.

Toggle Section Summary

3. The <embed> Element

Code for the HTML5 embed element.

The <embed> tag (or embed element) is HTML5's solution to the proliferation of Third Party Plug-ins that are currently required to access the majority of rich media on the web. The embed tag allows developers to insert content like .swf files (the files used by Adobe Flash Player) or to use Java environments without requiring users to install the appropriate plug-ins to see said content. The embed tag is an addition to HTML5 that is most apparently useful to both developers and users. This means that it will be easy for all kinds of previously inaccessible content available to users no matter what device they are accessing the internet on—meaning, yes, you will be able to view Flash content on your iPhone.

Toggle Section Summary

Hey! There's Important Stuff Going On Here!

Currently, there is one major problem with current support of the <video> and <audio> tags: not all of the browsers that support them can use the same file! This means that while some browsers can use .mp4 video, others only take .ogg files. The same can be said for audio: some web browsers can handle .mp3s as source files, but others will only use .oggs. This should change when the W3C mandates a specific file type that is supported in the "final version" of HTML5.


HTML5's New "Canvas" Element

Lastly, the humble but extremely powerful <canvas> tag is a new syntax element that has been added in HTML5. The canvas element allows developers to generate images on the fly, with and without the use of JavaScript.

Code for the HTML5 canvas element.

In it's most basic implementation, the canvas tag can generate graphics simply by way of the developer adding colour, size and location information. In more complex methods of use (which require JavaScript), images of extraordinary complexity can be generated simply by the user clicking and dragging his/her mouse around a pre-determined area. The dynamically generated content can then be scripted to interact with each other, creating involving user experiences.


Of all the new HTML5 elements that have been discussed, the canvas tag is the most widely supported by current browsing clients. IE (of course) is the only browser out of the main five clients that does not support the canvas tag.

Toggle Section Summary

A Conclusion—Finally!

The HTML5 logo.

So, that was all nice—but what does it mean? Basically, in short, the way that the web pages we use every day are made is going to change (soon). Although HTML5 is not scheduled for a complete, bug-free, cross-browser implementation until 2022, certain aspects of the new markup language can already be used to make browsing and working on the internet more efficient and enjoyable. HTML5 promises more media-rich and seamless websites for users, while, by the same token, creating a more simplistic and streamlined creative experience for web developers. So, essentially, with HTML5, everyone is going to be happy. There will be fewer issues surrounding browser compatibility and a reduced reliance on Third Party Plug-ins when it comes to displaying multimedia elements. Also, HTML5 will make more of the content on the internet accessible to more devices, meaning that people can take their favourite websites with them whenever and wherever they please.

Toggle Section Summary