Until now there has never been a standard audio player for browsers. If you wanted to place audio on your site you either had to use one of the available players such as Windows Media Player or Quicktime player. With HTML5 audio there is just simple code to use to place audio anywhere on the page without have to have a separate audio player or 3rd party service hosting your audio.

Here is an example of how to use the HTML5 audio tags in your web code.

There are several attributes you can use along with your tag to customize your player. The attributes include autoplay, control customization, looping and pre-loading. Which means you can start your video when someone opens your page, customize what controls they see on the audio player and even loop the video so it plays continuously over and over.

So with the implementation of this tag it is going to become much easier for the average webmaster to add audio to their websites and blogs. The HTML5 video tag is also new and is similar in that it provides and across the board video player for putting videos on your site.

Right now HTML5 tags especially the audio and video tags are very experimental. Browser support while getting better is still in its infancy stages which means that as cool as these tags are implementing them into your designs now is going to leave a huge part of the PC internet users unable to see the content on your site.

One also has to wonder what the effects of HTML5 audio and video tags on web hosting. Until now most web hosts could depend on the fact that if a blog or small website wanted to use video or audio it was likely they would host it elsewhere.

With the ease of using these tags I have a feeling once they become more of a standard and are more widely used web hosts are going to see far more people hosting big audio and video files on their servers. Which could mean a rise in web hosting costs depending on how much extra storage space and bandwidth is being used.

HTML5 is coming there is no way around it but it is going to take some time before you can safely use it in your websites. Tags like the HTML5 audio tag are going to make certain elements of design so much easier, so until then we will just wait.

Prior to the new HTML5 video tag you basically had two options for embedding video on your site to get a video player or to use a 3rd party service like YouTube to host your video and them use their embed code to put the video on your site.

Most people are currently using the 2nd option of using services like YouTube to host their videos and them embedding them on their own site. This option is not really a better design standard than getting a video player and hosting your own videos but it is quicker and free which is why most people end up using this configuration for videos.

For people who do decide to have their own video player they quickly find out that a quality one can be costly and customization may require both a graphic designer and a web designer all just to place a video on their site.

That is where the magic of HTML5 video comes in. It has a simple straight forward tag that is similar to an image tag with a source and attributes. It looks like this.

If you have ever added video to a website you know how much simpler that is. However, the problem is that the browsers of the world are not quite ready for what HTML5 has to offer.

Currently only one browser has a robust support for HTML5 video tags and that is chrome, firefox also has limited support and IE hasn’t even touched video in HTML5 in its current browsers yet. So what does that mean for you? It means a good percentage of people using computers to access the internet will not be able to render the video on your page.

Which is why for now when it comes to building websites video in HTML5 is like that golden egg sitting just out of your reach that you really want but you just cannot have. The push for HTML5 compliance is getting louder and louder everyday though so before you know it HTML5 will have enough standards in browsers to make 2.0 web design much easier.

First let’s take a look at what HTML5 actually is and what it is used for. HTML is a markup language used to design and layout web pages. HTML5 is a new version of that language that has more tags and hence more design options.

Most people can agree more design options is a good thing. The controversy comes in mostly because certain companies like Apple are acting as if HTML5 is a standard when the reality is no browser fully supports it yet.

Essentially that means that for people using certain elements of it they will look nothing like they intended to most of the people who view the pages. So while HTML5 and its applications are definitely going to offer us some much cooler websites it is just not practical yet to use for your web designs.

We tested out a few of the most popular browsers to see how ready they are for HTML5 and this is what we found out. For this test we used http://www.html5test.com which offers an HTML5 testing page and a rating system that goes up to 400 points depending on how many HTML5 features are already implemented into the browser.

Chrome 10.0 was the big winner coming in at 301 points out of 400 possible. They have already implemented most of the functionality to be a compatible HTML5 browser. In addition, many of the features that are not added are partially added. So Google Chrome is definitely way out in front in the race for HTML compatible browsers.

Firefox 4.0 is next in line and they scored pretty decently getting 249 out 400 possible points. They are still missing a lot of key elements but got bonus points for the audio and video implementation as well as their parsing rules.

Internet Explorer 8 is pretty far behind the curve. IE scored a total of 32 points out of 400. Pretty dismal showing for what used to be the top internet browser in the world. Internet Explorer has been playing catch up with rendering design since the implementation of CSS and their poor showing here tells us it does not seem like much will change in the future.

So those are the statistics. At the moment the only HTML5 browser that is going to get you very far is Google Chrome and until browsers catch up with the newer language it is probably a good idea to use it sparingly in your designs until it actually is a true and tested standard.

