Quick Updates on HTML5

Introduction

If you are looking for a quick update on HTML5,  then you are at the right place – this Blog will help you get an introduction to the basics of HTML5 – its specific elements,  the differences between HTML5 and its earlier version, browsers that support it, technologies that come under it, and useful online tools for development.

HTML5 is the newest specification in the world of Web applications. It is currently supported by Safari 6, Firefox, Opera 12, IE 8,IE 9,IE 10 and chrome.The added bonus is that HTML5 is backward compatible.

One of the exciting aspects of HTML5 is that it is not only designed to work on desktops but also on mobile devices. The organizations that are responsible for providing specifications and APIs for HTML5 are:

• W3C – World Wide Consortium.
• WHATWG – Web Hypertext Application Technology Working Group.
• DAP – Device APIs Working Group.

In short W3C is the main group that works with other groups to develop web standards.

Differences between HTML4 TAGS AND HTML5 TAGS

In general, HTML5 is dissimilar from its earlier versions by :

• Not supporting a few elements of HTML4.X.
• Simplifying a few elements.
• Supporting some new elements.
• Supporting custom attributes.

New TAGS

HTML5 offers new semantic elements to define different parts of a web page which will help you to create your webpages easily.

What is New in HTML5?

As mentioned, HTML5 has in its bag: new elements, attributes, and APIs. Some of the commonly(most) used elements in HTML5 have to be the media related elements like <video> and <audio> for obvious reasons.  Also in use are the semantic elements which give an elegant structure to the web pages like: <section>, <article>, <aside>, <nav>, <header>, <figure>, and <figcaption>.

For instance, the <section> tag can be used as a container for a document and the <article> tag is suitable to articulate content as newspaper article or a blog post such as this one.  Below are listed a few tags and their suitable applications:

Here is a simple example for video tag with controls:

Click on the link below —>

https://s3.amazonaws.com/acadgildsite/course/blog/frontendbasic/HTML5_BasicTags/video_design/video_player_page.html

The other interesting new elements are:

·     New form control attributes like placeholder,autofocus,email,url,required,pattern, number, range, color,tel,color,search.

     Here is a screen shot of the webpage which includes some of the above mentioned tags and attributes.

If you want to experience the above webpage with all its features as a web page and make entries and test it out, you can do so by clicking the link below:

https://s3.amazonaws.com/acadgildsite/blog/frontendbasic/HTML5_Tags.html

New HTML5 API’s (Application Programming Interfaces)

The most interesting new API’s are:

• HTML Geolocation: HTML Geolocation is used to locate a user’s position. The HTML Geolocation API is used to get the geographical position of a user.
• HTML Drag and Drop: Drag and drop is a very common feature. It is when you “grab” an object and drag it to a different location.

• HTML Local Storage: With local storage, web applications can store data locally within the user’s browser.

• HTML Application Cache: Application caching mechanism lets web-based applications run offline.With application cache it is easy to make an offline version of a web application, by creating a cache manifest file. Developers can use the Application Cache (AppCache) interface to specify resources that the browser should cache and make available to offline users. Applications that are cached load and work correctly even if users click the refresh button when they are offline.
• HTML Web Workers: Web Workers provide a simple means for web content to run scripts in background threads.
• HTML SSE: Server-Sent Events allow a web page to get updates from a server.

What technologies are part of HTML5?

Here is a list of the technologies that are part of HTML5: (some of these are explained above)

Canvas2D
CSS3
Drag and Drop
File API
Geolocation
Microdata
Offline Applications
Server Sent Events (SSE)
SVG
Web Intents
Web Messaging
Web Storage
Web Sockets
Web Workers

The other technology that get associated with HTML5 is webGL. WebGL makes it possible to display amazing realtime 3D graphics in your browser.  WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D computer graphics and 2D graphics within any compatible Web browser without the use of plug-ins.

Useful online tools for development with HTML5

Usually modern browser differ in terms of support of HTML5 features. Whenever you publish a webpage it is a good practice to recommend the correct browsers that support all the features of your webpage. Inorder to do this you neednot manually check each feature but you can use tools which enable you to detect HTMl5 feature support in browser using simple javascript code.

The two widely used tools are:

·      Modernizer: provides a programmatic way to check for many HTML5 and CSS3 different features. In order to use modernizer, include the following code snippet in the <head>element of the webpage:

The below given code will help you to check canvas feature in your browser by using a if else statement

• Caniuse: It is extremely useful because it provides information about many HTML5 features in modern browsers. If you want check it out go through this site http://caniuse.com/.

Caniuse provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers. It gives detailed –Compatibility tables for support  of HTML5, CSS3, SVG and other technologies in various browsers.

Conclusion

You can see that HTML5 definitely provides awesome features that make your webpage lively. In addition the TAGs given by HTML5 make the process of developing web pages as easy as it can get! Hopefully, this article will start you thinking about how best to use HTML5 tags and provides enough examples to head you down the right path. You can proceed further to work on making your app capable enough to distinguish which orientation (portrait or landscape) is currently being used and this will require you to ake slight adjustments to how your page looks. There are so many more things that you can do to style your web page and make it interesting and meaningful.