HTML 5 | HTML vs HTML 5

27th March 2019 Harshvardhan Mishra

HTML 5

(formerly and commonly spelled HTML5) is a software solution stack that defines the properties and behaviors of web page content by implementing a markup based pattern to it. HTML 5 is the fifth and current major version of the HTML standard, and subsumes XHTML. It currently exists in two standardized forms: HTML 5.2 Recommendation by the World Wide Web Consortium (W3C, a broad coalition of organizations), intended primarily for Web content developers; and HTML Living Standard by WHATWG (a small consortium of four browser vendors), intended primarily for browser developers, though it also exists in an abridged Web developer version.

What is HTML ?

HTML or Hyper-Text Markup Language can be referred to as the Worldwide Web’s primary language. Most of the web pages hosted on the internet are written in some variation of HTML. Via HTML, developers ensure exactly how multimedia, text, and hyperlink among other things get displayed in web browsers. From the elements that establish connections with your document (hypertext) to the ones that make these documents interactive (e.g. forms); all are constituents of HTML.

What are the main differences between HTML and HTML5

HTML5 was released with the primary objective of improving the World Wide Web experience for the developers and the end users. As already mentioned, the biggest advantage that HTML5 has over its unnumbered predecessor is that it has high-level audio and video support which was not a part of the version specifications in previous HTMLs. Here we are providing some differences between HTML and HTML5.

SVG, canvas and other virtual vector graphics are supported in HTML5, whereas in HTML, using vector graphics was only possible by using it in conjunction with different technologies lke Flash, VML, and Silver-light, etc.
HTML5 uses web SQL databases, application cache for temporary storing data, meanwhile, in HTML, only browser cache could be utilized for this purpose.
Another difference between HTML and HTML5 worth mentioning is that the former doesn’t allow JavaScript to run within the web browser (it instead runs in the browser interface thread) whereas the latter provides full support for JavaScript to run in the background (This is possible courtesy to the JS web worker API of HTML5).
HTML5 is not based on SGML, and that allows it to have improved parsing rules which provide enhanced compatibility.
In HTML5, inline MathML and SVG can be used in text whereas this wasn’t possible in HTML.
Some of the deprecated elements that have now been dropped completely are: isindex, noframes, acronym, applet, basefont, dir, font, frame, frameset, big, center, strike, tt.
HTML5 supports new kinds of form controls, for example: dates and times, email, number, range, tel, url, search etc.
There are many new elements introduced in HTML. Some of the most important ones are: summary, time, aside, audio, command, data, datalist, details, embed, wbr, figcaption, figure, footer, header, article, hgroup, bdi, canvas, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, track, video.

Advantages for Developers

Here I am trying to explain some advantage that provide by HTML 5 for developers.

Persistent error handling:
Most of the browsers have the support to parse structurally/syntactically incorrect HTML code, but until a few years ago, there was no standardized process to handle this. It meant that new browser developers had to perform malformed HTML document tests in different browsers in the bid to create improved error handling processes via the marvels of reverse engineering.
Enhanced support for web application features:
HTML5 provides developers with enhanced control of their websites’ performance. In the past, the developers had to use workarounds because many server-side technologies and browser extensions were not present. Now, with HTML5, there is no use to employ any JS-based or Flash work-around (as previously done in HTML4) because there are elements inherently present in HTML5 that provide all the functionalities.
Mobile web made easier:
Mobile users increases everyday. End users want to be able to access a web resource at any time and via any device which makes having responsive websites a requirement. HTML5 has made mobile support a lot simpler by being able to cater to the low-powered electronic devices like tablets and smartphones.
The canvas element:
HTML5 has the <canvas> element. Using the canvas element, a developer can draw graphics using different colors and shapes by making use of scripts (e.g. JavaScript). It’s worth mentioning that canvas is merely a graphic container and to define the graphics, a script has to be executed. Even though many websites still use Flash, HTML5 has got the preference of many people, and it’s believed that soon Flash will run completely obsolete.
```
<canvas id=”TestCanvas” width=”200″ height=”100″></canvas>
var c = document.getElementById(“TestCanvas”);

var context = c.getContext(“2d”);

context.fillStyle = “#FF0000”;

context.fillRect(0,0,140,75);
```
The Menu element:
HTML 5 added <menu> and <menuitem> elements are constituents of the interactive elements specifications but aren’t often used or talked about by the developer community. However, these two items can be used to ensure enhanced web interactivity.
```
    <body contextmenu=”new-menu”>

    <menu id=” new-menu” type=”context”>

    <menuitem>Hello!</menuitem>

    </menu>
   </body>
```
Customizable Data Attributes:
Now You can add Custom attributes. It was possible to add custom attributes before HTML5, but it was a risky affair.
Cookies were (or should be) bid adieu:
If developers wanted to store anything, they had to make use of cookies. Cookies can hold a small amount of data (not to mention, everybody hates them) and this made the localStorage object’s addition to HTML5 an even more welcome benefit. The localStorage object is a part of the global window namespace and can be accessed from wherever desired while using scripts.

Advantages for End User

Here Some of the many advantages that it provides the end users are:

you already knows that Mobile browsers now crash a lot less frequently than the native application. This wasn’t the case before, when there wasn’t enough mobile web development support provided by HTML.
The reliance on mobile websites is very high as almost 30 percent of mobile users detest downloading applications. So now if a user wants to use company’s services but doesn’t want to download their application, they can just log on to the company’s responsive website to do so.
The eradication of the need to use Adobe Flash allows developers to provide an aesthetic graphic-rich user experience. The use of JavaScript and MPEG4 in conjunction with HTML5 has made life a lot better for users.
The ability to support native audio and video elements means that the users won’t have to download additional plugins to view multimedia on your website. This rich media support provided by HTML5 is one of the biggest reasons why it’s used a lot more frequently than HTML in the world of today.

Whats NEW!

Indexeddb

The indexeddb is a new HTML5 concept to store the data inside user’s browser. indexeddb is more power than local storage and useful for applications that requires to store large amount of the data. These applications can run more efficiency and load faster.

Why to use indexeddb?

The W3C has announced that the Web SQL database is a deprecated local storage specification so web developer should not use this technology any more. indexeddb is an alternative for web SQL data base and more effective than older technologies.

Features

it stores key-pair values
it is not a relational database
IndexedDB API is mostly asynchronous
it is not a structured query language
it has supported to access the data from same domain

Cors

Cross-origin resource sharing (CORS)

is a mechanism to allows the restricted resources from another domain in web browser. For suppose, if you click on HTML5- video player in html5 demo sections. it will ask camera permission. if user allow the permission then only it will open the camera or else it doesn’t open the camera for web applications.

Web Messageing

Web Messaging is the way for documents to separates browsing context to share the data without Dom. It overrides the cross domain communication problem in different domains, protocols or ports. For example, you want to send the data from your page to ad container which is placed at iframe or voice-versa, in this scenario, Browser throws a security exception. With web messaging we can pass the data across as a message event.

Web RTC

Web RTC introduced by World Wide Web Consortium (W3C). That supports browser-tobrowser applications for voice calling, video chat, and P2P file sharing.

WebSockets

WebSockets is a next-generation bidirectional communication technology for web applications which operates over a single socket and is exposed via a JavaScript interface in HTML 5 compliant browsers. Once you get a Web Socket connection with the web server, you can send data from browser to server by calling a send() method, and receive data from server to browser by an onmessage event handler.

How to Learn HTML 5

I hope you like this post. Do you have any questions? Leave a comment down below!

Thanks for reading. If you like this post probably you might like my next ones, so please support me by subscribing my blog.

You may like also: