Part-1: HTML5-Getting Started!

See the video of Part-1:HTML5 Getting Started! 


 Introduction
HTML5 is a markup language used for structuring and presenting content on the World Wide Web. It was finalized, and published, on 28 October 2014 by the World Wide Web Consortium (W3C).This is the fifth revision of the HTML standard since the inception of the World Wide Web. The previous version, HTML 4, was standardized in 1997. Its immediate predecessors was HTML 4.01. HTML5 is a response to the fact that the HTML and XHTML in common use on the World Wide Web have a mixture of features introduced by various specifications, along with those introduced by software products such as web browsers and those established by common practice.
The core aims of HTML5 is to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc. HTML5 is intended to subsume not only HTML 4, but also XHTML 1 and DOM Level 2 HTML.

HTML5 is a great evolution in modern technology in such a way that HTML5 is not bounded only for web technology it create a way to develop for mobile platform such as mobile websites and mobile applications for Android, Windows Phone, Firefox OS, Sailfish OS, Tizen, and Ubuntu Touch. It’s also introduced many awesome feature like Offline Web Storage, GeoLocation API, Canvas Drawing, CSS3, and many more.

HTML History
Since the early days of the web, there have been many versions of HTML:
Version
Year
Tim Berners-Lee invented www
1989
Tim Berners-Lee invented HTML
1991
Dave Raggett drafted HTML+
1993
HTML Working Group defined HTML 2.0
1995
W3C Recommended HTML 3.2
1997
W3C Recommended HTML 4.01
1999
W3C Recommended XHTML 1.0
2000
HTML5 WHATWG First Public Draft
2008
HTML5 WHATWG Living Standard
2012
HTML5 W3C Final Recommendation
2014


Tim Berners-Lee invented the "World Wide Web" in 1989, and the Internet took off in the 1990s.
From 1991 to 1998, HTML developed from version 1 to version 4. 
In 2000, the World Wide Web Consortium (W3C) recommended XHTML 1.0. 
The XHTML syntax was strict, and the developers were forced to write valid and "well-formed" code.
In 2004, WHATWG (Web Hypertext Application Technology Working Group) was formed in response to slow W3C development, and W3C's decision to close down the development of HTML, in favor of XHTML.
WHATWG wanted to develop HTML, consistent with how the web was used, while being backward compatible with older versions of HTML.
In the period 2004-2006, the WHATWG initiative gained support by the major browser vendors.
In 2006, W3C announced that they would support WHATWG.
In 2008, the first HTML5 public draft was released.
In 2012, WHATWG and W3C decided on a separation: WHATWG will develop HTML as a "Living Standard".
A living standard is never fully complete, but always updated and improved. New features can be added, but old functionality can not be removed.
The WHATWG Living Standard was published in 2012, and is continuously updated.
W3C will develop a definitive HTML5 and XHTML5 standard, as a "snapshot" of WHATWG.
The W3C HTML5 recommendation was released 28 October 2014.

Features

HTML5 is the latest evolution of the standard that defines HTML. The term represents two different concepts:

It is a new version of the language HTML, with new elements, attributes, and behaviors,

and a larger set of technologies that allows more diverse and powerful Web sites and applications. This set is sometimes called HTML5 & friends and often shortened to just HTML5.
Designed to be usable by all Open Web developers, this reference page links to numerous resources about HTML5 technologies, classified into several groups based on their function.

v  Semantics: allowing you to describe more precisely what your content is.
v  Connectivity: allowing you to communicate with the server in new and innovative ways.
v  Offline and storage: allowing webpages to store data on the client-side locally and operate offline more efficiently.
v  Multimedia: making video and audio first-class citizens in the Open Web.
v  2D/3D graphics  and effects: allowing a much more diverse range of presentation options.
v  Performance and integration: providing greater speed optimization and better usage of computer hardware.
v  Device access: allowing for the usage of various input and output devices.
v  Styling: letting authors write more sophisticated themes.

Markup

HTML5 introduces elements and attributes that reflect typical usage on modern websites. Some of them are semantic replacements for common uses of generic block (<div>) and inline (<span>) elements, for example <nav> (website navigation block), <footer> (usually referring to bottom of web page or to last lines of HTML code) and so on.
 <audio>and <video> instead of <object> as multimedia element. 
It also introduced some graphics feature through <svg> and <canvas> tags.
It’s also improve Form level input control by adding some Form control attributes like number, date, time, calendar, and range.
Some deprecated elements from HTML 4.01 have been dropped, including purely presentational elements such as <font> and<center>, whose effects have long been superseded by the more capable Cascading Style Sheets.
There is also a renewed emphasis on the importance of DOM scripting(e.g., JavaScript) in Web behavior.
The HTML5 syntax is no longer based on SGML despite the similarity of its markup. It has, however, been designed to be backward compatible with common parsing of older versions of HTML. It comes with a new introductory line that looks like an SGML document type declaration, <!DOCTYPE html>, which triggers the standards-compliant rendering. Since 5 January 2009, HTML5 also includes Web Forms 2.0, a previously separate WHATWG specification.

  sEMANTICS

