HTML means Hyper Text Markup Language. HTML5 is advanced hypertext markup language. It is one of the craze buzz word in the market. It was released in the year 2008. HTML5 is the fifth edition of the HTML requirement. It is not only a new version of HTML language improved with new elements and attributes. But it was popular from 2011 onwards and boom started 2014 onwards. It is complete enhancement of HTML 4.01.

The main goal behind the HTML5 is how to implement light weight web applications. To develop light weight web applications, there are several technologies available. However, there is only one hypertext markup language is there right now that is also at client side. This is popularly known as advanced hypertext markup language for all gadgets and widgets.

HTML5 is the latest developed and most improved version of the HTML model. Basically, it’s about expanding html/xhtml with newly added semantically large elements, attributes, behaviours, and a high set of technologies.

Those newly added functionalities enable the building of more diverse and powerful websites and applications. HTML5 is the fifth and current version of html. HTML5 original name is not HTML5, it is webapps 1.0. Later, webapps 1.0 is renamed as HTML5.

What is webapps 1.0?

In the year of 2004, group of organizations gathered to evaluate web standard started one organization that organization name is called WHATWG (Web Hypertext Application Technology Working Group). It is an organization started by three companies. The names of companies are Apple corporation, Opera organization, Mozella Firefox or Mozilla organization.

These three companies with the help of w3c, with the help of google support they launched WHATWG organization. In that organization one technology R&D started that is webapps. In the year of 2008, a great web scientist from google corporation popularly known as Ian Hickson introduced the webapps 1.0.

What is W3C and WHATWG

W3C-

W3C means World Wide Web Consortium. W3C is a main international standard organization for the World Wide Web (WWW). All the client-side technologies (e.g. HTML, CSS, JS) are maintained by W3C. Director of W3C is Timothy John Berners Lee (TIMBL). HTML was also invented by TIMBL.

This group is formed by group of software companies like IBM, Microsoft, Apple and AOL (American Online). W3C was formed in 1990’s.

WHATWG-

The new feature of HTML5 was suggested by WHATWG group. WHATWG means Web Hypertext Application Technology Working Group. It was founded in 2004 by Apple, Mozilla, Opera.


Evaluation of Markup language -

  1. GML- GML means Generalized Markup Language. It is designed by IBM to prepare their internal documents.
  2. SGML-It means Standard Generalized Markup Language. GML rules are modified as tags in SGML. First time markup tags are used in SGML.
  3. HTMI&XML- It inherits the rules from SGNL. HTML is used for data presentation. XML is used for data representation (data storage).

Versions of HTML -

Version Year
Tim Berners-Lee developed www 1989
Tim Berners-Lee developed HTML 1991
Dave Raggett designed HTML+ 1993
HTML Working Group specified HTML 2.0 1995
W3C Suggested HTML 3.2 1997
W3C Suggested HTML 4.01 1999
W3C Suggested XHTML 1.0 2000
HTML5 WHATWG First Public Draft 2008
HTML5 WHATWG Living Specification 2012
HTML5 W3C Final Suggestion 2014

What can you do with HTML5

By using HTML5, we can create web document more significantly to read (for Search Engines as well as for authors). We have several new tags in html5 like, audio, video, source etc. and by using these tags, we can create our webpage very easily.

We can also create brilliant web applications, mobile applications, and even browser created games using HTML5.

Features -

Below are the HTML5 new features -

  • Semantics: Describes more exactly what is our content.
  • Communicating: Describes a way of communicating with the server in latest ways.
  • Offline and storage: Describes to store data on the client side locally and operate offline data more efficiently.
  • Multimedia: Controls audio and videos display on web pages.
  • Graphics and effects: Describe a new graphic element including vector graphics and tags.
  • Drag and drop: Provides drag and drop flexibility to the developer for develop web pages in a more convenient way.
  • Geo graphical location: Describes a way to show the geo graphical location to the user.
  • Web storage facility: Represent web applications methods to stack data on web browser.
  • SQL: Provides SQL connectivity to the web application and defines to store data into the database and can access the data whenever required.
  • Canvas/SVG: Used to draw a different type like, rectangle, square, circle etc.
  • Doctype: Makes document type declaration easy i.e. <!doctype html>.
  • Performance and integration: Represent a high-speed optimization and better usage of computer hardware.
  • Device access: Describes usage of input and output devices.
  • New input element type: Input elements play a major/key role in data driven web applications. In html5, some new input types are introduced.
  • Editable content: Provides the facility to the end users where they can edit the html that controls content and it allows the web developers to build webpages including sections like html editor, notes etc.
  • Auto focus and placeholder attributes: Provides control to have the focus automatically on page load.
  • Required field and range validators: Provides to set a field is required on the webpage. Range validation is providing a flexibility to identify a value within the specified range or not.
  • Application cache: Provides information about activities performed and can have a flexibility of accessible without an internet connection.
  • Web workers: Designed to run a single tread environment, such as multiple scripts cannot run at the same time.
  • SSE: Handles updates from the server and results will appear on the web browsers.
  • Migration: Describes how to migrate easily html4 to html5.
  • Browser support: html5 supports all latest browsers.
  • Web forms 2.0: Web Forms 2.0 is an expansion to the form’s features found in HTML4. In html5, form elements and attributes provide a greater degree of semantic mark-up than HTML4 whereas in the html4 it is required free us from a great deal of tedious scripting and styling.
  • MathMl: html5 allows syntax of html for using MathMl elements inside a document <math>……. <\math> tag.
  • Micro data: Provide additional semantics in our web page.
  • Web messaging: Provides way for document to separate browsing context to share the data without Dom (document object model).
  • IndexDB: Provides flexibility to store data inside the user’s browser.
  • CROS: Allows the restricted resources from another domain in web browser.
  • Web RTC: Supports browser to browser for voice calling, video calling and p2p file sharing.

