01 - Introduction to HTML5

HTML5 Introduction

HTML5 has become popular in a very short span of time and it changed the way people design webpages and develop web applications. HTML5 is the latest version of HTML (Hyper Text Markup Language) though it is not completely new. Since its introduction, HTML has been updated and released under new version names. In fact, many of HTML5 specifications came from its previous version, HTML4. Learning HTML5 is really easy if you know the basics of HTML.

HTML5 History

In the early 1990s, Tim Berners Lee, an English computer scientist, came up with the first version of HTML in a document called HTML tags. It was a very simple design of HTML with just 18 elements. The surprising fact is that 11 out of those 18 elements still exist in HTML4. In 1995, Internet Engineering Task Force (IETF) completed HTML 2.0 and it was the first HTML specification intended to be treated as a standard for future implementations.

Since 1996, World Wide Web Consortium (W3C) have been maintaining HTML specifications. HTML 3.2 was published in January, 1997 and HTML 4.0 was published in December 1997, both as W3C Recommendations. In addition to W3C, another organization named Web Hypertext Application Technology Working Group (WHATWG) has also been involved in HTML5 development. Though HTML5 has been into existence since 2008, it was published as a W3C Recommendation in October 2014.

What is New in HTML5?

As there are different versions of HTML, tThere should be some mechanism to tell the browser that we are using the latest version of HTML, HTML5. It is made possible with DOCTYPE declaration. You need to add the following line of declaration as the very first line of your HTML file if you plan to use HTML5.

<!DOCTYPE html>

HTML5 Code Sample:

<!DOCTYPE html>

<html>

<head>

<title>Basic HTML5 Document</title>

</head>

<body>

<p>My first HTML5 page</p>

</body>

</html>

New Elements, Attributes and Events in HTML5

In this tutorial series, we are going look at elements, attributes, events and APIs that are newly introduced in HTML5 in detail. There are a number of new semantic elements, form elements and some other elements (miscellaneous) introduced in HTML5. Some of the new semantic elements include <header>, <footer>, <article>, <section>, <aside> and <nav>. Examples of new form elements are <datalist>, <keygen> and <output>. Some other newly added elements include <canvas>, <svg>, <audio> and <video>. In addition to this, many new input types also have been introduced and some of them include color, date, email, range, search, url and tel.

The main advantage of HTML5 elements is that most HTML5 tags have a corresponding DOM API which you can use to deal with the corresponding element using JavaScript. For example, the <audio> element has a corresponding DOM API using which you can play, pause or mute the audio, know the length of the video and everything else you require to provide a rich and unique audio experience to your users.

HTML5 has introduced a set of attributes which make the whole process of form validation lot simpler and easier. Some of the new input attributes are autocomplete, autofocus, multiple, pattern, placeholder, list, min, max and required.

Considering the wide variety of actions that can happen in a webpage, HTML5 has come up with a lot more events compared to HTML4. Some of them include ondrag, ondrop, ondragstart, ondragend, ondragenter, ondragleave, ondragover, onunload, onplay, onvolumechange, onprogress and so on. We will have a look at all these in detail in the following chapters.

HTML5 APIs

In addition to the new elements, input types, events and attributes, HTML5 also has a number of new APIs that make HTML5 really magical and unique. You can use the Geolocation API to locate the user’s position and drag/drop API to grab an object and drop it into a different location. With Application Cache, you can access a cached application even without an Internet connection. It is really cool. Isn’t it?

HTML5 Support

You might now be so excited to start with HTML5 and make your web development experience really unique. One thing you need to make sure is that you need to have latest browser version to run HTML5 code because older browsers do not support HTML5 features. Again, HTML5 is not a one big thing. Instead, it is a collection of HTML5 features. So, your browser might support many HTML5 features and might not support some HTML5 features. However, the happy news is that HTML is already well supported by most of the browsers.

Of course, HTML5 is built on HTML4 removing some of the unwanted features, adding some new elements and also enhancing some existing features. So, if you have a website or web application worked in HTML4, you do not have to worry of redeveloping it. It will work perfectly in HTML5 as well. The benefit is that you can improve your website with the new HTML5 elements or attributes if you want. Most of the times, upgrading to HTML5 is as simple as changing your doctype. Just changing the doctype will not break your existing site because deprecated (removed) elements will still render in HTML5.

Summary

HTML5 has become so popular not only because of the enhanced elements or APIs, but also due its capability to use for mobile website and mobile web app development. In this tutorial series, we are going look at new HTML5 elements, attributes, events and APIs in detail. Once you complete this tutorial series, you will be in a position to develop wonderful and really useful websites and web applications using HTML5.