HTML 5 New Structure

HTML 5 recognizes that Web pages have a structure, just like books have a structure or other XML documents. In general, Web pages have navigation, body content, and sidebar content plus headers, footers, and other features. And HTML 5 has created tags to support those elements of the page.
v  <section> - to define sections of pages
v  <header> - defines the header of a page
v  <footer> - defines the footer of a page
v  <nav> - defines the navigation on a page
v  <article> - defines the article or primary content on a page
v  <aside> - defines extra content like a sidebar on a page
v  <figure> - defines images that annotate an article

HTML 5 New Inline Elements

These inline elements define some basic concepts and keep them semantically marked up, mostly to do with time:
v  <mark> - to indicate content that is marked in some fashion
v  <time> - to indicate content that is a time or date
v  <meter> - to indicate content that is a fraction of a known range - such as disk usage
v  <progress> - to indicate the progress of a task towards completion

HTML 5 New Dynamic Pages Support

HTML 5 was developed to help Web application developers, so there are a lot of new features to make it easy to create dynamic HTML pages:
v  Context menus - HTML 5 will support the creation and use of context menus within Web pages and applications
v  href is not required on a tag - this allows you to use the a tag with scripts and in Web applications without needing a place to send that anchor
v  async attribute - This is added to the script tag to tell the browser that the script should be loaded asynchronously so that it doesn't slow down the load and display of the rest of the page.
v  <details> - provides details about an element. This would be like tooltips in non-Web applications.
v  <datagrid> - creates a table that is built from a database or other dynamic source
v  <menu> - an old tag brought back and given new life allowing you to create a menu system on your Web pages
v  <command> - defines actions that should happen when a dynamic element is activated

 

HTML 5 New Form Types

HTML 5 supports all the standard form input types, but it adds a few more:
v  datetime
v  datetime-local
v  date
v  month
v  week
v  time
v  number
v  range
v  email
v  url

HTML 5 new Graphics and Multimedia Elements

There are a few exciting new elements in HTML 5:
v  <canvas> - an element to give you a drawing space in JavaScript on your Web pages. It can let you add images or graphs to tool tips or just create dyanmic graphs on your Web pages, built on the fly.
v  <video> - add video to your Web pages with this simple tag.
v  <audio> - add sound to your Web pages with this simple tag.

Improvement in <iframe>
Using the sandbox, seamless, and srcdoc attributes, authors can now be precise about the level of security and the wished rendering of an <iframe> element.

MathML
Allows directly embedding mathematical formulas.

HTML5-compliant parser
The parser, which turns the bytes of an HTML document into a DOM, has been extended and now precisely defines the behavior to use in all cases, even when faced with invalid HTML. This leads to far greater predictability and interoperability between HTML5-compliant browsers.

HTML 5 Removes Some Elements

There are also some elements in HTML 4 that will no longer be supported by HTML 5. Most are already deprecated, and so shouldn't be surprising, but a few might be difficult:
v  acronym
v  applet
v  basefont
v  big
v  center
v  dir
v  font
v  frame
v  frameset
v  isindex
v  noframes
v  noscript
v  s
v  strike
v  tt
v  u

New APIs

In addition to specifying markup, HTML5 specifies scripting application programming interfaces (APIs) that can be used with JavaScript. Existing document object model (DOM) interfaces are extended for features documented. There are also new APIs, such as:
·         The canvas element for immediate mode 2D drawing.
·         Timed media playback
·         Offline Web Applications
·         Document editing
·         Drag-and-drop
·         Cross-document messaging
·         Browser history management
·         MIME type and protocol handler registration
·         Microdata
·         Web Storage, a key-value pair storage framework that provides behaviour similar to cookies but with larger storage capacity and improved API.
Not all of the above technologies are included in the W3C HTML5 specification, though they are in the WHATWG HTML specification. Some related technologies, which are not part of either the W3C HTML5 or the WHATWG HTML specification, are as follows. The W3C publishes specifications for these separately:
·         Geolocation
·         Web SQL Database, a local SQL Database (no longer maintained).
·         The Indexed Database API, an indexed hierarchical key-value store (formerly WebSimpleDB).
·         HTML5 File API, handles file uploads and file manipulation.
·         Directories and System, an API intended to satisfy client-side-storage use cases not well served by databases.
·         File Writer, an API for writing to files from web applications.
·         Web Audio API, a high-level JavaScript API for processing and synthesizing audio in web applications.
·         ClassList API
HTML5 cannot provide animation within web pages. Additional JavaScript or CSS3 functionality is necessary for animating HTML elements. Animation is also possible using JavaScript and HTML 4 and within SVG elements through SMIL, although browser support of the latter remains uneven as of 2011.