Structure of HTML5 document

Every HTML document starts with <html> tag and end with </html> tag. The content that we coded within the <html> tags is divided into two sections.

  1. Head section
  2. Body section
Structure of HTML5 document

  1. Head section -
    Background supported content coded in head. Content that is not directly display in the browser is specified in head section.
    E.g. title, style, script etc.
  2. Body section-
    Content that is display in browser window is coded in body section. Expect the head section tags remaining all tags are coded in body.
    E.g.<h1>, <p>, <mg>, <table> etc.

Example -

Below example describes how to display welcome message in HTML5.


<!DOCTYPE html>
<html>
 	<head>
  		<title>HTML5</title>
 	</head>
 	<body>
  		<h1>Welcome to HTML5</h1>
 	</body>
</html> 

Output -

Welcome to HTML5

New Elements added to HTML5 -

Tag Description
<article> Describes an article in a document.
<aside> Describes content aside from the page content.
<bdi> Separates a part of text that might be formatted in a several directions from other text outside it.
<details> Describes additional details that the user can appear or disappear.
<dialog> Describes a dialog box or window.
<figcaption> Describes a caption for a <figure> element.
<figure> Describes self-contained content.
<footer> Describes a footer for a document or section.
<header> Describes a header for a document or section.
<main> Describes the main content of a document.
<mark> Describes marked/highlighted text.
<meter> Describes a scalar measurement within a gauge.
<nav> Describes navigation links.
<progress> Describes the progress of a task.
<rp> Describes what to show in browsers that do not support ruby annotations.
<rt> Describes pronunciation of characters (for East Asian typography).
<ruby> Describes a ruby annotation (for East Asian typography).
<section> Describes a section in a document.
<summary> Describes a visible heading for a <details> element.
<time> Describes a date/time.
<wbr> Describes a possible line-break.
<audio> Describes sound content.
<canvas> Draw graphics, on the fly, via scripting (usually JavaScript)
<command> Used for identifying a command that the client can invoke.
<datalist> Specifies a list of pre-defined alternatives for input controls.
<embed> Describes a container for an external (non-HTML) application.
<hgroup> Used for describing the heading of an HTML document or section.
<keygen> Used to reference form data after the form has been presented.
<output> Specifies the result of a calculation.
<video> Describes video.

Removed elements from HTML5

There are many elements which are removed from HTML5 are listed below -

Removed elements Use instead elements
<acronym> <abbr>
<applet> <object>
<basefont> CSS
<big> CSS
<center> CSS
<dir> <ul>
<font> CSS
<frame>
<frameset>
<noframes>
<isindex>
<strike> CSS, <s> or <del>
<tt> CSS

New HTML5 API’s (Application Programming Interfaces)

The most important new API’s in HTML5 are-

  • Geolocation
  • Drag and Drop
  • Local Storage
  • Application Cache
  • Web Workers
  • SSE

Advantages -

  • Easy to use and implement.
  • Cleaner markup and improved code.
  • Offline application cache.
  • Cost effective cross-platform development.
  • Better page ranking.
  • Consistency across browsers.
  • Extension of video to wide range of platforms.
  • Geolocation.
  • Better user experience.
  • Mobile optimization.
  • All modern browsers are supported for HTML5.
  • HTML5 is more device friendly.
  • With the help of HTML5 in integration with CSS, JavaScript, etc., we can build beautiful websites.

Disadvantages -

  • Sometimes it is time consuming to be written long codes.
  • HTML5 will support only modern browsers.
  • Media licensing issues.
  • Multiple device responsiveness can be a headache.
  • HTML5 is always a work in progress.