Web Development Basics: What is the Difference Between HTML and HTML5?

Being web developers, we talk a lot about HTML and HTML5 and anything related to it. We also know that HTML has been the primary and the standard web development technology for more than two decades.

Let’s begin by brushing up the basics. HTML is the acronym for HyperText Markup Language. It is the primary markup language used for static or dynamic web pages while HTML5 is the latest version of HTML.

To dive a little deeper into the difference between HTML and HTML5, we will begin with a brief history of HTML and then move on to their features and comparisons.

A Brief History of HTML

Like every being and every human creation, HTML has had been through a roller-coaster ride in its two-decade-long lifespan. The language has evolved from a simple language with a small number of tags to a complex system of markup.

With the help of several people, companies and organizations, HTML has generated many offsprings, namely, HTML+, HTML 2, HTML 3.2, HTML4 and finally HTML5. The HTML that we use today has been developed from a prototype written by Tim Berners-Lee in 1992.

In 1989, Tim Berners-Lee invented the Web with HTML as its publishing language. It was at CERN, the European Organization for Nuclear Research, where the World Wide Web was born. Initially, HTML was based on Standard Generalized Markup Language (SGML), a standard for marking up text into structural units like paragraphs, lists, etc. in a document.

However, with the evolution of the World Wide Web (WWW), HTML began to proliferate and rapidly dispersed its roots into the mainstream. Soon, the browser war began and various companies started to create their own browsers. As a result, HTML became fragmented and some web pages appeared fine in one browser but not in another.

In 1994, the Internet Engineering Task Force (IETF) created an HTML Working Group. This resulted in the birth of HTML 2.0 in September 1995 followed by HTML 3.2 in January 1997, HTML 4.01 in December 1999, HTML5 in October 2014 and HTML5.1 in November 2016.

The World Wide Web Consortium was formed in late 1994 with the purpose of fulfilling the potential of the Web through the development of open standards. HTML4 is approved and ratified as a standard language for creating web pages and web applications by the W3C for more than 10 years now.

Although we have newer versions of HTML, but HTML4 still remains the standard markup language for the web. In this blog, our focus will remain on HTML5 and its difference with HTML. I will address your information needs on the latest version of HTML (i.e. HTML 5.1) in a separate blog post later in the near future.

Well, let me clarify now; in this article when we talk about the difference between HTML and HTML5, we will essentially be discussing the difference between HTML4 and HTML5.

Before we proceed further into the comparisons of HTML and HTML5, let’s know a little more about HTML5.

What is HTML5?

Although HTML4 is still a W3C standard for web browsers and applications, it does not fully cater to the changing trends of the web industry. Therefore, HTML5 has been created with the purpose to cope up with the new difficulties or needs that are emerging in the web industry.

HTML5, the fifth version of HTML, is a cooperation between the W3C and the Web Hypertext Application Technology Working Group (WHATWG). It is a core technology of the Internet that was originally proposed by Opera Software.

HTML5 is a markup language utilized for structuring and presenting content on the World Wide Web. Released in October 2014, HTML5 was developed with the intent to improve the language with support for the latest interactive multimedia, while keeping it both readable by humans and seamlessly understandable by computers and web devices.

The new language incorporates features like video playback, drag-and-drop, etc., which were not present on the previous version and we had to depend on third-party browser plug-ins such as Adobe Flash, Google Gears, and Microsoft Silverlight.

HTML5 Features

HTML5 incorporates several new features in comparison to the previous versions of HTML. It includes detailed processing models to energize more interoperable usage; it extends, enhances and rationalizes the markup available for archives, and provides markup and application programming interfaces (APIs) for complex web applications.

HTML5 is also a contender for cross-platform mobile applications as the newly incorporated features in the latest version of HTML are designed to cater to the low-powered devices. Let’s have a look at some of the most interesting features of HTML5.

New Features:

HTML and HTML5 have a lot in common. However, being a newer version, HTML5 has a few new features incorporated in it:

New Semantic Elements − HTML5 includes a few content-specific elements like <header>, <footer>, <article>, <nav>, and <section>.

Forms 2.0 − HTML5 incorporates improved versions of HTML web forms, which introduces new attributes for <input> tag.

Persistent Local Storage − HTML5 supports local storage without the need to depend on  third-party plugins.

