HTML5 – A New Beginning of WEB

Categories UncategorizedPosted on

Before that I tell you something about HTML5, let me tell you that I recently attended Microsoft Web Camps at Mumbai. Where one of the topic was HTML5. This post would also contain some summarized content of the Session.

Here first have a look at HTML5 Logo.

The Logo is designed by Ocupop design agency, and it’s licensed under Creative Commons Attribution 3.0, a permissive license that allows ‘remixing’ of the licensed work. The logo has been made available on stickers and t-shirts, and there’s a gallery already promoting examples of the logo in use..

HTML5 is the next major revision of the HTML standard, currently under development.HTML5 introduces a number of new elements and attributes that reflect typical usage on modern websites.

HTML5 is the cornerstone of the W3C’s open web platform; a framework designed to support innovation and cherish the full potential the web has to offer. Announcing this revolutionary collection of tools and standards, the HTML5 identity system provides the visual vocabulary to clearly classify and communicate our collective efforts.

HTML 5 consists of HTML5= HTML+JAVASCRIPT+CSS3

In HTML 5 as you can see in the fig JAVASRIPT has a major portion then is CSS3 and very little HTML.

HTML 5 is also called as Working Draft.HTML 5 is living thing.

FEATURES OF HTML5

There are many new features in HTML5. I have only major features of HTML5

1. OFFLINE & STORAGE

Thanks to this feature now browser can now remember what we have typed, even after we refresh or reopen the browser

“localStorage sets fields on the domain. Even when you close the browser, reopen it, and go back to the site, it remembers all fields in local Storage.”
QuirksBlog

Code Snippet to achieve Offline Storage

window.localStorage.setItem(‘timestamp’, (new Date()).getTime())

textarea.value = window.localStorage.getItem('timestamp');

2. SEMANTICS

This is nothing but a good way to make your html look organized.It enables a more useful, data driven web for both programs and your users.Giving meaning to structure, semantics are front and center with HTML5

An e.g of it is this

The tags used to achieve this are

  1. <header></header> For Creating a header Section
  2. <footer></footer> For Creating a Footer Section
  3. <nav></nav> For Creating Navigation Area

There are many more tags. You can find them in Documentation Link of W3C. Link is given at last of this post.

3. GEOLOCATION
It’s nothing but a way to locate your location using geolocatio API.
Code Snippet for it. Your browser must support HTML5. Allow access.
if (navigator.geolocation) {  navigator.geolocation.getCurrentPosition(function(position) {    var latLng = new google.maps.LatLng(        position.coords.latitude, position.coords.longitude);    var marker = new google.maps.Marker({position: latLng, map: map});    map.setCenter(latLng);  }, errorHandler);}

4.CONNECTIVITY

This allows you to have real time chats, faster games and better communication. It uses Web Workers, Web Sockets for it.

5. MULTIMEDIA

HTML5 has a wide support for audio and video controls.Audio and video are first class citizens in the HTML5 web, living in harmony with your apps and sites. Lights, camera, action!. To do use the following tags

1.<audio></audio>  // For adding audio

2.<video></video> // For adding video

Below is the the code snippet for adding audio to web page.

<audio autoplay=”autoplay” controls=”controls”>

<source src=”file.ogg” />

<source src=”file.mp3″ />

<a href=”file.mp3″>Download this file.</a>

</audio>

Below is the code snippet  to add video to web page

<video controls preload>

<source src=”cohagenPhoneCall.ogv” type=”video/ogg; codecs=’vorbis, theora'” />

<source src=”cohagenPhoneCall.mp4″ type=”video/mp4; ‘codecs=’avc1.42E01E, mp4a.40.2′” />

<p> Your browser is old. <a href=”cohagenPhoneCall.mp4″>Download this video instead.</a> </p>

</video>

6.Hyper-Threading for Web browsers

With this feature, separate background threads can be used for processing without affecting the performance of a webpage. This is extremely useful for applications with rely on heavy scripts to perform such functions.

7.3D, GRAPHICS & EFFECTS

By using SVG, Canvas, WebGL, and CSS3 3D features, you’re sure to amaze your users with stunning visuals natively rendered in the browser.

8.Doctype

How can I forget the important feature. The doctype is now html5. this is how you will write now

<!DOCTYPE html5>

9.PERFORMANCE & INTEGRATION

Make your Web Apps and dynamic web content faster with a variety of techniques and technologies such as Web Workers

10.CSS3

CSS3 delivers a wide range of stylization and effects, enhancing the web app without sacrificing your semantic structure or performance.Additionally now you can use a wide range of fonts on the WEB.

10.More FORM CONTROLS

To understand more form controls have quick look at the Video.

There are many more New Features of HTML5 here is the list

  • Native Drag & Drop
  • Placeholder
  • Autofocus Attribute
  • Figure Element
  • Email inputs
  • Required Attribute
  • hgroup
  • <small> redefined
  • No More Types for Scripts and Links
  • Content Editable
  • Preload Video
  • Display video controls
  • Detect Support for Attributes // Using Modernizr library
  • Mark Element

Have a look at this video to know what should you be using now of HTML5

To See HTML5 Demos visit here HTML5 Demos and here also HTML5 DEMOS

To Check whether your browsers support HTML5 or not visit these links

  1. caniuse
  2. htmltest
  3. fmbip

To see the HTML5 specification of W3C click here.

To see the demo of all features of HTML5 click here.

To get a Browser that supports HTML5 see the downloads section.

To get a HTML5 Batch for you as I have got visit here.

Till then Happy Reading    

With Regards

Uday Vaswani

1 comment

  1. Pingback: HTML5 – A New Beginning of WEB | Swift Soft Tech

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.