HTML originated from a prototype created by Tim Berners-Lee in 1992. He felt that there was a possibility of linking documents together by the use of hypertext and the concept of HTML evolved. The drawback was that the commercial hypertext packages available at that time such as ZOG and Intermedia were customized to suit different types of computers and were too ambiguous in nature.
He developed HTML (HyperText Markup Language) and in conjunction, developed a protocol for accessing text from other documents via hyperlinks. The protocol was called HTTP, and this paved the way for the future. HTML itself was derived from a markup language called SGML (Standard Generalized Markup Language).
Standardization is an ongoing process. Modifications were made constantly and versions were released accordingly. The various versions of HTML that have been released are as follows:
HTML 2.0 (November 1995)
HTML 3.2 (January 1997)
HTML 4.0 (December 1997)
HTML 4.01 (December 1999)
A breakthrough in the field was the introduction of CSS along with HTML 4.0. Prior to the introduction of CSS, web designers and developers used HTML for formatting purposes. Formatting and styling a web page using HTML defeats the purpose of HTML, as HTML elements and attributes must only define the structure of the web page. The purpose of CSS was to break styling out from structural markup. With the introduction of CSS, we could separate presentation from content.
As a result, formatting could be separated from the HTML document and stored in a separate file, which could then be included in the document using a link tag. Hence, all the presentational HTML elements and attributes were replaced by CSS to provide versatility and better accessibility. Now, we can define a look or modify the look of a web page by making changes in the style sheet without actually altering the code.
As far as HTML is concerned, the latest version, which is HTML5, is still in the development stage. The Web Hypertext Application Technology Working Group (WHATWG) and the World Wide Web Consortium (W3C) are working together on HTML5. The proposed year for the release is around 2014.
HTML5 will soon be accepted as the benchmark. It differs from the previous versions of HTML in various ways. HTML5 works with modern browsers and also offers backward compatibility. HTML5 has a lot of new features that will change the approach in designing websites. Some of the features present in the older versions of HTML have been omitted from HTML5.
Let's take a look at the difference between HTML 4 and HTML5:
The document type declaration in HTML5 is very simple. All we need to do is type
<!DOCTYPE html>so that the browser can recognize that we will be working with HTML5.Character encoding in HTML5 is far simpler. Earlier it was written in the following manner:
<meta http-equiv="Content-Type" content="text/html; charset=UTF- 8">
In HTML5, it is written in the following way:
<meta charset="UTF-8">
Elements such as center, frame, frameset, and noframes have been omitted from HTML5. Key elements such as basefont, big, font, and blink do not exist in HTML5. All the things that have been omitted indicate that CSS will be used for styling purposes.
New elements have been introduced in HTML5. The new elements are as follows:
<header>
<footer>
<nav>
<section>
<aside>
<article>
We will look at these new elements in detail in the following chapters.
Attributes such as border, cellpadding, and nowrap to mention a few have been removed from HTML5 as their functionality can be handled better by CSS.
Since HTML5 is used extensively for web-based applications, modifications have been made in the present APIs and new APIs have been introduced. APIs have been developed for media elements such as audio and video. Drag-and-drop APIs and elements such as canvas have been included in HTML5. Facilities such as offline data storage, are a feature of HTML5 and APIs have been developed for this purpose.
Error handling is another feature of HTML5, which will make it easier to write valid HTML code. HTML5 has strict parsing rules to handle errors in the code.
Although it is still in the development stage, let's see why we should start using HTML5 right away.
HTML5 is still in the development stage. However, the following are the reasons why we must start implementing it right away.
The content becomes much more accessible with the use of tags such as aside, article, header, footer, and section. Earlier, there was no way to understand the
divelement in the code even if there was an ID assigned to it. That has changed after incorporating tags such as header, footer, and so on. HTML assists the developer in writing cleaner code. For example, copyright data can be indicated using the footer tag. It makes things much more systematic.We can embed audio and video, thereby eliminating the need for additional plugins. We can control the audio and video elements using HTML or JavaScript whereas the styling will be taken care of by CSS.
Web storage is an impressive feature of HTML5. The data is stored in the user's browser. This feature is of great use when we surf through e-commerce sites as user preferences can be stored on the browser.
We can develop offline applications with HTML5. In this case, the user can access the application offline and also sync the data back with the remote server once he is back online.
HTML5 is extensively used to develop mobile web applications. Tablets and mobile web applications are in vogue. For example, HTML5, along with JQM (jQuery for Mobiles), is used for developing complex mobile applications. The look of a web-based application on a mobile phone or tablet is different than that on a desktop computer. Most of the latest browsers (such as Google Chrome, Safari, Opera, Mozilla Firefox, IE9) support HTML5. HTML5 offers cross-browser compatibility and hence, it is the markup language of the future. HTML5 is not compatible with earlier versions of IE but there is a workaround for that. We can add a JavaScript Shiv to the code, which will make the browser aware of HTML5. JavaScript Shiv, created by Remy Sharp, is found on Google codes and can be included in the HTML document header in the following manner:
<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
An advantage of HTML5 is that it includes form-related attributes that provide enhanced functionality. Earlier we had to use JavaScript for this purpose. HTML5 has new elements and attributes that support the input type and form elements. For example, we have date pickers and also input types such as e-mail which account for entry of e-mail addresses.
There are some misconceptions about HTML5. Let's look at some of the myths and facts surrounding HTML5:
We need to understand that HTML5 is not a replacement for Flash. We can embed audio and video in HTML5 but to think that it will replace Flash is a myth. Some things can be easily done in Flash than in HTML5. For example, live video streaming is not possible with HTML5.
Another misunderstanding is that HTML5 is still in the nascent stage and cannot be used. One has to understand that standardization is an ongoing process. However, HTML5 has a lot of impressive features that would encourage any web designer to use it. Moreover, browsers are getting updated regularly and the latest versions of some of the browsers already support it.
HTML5 works well with IE (Internet Explorer). That IE and HTML5 are not compatible at all is a myth. It is true that versions prior to IE9 are not fully compatible with HTML5, however, developers can always write a fallback code in such situations. Browsers are coming out with their latest versions quite frequently and IE9 already supports it.
Most people assume that CSS comes along with HTML5. However, that is not true. CSS is used for styling and presentation whereas HTML5 deals with content. An HTML page without CSS will be good enough to use but might not look that good in terms of presentation.
One more misconception is that HTML5 does not have a development environment. We can create an HTML file with just a simple text editor. However, as a developer, we can definitely use an integrated development environment (IDE) such as Eclipse, Visual Studio, or even Dreamweaver CS5 to work with HTML5.
Note
Suppose we add <!DOCTYPE html> to the code, do you think that it would become an HTML5 code? My answer would be a firm "No". HTML5 is not just some kind of a document type. HTML5 has a lot of new elements, attributes, input types, and so on. It is a whole set of rules that enables the developer to define a web page in an impressive manner.