04 August 2013

HTML5 Introduction

Recently I got some time to take a dive in to HTML5 and I would like to share my experience here.  This was long pending as, the news of HTML5 was getting demands a while when companies like Apple started using this. Every new Apple mobile device and every new Mac supports HTML5 with Safari web browser. All major browsers (Safari, Chrome, Firefox, Opera, and Internet Explorer) continue to add new HTML5 features to their latest versions.
HTML5 is not one big thing; it is a collection of individual features like support for individual features like canvas, video etc. This will be my Introduction web log on HTML5 and I will try to go through most of them in my subsequent blogs. Like most of the cases my learning process starts with open questions and then tries to reach to answers.
What is HTML5?
HTML5 is a markup language for structuring and presenting content over web pages. HTML5 is the next revision of the Hypertext Markup Language (HTML). In theory, HTML5 will allow the Web browser to become a development platform. A primary goal for this is to ensure interoperability among browsers so that Web applications and documents behave the same way no matter across the devices. (Older browsers that do not support HTML 5 will be able to ignore the new constructs and still produce legible Web pages. That’s sounds cool right ?)
Why HTML5?
After the birth of original HTML it has gone through many years of updates. And all these updates they tried to integrate with different versions. HTML 5 is the most recent one among that. For example when video streaming came on web there was no in built support for this. So companies like Quick Time, Real Player, Windows Media player and flash introduced there on and in order to use this user has to download external plug-in.  The idea behind HTML5 is to come up with a consistent experience across all devices and browsers. Today, the different browser's are working together to achieve this goal.
New Features
Some of the most interesting new features in HTML5:
  • The canvas element for 2D drawing
  • The video and audio elements for media playback
  • Support for local storage
  • New form controls, like calendar, date, time, email, url, search
Here we will try to experiment with few among the above. Let’s take a small sample of Playing a YouTube Video in HTML. You can achieve this few lines-of code.

<!DOCTYPE html>
<html>
<body>
 
<iframe width="420" height="345"
src="https://www.youtube.com/watch?v=SE_X9cF431g">
</iframe>
 
</body>
</html>
Also please find samples of script and noscript tag. 

<!DOCTYPE html>
<html>
<script>
document.write("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
</body>
</html>
We will continue exploring the other features in next logs.

No comments: