HTML5/CSS3 Features

What is HTML5?

• w3.org wiki/FAQs
• wiki.whatwg.org
• HTML5 Showcase for Web Developers: The Wow and the How by Eric Bidelman, Arne Roomann-Kurrik at the Google I/O conference May 2011.
HTML5 is supposed to be a device (browser) independent standard. The World Wide Web Consortium (W3C) melded its work on XHTML 2.0 with the Web Hypertext Application Technology Working Group (WHATWG), which got involved when it believed the W3C was not moving fast enough.

"HTML5" has been used by some (incorrectly) as a generic term for actually a basket of related standards and technologies which also include CSS3 and JavaScript.

Support for HTML5 was announced by an unusual grouping of internet technology companies:

Google and Microsoft and Yahoo. Facebook and Linkedin.

This list is unusual in that they historically competed with each other through standards fragmentation.

W3C Specs Still Partial

• WIKIPEDIA: HTML5
• html5rocks.com provides info on Google APIs not part of the W3C HTML5 specification.
Specification of some functionality of HTML5 is scheduled for completion in 2014.

Security vulnerabilities in HTML5, such as cross-site request forgery and cross- site scripting, have been identified by
ENISA (European Network and Information Security Agency) and
html5sec.org

HTML5 Feature Support Testing

BLAH: Some HTML5 features are implemented partially in some browsers or not at all in others.

TEST: Several websites publish their assessment of how well standards are implemented among browsers:

• HTML5Demos.com provides a clean menu by feature and major browser.
• HTML5Test.com (as of this writing) shows Microsoft's Windows Phone 7.5 (Mango) on Samsung Omnia W, LG E906 and others having a score of 141 out of a total 475 capability points.
• MobileHTML5.com by Maximillian details conformance by W3C API for each browser.
• chromestatus.com
• caniuse.com comptibility tables
• Wikipedia: Comparison of HTML5 Layout Engines
• HTML5 Test Suite Conformance by W3C show status of development.

Microsoft/Windows HTML5 Support

• Download Google Chrome
• Download Apple Safari

Windows Phone 7 Mango update of October 2011 containts Microsoft's Trident rendering engine within its IE9 internet browser, brings HTML5 to that operating system for the first time. But Sencha's Kitchen Sink app does not display on it.

Microsoft IE6 and backward browsers on desktops (like Windows Vista) can still display HTML5 through a frame handled by a free plug-in for Internet Explorer from Google:
TOOL: DOWNLOAD: Chrome Frame

Websites displayed this way need to have their index.html file contain

<meta http-equiv="X-UA-Compatible" content="chrome=1" />

Windows 7 desktop with IE 9 installed scored 138 of 500 points on Niels Leenheer's html5test.com suite 9f303f8 downloaded from GitHub and run locally. "No" was given for the lack of these advanced features:

• Parsing: HTML5 tokenizer
• Parsing: MathML in text/html
• Video: Subtitle support
• Video: MPEG-4 support
• Video/Audio: Ogg Theora support
• Video/Audio: WebM support
• Video/Audio: PCM audio support
• Elements: Embedding custom non-visible data
• Elements: Global hidden attribute
• Forms: input type=text (Partial support)
• Forms: input type=search, tel, url, email, datetime, date, ..., number, color, datalist, keygen, progress
• Fields ...
• Forms: validation
• User Interaction: Drag and drop
• User Interaction: spellcheck attribute
• Session History
• Microdata
• Web applications: Application Cache, Custom scheme handlers, Custom content handlers
• Security: Sanboxed iframe, Seamless iframe, iframe with inline contents
• Various: Scoped style element, Asyncronous script execution, Base64 encoding and decoding
• Device orientation
• WebGL
• Communication: Server-Sent Events, XMLHttpRequest Level 2, WebSocket
• Files: FileReader API, FileSystem API
• Storage: IndexedDB
• Workers
• Web Notifications

SPA (Single Page Application)

HTML5 Showcases

• apple.com/html5 is where Apple shows off the capabilities of its Safari internet browser.
• htmlfivewow.com loads Chrome Frame if needed.
• html5-demos.appspot.com
• besthtml5gallery.com
• touchstyle.mobi built using Sencha. STAR: I've defined test scripts for these.
A Single Page Application is a way to deploy web code (HTML, CSS and JavaScript) into a desktop, tablet, or mobile browser such that most of the UX and business logic runs completely locally in the browser without having to request information from the server, as ‘normal’ web pages do.

With HTML5 in this mix, the browser application can look, feel and behave very much like a native application. Most SPAs download all their client-side code on the first use (request), and then store it in a special part of the browser’s cache for subsequent visits by the user.

Communication to the server, perhaps only for update-check purposes, is then made on an as needed basis (directed by JavaScript) - often by way of web services - which pull dynamic application data in an analogous way to native applications.

CORS

Cross-Origin Resource Sharing (CORS) allows web apps to authorize traffic to other domains.

It enables greater integration among Local Access APIs such as Speech to Text, Webcams, etc.