HTML5 is the proposed next standard for HTML 4.01, XHTML 1.0 and DOM Level 2 HTML. Its goal is to reduce the need for proprietary RIA technologies, which include the likes of Adobe Flash, Microsoft Silverlight and Sun JavaFX.

The ideas for the revised HTML began all the way back in 2004 by the WHATWG and are just now making way. Although parts of the revision have been completed and are ready for use, it is an ongoing work that is expected to continue for many years to come.

It certainly features a number of new elements and attributes that will assist modern web sites. Some of the basic elements that have been added include semantic replacements for common uses of generic block and inline elements. Other elements will work with standardized interface like <audio> and <video> elements.

As you learn HTML 5, you will find there are some elements that have been dropped from HTML 4.01. One such feature is the presentational elements of <font> and <centers> which are now achieved using CSS.

HTML 5 canvas example - Super Mario Bros

To see a live preview of this please CLICK HERE. Isn’t it just amazing to see were the future of HTML 5 is heading.

Another Canvas example this time showcasing a First Person Shooter using HTML 5 canvas elements again pictured below:

HTML 5 canvas - Fisrt Person Shooter

To see a live preview of this example CLICK HERE.

AS HTML 5 is still a work in progress we here at HTML 5 Tutorial are still trying to get a grip on the upcoming canvas elements and properties, so please bare with us as we are in the process of creating some HTML 5 canvas tutorials, these should be ready in the coming weeks, so bookmark us and check back soon.

HTML5 / HTML 5 is about to change the way we go about implementing Audio into websites and apps with this tag= <audio> this new tag will enable us to play Audio natively from your preferred browser, we are still a while away from all browsers supporting HTML 5 however you can use the Safari browser which is already taking advantage of html 5.

• <span>src</span> – a valid URL specifying the content source.
• <span>autobuffer</span> – a boolean specifying whether the file is to be buffered in advance.
• <span>autoplay</span> – a boolean specifying whether the file should play as soon as it can.
• <span>loop</span> – a boolean specifying whether the file should be repeatedly played.
• <span>controls</span> – a boolean that if set tells the browser to display its default media controls.

As you will notice from the above attributes, these tags usually control video content, this is a great move forward many sites rely on Audio within their websites, not everyone has adobe flash installed this can often lead to a higher bounce rate. Anyhow we will keep you posted on this matter.

The picture below represents how a HTML 4 page would look.

HTML 4 structure

And the picture below represents how a HTML 5 page would look.

HTML 5 structure

As you can see above the page is very simple yet also very clean, HTML 5 has plenty of new elements which effectively make it easier to structure pages and also helps browsers have more control as to how the web pages are displayed. Once all the big named browsers are compatible with HTML 5 you should notice faster loading times, easier navigation and much richer content.

We will create a tutorial for the above layout shortly so that you can get a grip on the new coding.

HTML 5 is going to be he next biggest thing since sliced bread(pardon my lame phrase it’s getting late) the new standard of code is going to allow for website developers, web masters and newcomers to create rich feature packed websites, not only websites in general HTML 5 can even be used to make desktop applications, online applications.

If your even slightly interested in making websites or applications then you really should learn HTML 5, the code itself is not all that different from the current code, all tho as this is a huge update to Hyper Text Markup Language there are plenty of new features and a whole lot of extra coding, it may sound a little scary at the moment as there are not many sites actually using HTML 5 this will start to change in the coming months. The reason not many sites are using HTML 5 already is due to the fact that only 2 out of about 20 different browsers can understand the new HTML 5 markup, In the coming weeks we will be making a HTML 5 website so that you can see just what it is capable of (you will need to download the Safari browser in order to view our HTML 5 examples).

We will be adding HTML 5 tutorials every few days so please come back shortly and you can learn HTML 5 with us.

Some people believe that HTML 5 coding is only being introduced to make browsers manufacturers (browser/ software companies) while other webmasters see this as a great step forward to being able to develop more powerful multimedia. HTML 5 will change the way we work with general HTML as the soon to be standard code is not just a markup from HTML 4 but more that of a new language, HTML will make life easier for everyone including not just browser manufactures but also developers, there are already some example JavaScript applications and APIs using the upcoming HTML5 code.

Most HTML based websites are using HTML 4 as we speak but this will start to change over the coming months and years, up until now the HTML code has hardly evolved from HTML 2.0 only some issues were addressed with the release of HTML 4 along with a small amount of new code references, HTML 5 is based from HTML 4 but in it’s own right it will be completely different and will change the way your browsers render websites on your PC screen, HTML 5 will rely heavily on JavaScript, should you have JavaScript turned off the website / pages are unlikely to render correctly.

Please check back soon as we will have a more detailed look into the new code.