WebSocket − This is a next-generation bidirectional communication technology meant for web applications.
Server-Sent Events − HTML5 brings in events, called Server-Sent Events (SSE), which flow from the web server to the web browsers.

Canvas − A new element that supports two-dimensional drawing and can be programmed with JavaScript.
Audio and Video − HTML5 allows embedding audio or video on web pages without the need of using any third-party plugins.

Geolocation − HTML5 supports geolocation tagging enabling visitors to share their physical location via their web applications.

Microdata − This feature allows you to extend your web pages with custom semantics by creating custom vocabularies beyond HTML5.

Drag and Drop − HTML5 lets you drag and drop items from one location to another location on the same web page.

Removed Elements

HTML5 has evolved to cope up with the changing trends of the web. A few elements that existed in HTML4 have been removed in this version of HTML.

The following are some HTML4 elements that have been removed in HTML5:

Removed Element Changed To
<basefont> CSS
<applet> <object>
<big> CSS
<center> CSS
<font> CSS
<frame>
<dir> <ul>
<noframes>
<strike> CSS, <s>, or <del>
<frameset>
<tt> CSS
<acronym> <abbr>

HTML vs HTML5: The Difference

HTML has been evolving continuously since it was introduced in the early 1990s. So far in this article, we have acquainted ourselves quite well with HTML5. Now we know the purpose of its birth and we are also aware of its important features that mark its evolution.

In this section, I will take you through the key differences between HTML and HTML5 to help you understand and compare the features of both the markup languages easily.

So, here follow the key elements that mark the difference between HTML and HTML5:

DOCTYPE

HTML (rather HTML4) is based on SGML and has a DOCTYPE, which is comparatively longer. On the other hand, HTML5 boasts of a simple DOCTYPE declaration.

Audio and Video

HTML4 does not include audio and video specification. Therefore, it necessitates the use of third-party plugins to embed audio and video on web pages. Being an enhanced version of HTML4, HTML5 includes audio and video specifications as an integral part of its features.

Vector Graphics

HTML requires third-party technologies like  VML, Silverlight, Flash, etc. for vector graphics while HTML5 allows embedding vector graphics, e.g. SVG.

GeoLocation

In HTML4, it is difficult to detect the accurate geolocation of users when browsing web pages (especially on mobile devices). When it comes to HTML5, the JS GeoLocation API helps identify the true location of users browsing any website.

Temporary Storage

HTML uses cookies or browser cache as temporary storage while HTML5 provides local storage in the form of Application Cache, Web SQL database, and Web storage.

JavaScript Compatibility

HTML4 does not allow JavaScript to run in a browser. On the other hand, HTML5 has JS Web worker API, which allows JavaScript to run in the background.

Schema Attribute

The <meta> tag in HTML4 has an attribute called schema that defines the outline of the document. However, this tag has been removed in HTML5.

Browser Compatibility

Being the standard markup language, HTML4 works seamlessly with all old browsers. However, most of the modern web browsers, now, have begun to support HTML5 specifications.

So, What Are The Key Takeaways?

Well, as a native of the information technology era we know how a new technology or tool springs up every day. Therefore, it will be like competing with the Dodo, if we do not keep ourselves updated.

However, being up-to-date does not imply forgetting the past. The difference between HTML and HTML5 lies in the subtleties of the emerging tech trends. HTML5 borrows heavily from HTML4 and retains many of its features. Hence, it is essential to be adept in HTML while acquiring the skills to use the new elements and features of HTML5 and other subsequent versions of HTML.

One thought on “Web Development Basics: What is the Difference Between HTML and HTML5?

Leave a Reply

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

CAPTCHA

*

About SpringPeople

Founded in 2009, SpringPeople is a global corporate training provider for high-end and emerging technologies, methodologies and products. As master partner for Pivotal / SpringSource, Elasticsearch, Typesafe, EMC, VMware, MuleSoft and Hortonworks, SpringPeople brings authentic, Certified training, designed and developed by the people who created the technology, to Corporates and Development/IT Professionals community in India. This makes SpringPeople an exclusive master certified training delivery wing, and one of the hand-picked few global partners, of these organizations - delivering their immensely popular, high-quality Certified training courses in India – for a fraction of what it costs globally.

Posts by SpringPeople