Connectivity

Web Sockets
Allows creating a permanent connection between the page and the server and to exchange non-HTML data through that means.
Server-sent events
Allows a server to push events to a client, rather than the classical paradigm where the server could send data only in response to a client's request.
WebRTC
This technology, where RTC stands for Real-Time Communication, allows connecting to other people and controlling videoconferencing directly in the browser, without the need for a plugin or an external application.

Offline & Storage

Offline resources: The application cache
HTML5 provides an application caching mechanism that lets web-based applications run offline. Developers can use the Application Cache (AppCache) interface to specify resources that the browser should cache and make available to offline users. Applications that are cached load and work correctly even if users click the refresh button when they are offline.
Online and offline events
In online and offline events, which let applications and extensions detect whether or not there's an active Internet connection, as well as to detect when the connection goes up and down.
WHATWG client-side session and persistent storage (aka DOM storage)
Client-side session and persistent storage allows web applications to store structured data on the client side.
IndexedDB
IndexedDB is a web standard for the storage of significant amounts of structured data in the browser and for high performance searches on this data using indexes.
Using files from web applications
Support for the new HTML5 File API has been added to Gecko, making it possible for web applications to access local files selected by the user. This includes support for selecting multiple files using the <input> of type file HTML element's new multiple attribute. There also is FileReader.

Revolution of HTML5:

Firefox 3 becomes HTML5 compatible: Firefox 3 takes steps to allow HTML5 to be viewed on the browser in 2008.

YouTube offer HTML5 video player: New player can only be activated through TestTube. A better video player will arrive in January 2010

Steve Jobs "trashes" Flash in an open letter: "Flash was designed for PCs using mice, not for touch screens using fingers.” Jobs explains why flash will never be allowed on Apple's smart devices. This triggers many companies to begin pursuing HTML5. [April 2010]

Scribd documents switch to HTML5: The online document sharing site, Scribd, switches to HTML5. This creates a better UI for users who are reading documents on tablets. [May 2010]

Arcade Fire's HTML5-based interactive film is a hit: A year after its release, Arcade Fire's interactive film "The wilderness Downtown", wins the Grand Prix award at the Cannes advertising awards in the Cyber category. [August-2010]

Chrome Web Store opens: Chrome opens its web store in HTML5, making non-Apple web apps easy to buy on tablets. [December 2010]

Disney buys HTML5 gaming start-up: Disney buys "Rocket Pack", a Halsinki-based HTML5 gaming engine start-up. Its intention is clear: break the app-store monopoly and build games straight into the web using HTML5 [March -2011]

Pandora begins moving to HTML5: Pandora begins making the switch to an HTML5 audio player. It is reviewed as begin "less clunky" than the Flash player, easier to load and faster. [July 2011]

Amazon Creates Kindle Cloud Reader: Amazon creates a new web-based version of the kindle eBook reader app. The new HTML5 version allows customers to access their content offline directly from their browser. [August-2011]

Twitter rolls out new HTML5 version for iPod: Twitter revamps its iPad presence with a new HTML5-heavy version [August-2011]

34% of top 100 sites use HTML5: As of September 2011, 34% of Alexa's Top-100 trafficked website are using HTML5. [September-2011]

Boston Globe opens subscription-only BostonGlobe.com: The Boston Globe uses responsive design and CSS3 allowing the website to adapt to the size of the screen it's presented on. [September-2011]

Adobe stops making Flash for mobile devices: Company makes public plans to end development of Flash for mobile in order to focus on HTML5 tools development. [November-2011]

Flickr gets a new HTML5 uploader: The HTML5 implementation expedites uploading larger files. [April-2012]

LinkedIn Creates native app for the iPad: LinkedIn has had mobile apps since 2008 but in 2012 saw the launch of its 95% HTML5 native iPad app. The app has been praised for its clean, modern design. [June-2012]

Wix.com: +1,000,000 HTML5 websites created by users: This milestone has been reached 90 days after the publishing platform released its HTML5 website builder.

January-2013: HTML5 adoption expected to boom as over one billion (1,000,000,000) HTML5-compatible smartphones will be sold by this time.

Conclusion

HTML5 does offer a great deal of flashy new technologies to the web tool belt, there are subtle and more significant aspects which often go unnoticed. The technologies associated with HTML5 are making the content more dynamic and interactive, and are essentially improving the user experience of the web. The new HTML specification, on the other hand, is the scaffold. It provides more robust structure and organization. It is the means by which we classify the flora and the fauna of the web. New HTML elements may seem trivial, but the ability to better define our thoughts, content, and architecture improves our ability to connect and share content.
Read More
Subscribe to: Posts (Atom)