Html5 (Hypertext Markup Language) is a significant update to HTML. This markup language comprises everything from structuring web applications to presenting content over the internet, such as multimedia like photos, texts, videos, and forms 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-
- Every request to the web includes cookies which slow your web app by retransmitting similar data unencrypted.
- Cookies store a maximum of 4KB of data, which is insufficient to hold all the necessary information.
To solve these shortcomings, Ht(m)l5 has two ways that are-
- Session storage- Its aim is, for instance, to which the user to perform one transaction while concurrently performing numerous transactions in separate tabs/windows.
- Local storage- Its function is 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 areas, such as total 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 and display photos or text with very complex and basic animation.
<canvas> is empty in starting. A script is used to get access to render context to show something. It has a document object model (DOM for short), which obtains rendd(e)ring context and its function(o)ns. Hence, it turns your less interactive pictures or videos into attractive animations.
Fig- https://i.ytimg.com/vi/qN0Ztk0lW30/maxresdefault.jpg
Embedding Multimedia on 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, & WV.
Geolocation
It is now available in the majority of browsers and devices. It uses a new property of the global navigator called the 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, performing location-related filters such as discovering local shops or locating your position.
For example- You might visit a place & see google maps notifications popping up on your smartphone, which suggests a popular spot in that area; it can be a restaurant or mall. Similarly, if 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 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, encouraging higher click-through rates. That means 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, copy & eliminate things with little m(o)use of clicking. It lets you drag an element by simply clicking over it & holding the object, then drop it 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.
Web Messaging- enabled, smooth and secure.
The process of sending messages from the server and 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(TML5), browsers did not let cross-site scripting be a security measure to protect against attacks.
Web Workers – multiple tab browsing and multi-tasking are 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 central line. 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 limited resources from any other d(o)main be accessed in a w(e)b b(r)owner. It supports HTTP requests, and it all(o)ws the w(e)b developer to use XMLHttpRequest, which helps better error handling.
For example- sometimes we were asked to grant ac(e)ss to the camera or microphone of our device by websites/web apps. If only we all(o)w, then it has ac(e)ss otherwise.
IndexedDB
It all(o)ws users to save data in their br(o)wise. It is mighty than the local st(o)rage and ideal for apps that need a significant 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 a web app with rich queries without worrying about network availability, as your application can work both online and offline.
