Thursday, October 2, 2014

HTML4 Versus HTML5: Coding Examples

Introduction:

Last time I'd mentioned new changes for HTML 5 compared to HTML 4, let's write a bit of code for each to compare/contrast using some of the new features.

Coding Samples:

HTML4 sample:

HTML5 sample:

Comparing The Code:

As you can see with the <embed> tag being used the width and height attributes (within reason) have to be set.  Testing the code in Chrome has the autostart tag rendered useless, IE works as expected with the video file albeit in Windows 7 there was blocked content that had to be unblocked to play it.  IE wouldn't play the audio file at all, directly calling the .wav file played the file in the default media player unlike chrome which used an embedded player.

The video file worked as expected (after unblocking the content), the <video> tag made auto-sizing the control on the page easier (did some tinkering with the height/width on the <embed> tag).

Results:

HTML 4:



HTML 5:

Conclusions:

I have high hopes for the HTML 5 standards, hopefully they'll get the last of the kinks out so we can enjoy the new properties available to us.

Source:



No comments:

Post a Comment