The HTML5 logo was introduced by W3C in 2010 Defining HTML5

The Difference between HTML5 Family & specification HTML5 family is a combination of – new html mark up tags, CSS3 properties, JavaScript, And several supporting but technically separate technologies such as Geolocation, Canvas, Web storage, Audio, Video etc., (ongoing still) HTML5 Specification is the new markup elements (that provide syntax(the organization of words which provide the structure of the language, just like meaningful words make up a sentence) that work in conjunction with traditional HTML tags.

Timeline of HTML5 HTML5 started as a Web app that shared features with existing browsers and proposed new features including APIs that form the web family. Near completion in 1998 – HTML4 with CSS and JavaScript was used successfully by Web Designers and Developers for years. HTML4 was ended by W3C by starting XHTML which was very similar but stricter in language for example, correct grammar as apposed to slang. XHTML borrowed heavily from XML but still didn’t meet the needs of web developers in several technical areas. In 2004 – WHATWG (Web Hypertext Application Technology Working Group) was formed to create better HTML designed to build new and compatible Web apps with existing browsers.

What’s so special about HTML5? HTML alone could not play audio and video without browser plugin such as Flash or Quicktime HTML had no ability to store data on a user’s computer without a scripting language or another technology. HTML did not have a drawing format; graphics and animations were supplied as image files through plugins such as Flash, Java, or Silverlight. Growing expectations for web browsers to multi task at high performance has rendered the current HTMLanguage limited.

Let’s compare (an overview) In the old html for example, the code that defines the head of a web page would appear as follows – <div id=“header”> This is my header </div> The code in red is referred to as CSS Id that defines the width, height and background color of the header and if you wanted to style the header in CSS, you would code it as follows – #header { width: 960px; height: 100px; background-color: gray; }

Let’s compare cnt’d <header> This is my header </header> In the new HTML5 for example, the code that defines the head of a web page would appear as follows – <header> This is my header </header> And if you wanted to style the header in CSS, you would code it as follows – header { width: 960px; height: 100px; background-color: gray; } Refer to page 14 of chapter 1 for a detailed explanation of CSS

Now, for the key additions to HTML5 syntax The HTML5 specifications now include tags that let you incorporate multimedia without browser plugins. The <video> and <audio> tags let you embed the code as you do with the <img> tag. The <canvas> tag could supply HTML with native drawing and animation format, currently found in Flash movies. Refer to page 15 of chapter 1 for a complete audio and video tags.

Now, for the key additions to HTML5 syntax – cnt’d With Forms, currently all problems are solved with JavaScript or another scripting however, the new Web Forms in HTML5 will make working with forms easier with a simple code as follows <input type=“email” required> <figure> and <figcaption> elements are used to label images on your pages. The <nav> element easily groups a set of navigation elements into a logical section. New tags to address the <i>, <b>, <small>, <strong> and <abbr> now have new meanings and uses in HTML5.

HTML5 APIs and supporting technologies APIs (Application Programming Interfaces) are very significant in the world of HTML5. APIs are the means with which applications are created using pre-built components and are not unique to web development or even to scripting languages. You’ve most likely already used APIs as an end user on Twitter or YouTube

HTML5 APIs and supporting technologies Cnt’d The official documentation for these APIs are separate from the official documentation of HTML5 . To examine code examples visit the following sites – Drag and Drop https://developers.whatwg.org/dnd.html#dnd Web Storage https://html.spec.whatwg.org/multipage/webstorage.html Microdata https://developers.whatwg.org/microdata.html#microdata Geolocation http://dev.w3.org/geo/api/spec-source.html#introduction

Web Workers is another API, grouped into the HTML5 family. HTML5 APIs and supporting technologies cnt’d Web Workers is another API, grouped into the HTML5 family. Web Workers are scripts that run on a separate thread than user interaction of clicking, scrolling and dragging. This separate processing of tasks creates a more seamless environment for the user. Web Workers are a fairly new development and not yet supported by all browsers.

HTML5 APIs and supporting technologies cnt’d Web storage has been improved in more powerful ways. For example, browser cookies let websites store small pieces of data on your computer system for faster retrieval next time. Cookies are limited in what they can do and not very easy for designers to use. Web Storage updates the model to allow for greater storage space for modern applications Web Storage makes the addition of storage features more accessible in two ways via localStorage and sessionStorage.

HTML5 and CSS cnt’d CSS or cascading style sheet is a coding program that is different and yet closely related to HTML5. CSS is an evolving language, identified by version numbers, with the latest version of CSS (3.0) having evolved alongside HTML5. In the past Flash was used to animate objects in the browser. CSS3 transitions along with HTML5 Canvas can now help create interactive and animated elements on a page. CSS transform property allows, rotation, scaling, skewing of objects on a page. CSS backgrounds, borders, RGBa colors, gradients, drop shadows allow visual enhancements to the style. Web developers and designers had limited choice in font-faces however, with @font-face web fonts, they can specify a particular font, provide a source link to allow the browser to download it.

Technologies behind HTML5 are in transition and might be available one day and be replaced with another, next. In addition, each of the major browsers today such as Microsoft Internet Explorer or IE, Mozilla Firefox, Apple Safari, Google Chrome and Opera have different support for HTML5 features. Launch Safari, Firefox and Chrome one at a time, copy and paste the link below in the url box to test how compatible each browser is with HTML5 today. https://html5test.com/ HTML5 is in transition

HTML5 in complete use today Mobile devices and smartphones are active platforms for HTML5 docs and web applications today. More and more platforms are having to conform to HTML5 because of user demand and higher expectations for high performance.