HTML5 with CSS3 on DOM4

• WIKIPEDIA: HTML5
• htmlfivewow.com
• html5-demos.appspot.com
• W3Schools.com Tutorial
• html5doctor.com
• Download Google Chrome
• Download Apple Safari

It's inevitable every website developer will eventually have to use HTML5/CSS3.

A 2011 survey from Evans Data shows that 43 percent of developers surveyed in North America and 58% in the Asia Pacific region are using HTML5.

Mobile developers are excited to use HTML5 because it promises to provide all the tools for full web applications, without the hassle and security risks with internet browser add-ins such as Adobe Flash and Microsoft Silverlight.

HTML5 Headers

It can be said that, internally, HTML5 is more efficient than HTML4 with network bandwidth because (by default) HTML5 browsers send only a 2-byte header rather than much more in HTML4.

The headers browsers send are invisible to those who write or read html files.

REMEMBER: Some confuse HTML5 headers with page headers, headings, and the head tag.

The page heading is the first line of each HTML5 page, which begins with <!DOCTYPE html>

The <head> section defines information about the page, such as meta information, styles, and javascript code.

New to HTML5, a list of files can define what resources (such as graphics files) should remain in the local cache. But that is defined in the BODY tag:

<body manifest="./cache.manifest">

HTML5 Markup Differences

• HTML5Boilerplate.com by Paul Irish and his jQuery expert friends provide a cross-browser template that works across many browsers.
• Mozilla's HTML5 page
HTML5 code can contain tags for header> and footer> sections.
<header id="global-header"> is followed by the page title within
<h1 id="global-title">Page Title</h1>.

<nav >, new to HTML5, reduces the amount of JavaScript.

<article id="watch-page"> is new to HTML5 to define (for search engines) where real page contents begins.

<section id="main-content"> new to HTML5 begins each section.

activeElement and hasFocus attributes provide focus management in HTML.

HTML5 Coding on this website provides examples of each.

HTML5 Semantic Tags

Level	Tag	Purpose
<article>	block	Independent content such as a blog post.
<aside>	block	Contents slightly related to primary content on page.
<figure>	block	Grouping stand-alone content for illustration such as video or image loosely coupled to the main text.
<figurecaption>	text	For optional use with figure tag.
<footer>	block	Usually at the bottom of the page to provide metadata about the page, such as author, copyright, etc.
<header>	block	Usually at the top of the page to provide headings such as navigation.
<hgroup>	block	For grouping <h1> through <h6>.
<nav>	block	Navigation at the site level (above the individual page).
<mark>	text	Text of special relevance or significance to be referenced or highlighted.
<section>	block	Grouping of content usually with a heading, similar to chapters.
<time>	text	For date and time representation.

calendar, time, email, url, search.

HTML5 Forms Advancements

Required

Combo Box

The HTML5 combobox presents a list box from a datalist associated with a text field.

<input type=text list=browsers >
<datalist id=browsers >
   <option> Google
   <option> IE9
</datalist>

Achieve the equivalent of HTML5 Combobox in HTML 4 with two JavaScript functions.

New UI and form controls provided by HTML5 include
<progress bars,
<meter class="rating-stars"></meter>

Other HTML5 Features

Tag	Feature
<canvas	Canvas operates at the pixel level, mainly used for games, with a high amount of animation JavaScript controlled by a keyboard rather than mouse.
classlist	-
contenteditable	-
dataset	Local SQL Database (similar to SQLite).
dnd	-
events	Push Notifications (so client just waits for server rather than polling frequently) is a hugh benefit for reducing load on servers.
file-api	-
file	-
geolocation>	-
getUserMedia	-
hidden	-
history	History API for logging across apps.
manifest	-
offline	-
postMessage	-
sql-database	-
storage	Local Storage for use when devices are not connected to a network. Instead of time-limited cookies being sent back and forth (slow and inefficient), sessionStorage for one session and local storage are not time-limited and can pass large amounts of data ONLY when asked for.
SVG	SVG (Scalable Vector Graphics) hold their crispness regardless of size, unlike pixel graphic files like gif, jpg, png, etc. Previous to HTML5, browsers needed plug-ins to rasterize SVG images. Example WEBSITE: Interactive SVG map of Germany with election results by district. Mouse over the map to show related data in the HTML table. It's zoomable! The SVG is a "retained mode" API which provides a tree of objects at the higher-level. demos SVGWeb Toolkit so MS Internet Explorer can show SVG.
websocket	-
xhr2	Binary data with XHR2 to stream chunks of video.

Tags in this table are used in html5demos.com. Other features:

• ArrayBuffer and array data types
• IndexedDB
• <a [ download ] to import files, create new files, then manipulate, store, publish files.
• Web RTC (Real Time Communication)
• Scheduled playback of audio

Web Workers

Worker (background) threads for less memory footprint and faster message passing.

Some say this is not really HTML5. See https://developer.mozilla.org/En/Using_web_workers