Html5 (Hypertext Markup Language) is a considerable update to HTML, a markup language that comprises everything from structuring web applications to presenting content over the internet such as multimedia like photos, texts, videos, and forms whether for surveys or any other required purpose.

Fig-https://2.bp.blogspot.com/_opS9Z5vqQYQ/TTYrMHXNiRI/AAAAAAAAAVA/H0gJ2oCoBTg/s1600/html5_bg_no_icons.png

Features Of HTML5 Affecting Websites

Web Storage Improved and Secured

Ht(m)l5 put forwards two ways for storing data on the client-side, equivalent to ht(t)p cookies and overcoming the previously faced drawbacks that are-

  1. Every request to the web includes cookies which slows your web app by retransmitting similar data and also which is unencrypted.
  2. Cookies and store a maximum of 4KB of data, which is not enough to hold all the necessary information.

In order to solve these shortcomings Ht(m)l5 has 2 ways that are-

  • Session storage- Its aim is for instance in which user is performs one transaction while concurrently performing numerous transactions in distinct tabs/windows.
  • Local storage- Its function is for storing information that spans many windows and is persistent over the current session. For efficiency reasons, Web ap(p)s may prefer to keep MBs of users data over client area, such as full user-authored pages or a user’s mailbox. Cookies are ineffective in this situation because they have been sent with every request.

Canvas- add interactivity to your web pages

HT(M)L5 element <canvas> lets you draw pictures using JS in a simple but powerful way. You can use it to plot graphs, display photos or text with very complex as well as basic animation.

<canvas> is empty in starting. In order to show something, a script is used to get access over rendering context. It has a document object model (DOM for short) method known as getcontext () which obtains rend(e)ring context and its functi(o)ns. This function inputs one parameter only. Hence, it turns your lesser interactive pictures or videos to much more attractive animations.

Fig- https://i.ytimg.com/vi/qN0Ztk0lW30/maxresdefault.jpg

Embedding Multimedia in Websites

Native a(u)dio and v(i)deo playback is available in H(T)ML5 without requiring Flash. The H(T)ML5 <audio> & <video> tags make integrating multi-media files to a website with much ease. <source> (the src attribute) should be set so that it could identify m(e)dia source, and the control attributes should be included so that the user can play and pause the media.

V(i)deo formats- most popular v(i)deo form(a)ts are (O)gg and MPEG4.

A(u)dio Formats- frequently used a(u)dio form(a)ts are (O)gg, Mp3, & WaV.

Geolocation

It is now available in the majority of browsers and devices. It uses a totally new property of the global navigator called Geolocation object. You can send your l(o)cation to any website using the H(T)ML5Geolocation API.

JavaScript can take your longitudinal & latitudinal coordinates and send them to a backend server, which can then perform location-related filters such as discovering local shops or locating your position.

For example- You might visit a place & see google maps notifications popping on your smartphone which suggests a popular place in that area it can be a restaurant or mall. In a similar manner, you visit a restaurant or mall it will ask you about your experience of that place.

Fig- https://th.bing.com/th/id/OIP.1A4ijYnJxl7cNf6HAlZT8wHaDw?pid=ImgDet&rs=1

Microdata- increase click-through rates of websites?

It lets the user create their own editable components & begin incorporating unique characteristics into the web pages. It is mainly a set of names with value pairs at a very high level.

The main benefit is that it lets search engines index microdata tags & use that data to enhance their results listings which encourage higher click-through rates. That means the websites with good reviews or snippets will attract more users.

Drag and Drop

DnD (for short) is a versatile UI idea that allows users to easily alter the order, duplicate or copy & eliminate things by very little m(o)use clicking. It simply lets you drag an element by simply clicking over it & holding the object, then drop it over to a new position by releasing the button. Developers used to work with advanced js or its other frameworks like jQuery to enable dr(a)g & dr(o)p capability with standard H(T)ML4. Now, H(T)ML 5 have Dr(a)g & Dr(o)p API which adds the Dn(D) capability to the web-browser. Hence, programming becomes considerably smooth and thus reduces time as compared to html4.

Fig- https://th.bing.com/th/id/R.e079eb5bdbe672d72c1ba367dd2c0f36?rik=j6pnY9fc1%2b%2b4Nw&riu=http%3a%2f%2fb2b.cbsimg.net%2fblogs%2f03132013figure-a.gif&ehk=TqZSijPPzlReCsqlTOjUXU5k9osp3a%2b%2bdxRXH12ACnc%3d&risl=&pid=ImgRaw&r=0

Web Messaging- enabled, smooth and secure

The process of sending messages from the server then receiving them at the client end in real-time is called web messaging. It overcomes the difficulty of cross-domain communication in various ports and protocols. Before H(T)ML5, browsers did not let cross-site scripting as a security measure to protect against attacks which made barred exchange between non-hostile web pages and document sharing or interaction very difficult. But now messaging over the web is possible with a rudimentary level of security.

Web Workers – multiple tab browsing and multi-tasking is convenient

It makes it easier to run a script operation in the background thread separate from the main execution of a w(e)b a(p)p. Hence, all the laborious processes can be performed on a different thread without blocking or slowing the UI or main thread. It allows long task threads to execute without the need to keep the page on or responsive.

Cross-origin Resource Sharing

CORS (for short) is the method that lets restricted resources from any other d(o)main to be accessed in a w(e)b b(r)owser. It supports HTTP requests and it all(o)ws the w(e)b developer to use XMLHttpRequest, which helps in better error handling.

For example- sometimes we were asked to grant ac(e)ss to camera or microphone of our device by websites/web app, if only we all(o)w, then it has ac(e)ss otherwise not.

IndexedDB

It all(o)ws user to save data in their br(o)wser. It is very powerful than the local st(o)rage and ideal for apps that need a big volume of data to be stored. These apps can operate with more efficiency & can load faster. It works both online and offline means you can create web app with rich query without worrying about network availability, as your application can work both online and offline.

Leave a Reply

Your email address will not be published.

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