1. HTML 5
New & Enhanced Web
ARTISANS OF OPEN SOURCE
2. Agenda
• HTML5 Introduction
o What is HTML5
o HTML5 diff against HTML4
• New Features
• Compatibility
o Browser Support
• Code Examples & Demos
• Q&A
ARTISANS OF OPEN SOURCE
3. HTML5…What?
• HTML5 defines the fifth major revision of the core
language of the World Wide Web, HTML.
• Reflects an effort, started in 2004 to study
contemporary HTML implementations and deployed
content.
o Defines a single language called HTML5 which can be
written in HTML syntax and in XML syntax.
o Defines detailed processing models to foster interoperable
implementations.
o Improves markup for documents.
o Introduces markup and APIs for emerging idioms, such as
Web applications.
ARTISANS OF OPEN SOURCE
4. HTML5…What?
• New version of HTML4, XHTML1, and DOM
Level 2 HTML addressing issues of those
specifications & enhancing (X)HTML to more
adequately address Web applications.
• HTML5 is a work in progress
o Some are features available now […July 2010]
• Firefox
• Safari
• IE 8+
• Opera
ARTISANS OF OPEN SOURCE
5. HTML5
• HTML5 not based on SGML, but compatible with
older HTML parsing.
• Purely presentational elements were dropped
• basefont • strike
• big • tt
• center • u
• font • s
ARTISANS OF OPEN SOURCE
6. HTML5
• The following elements are not included because
they have not been used often, created confusion,
or their function can be handled by other
elements:
o acronym is not included because it has created a lot of
confusion. Authors are to use abbr for abbreviations.
o applet has been obsoleted in favor of object.
o isindex usage can be replaced by usage of form
controls.
o dir has been obsoleted in favor of ul.
ARTISANS OF OPEN SOURCE
7. HTML5
• The following elements are not in HTML5
because their usage affected usability and
accessibility for the end user in a negative way
o frame
o frameset
o noframes
• For a more complete reference on
attributes an elements changed see here
ARTISANS OF OPEN SOURCE
8. HTML5
• HTML5 has extended the HTMLDocument
interface from DOM Level 2 HTML in a number
of ways
o getElementsByClassName()
o innerHTML
o activeElement and hasFocus
o getSelection()
o classList
ARTISANS OF OPEN SOURCE
9. (New) Features
• Enhanced semantics
o <div class=“header”><header>
(generic block) (semantic)
o <footer>, <nav>, <audio>, <video>
• FYI: Semantic Web is a term coined by the W3C
director Tim Berners-Lee. It describes methods
and technologies to allow machines to
understand the meaning of information on the
web.
ARTISANS OF OPEN SOURCE
10. (New) Features
(Semantic Web)
• The following elements have been introduced for better
structure:
• section represents a generic document or application section. It
can be used together with the h1, h2, h3, h4, h5, and h6
elements to indicate the document structure.
• article represents an independent piece of content of a
document, such as a blog entry or newspaper article.
• aside represents a piece of content that is only slightly related to
the rest of the page.
• header represents a group of introductory or navigational aids.
• hgroup represents the header of a section.
• footer represents a footer for a section and can contain
information about the author, copyright information, et cetera.
• nav represents a section of the document intended for
navigation.
ARTISANS OF OPEN SOURCE
11. (New) Features
(Semantic Web)
• figure represents a piece of self-contained flow content, typically
referenced as a single unit from the main flow of the document.
<figure>
<video src="ogg"></video>
<figcaption>Example</figcaption>
</figure>
o figcaption can be used as caption (it is optional).
• video and audio for multimedia content. Both provide an API so
application authors can script their own user interface, but there is
also a way to trigger a user interface provided by the user agent.
source elements are used together with these elements if there are
multiple streams available of different types.
• embed is used for plugin content.
• mark represents a run of text in one document marked or highlighted
for reference purposes, due to its relevance in another context.
• progress represents a completion of a task, such as downloading or
when performing a series of expensive operations.
• meter represents a measurement, such as disk usage.
• time represents a date and/or time.
• ruby, rt and rp allow for marking up ruby annotations.ARTISANS OF OPEN SOURCE
12. (New) Features
(Semantic Web)
• wbr represents a line break opportunity.
• canvas is used for rendering dynamic bitmap graphics on the fly, such
as graphs or games.
• command represents a command the user can invoke.
• details represents additional information or controls which the user
can obtain on demand. The summary element provides its summary,
legend, or caption.
• datalist together with the a new list attribute for input can be used to
make comboboxes:
<input list="browsers”>
<datalist id="browsers”>
<option value="Opera”>
<option value="Firefox">
</datalist>
• keygen represents control for key pair generation.
• output represents some type of output, such as from a calculation
done through scripting.
ARTISANS OF OPEN SOURCE
13. (New) Features
(Semantic Web)
• Internet Explorer versions older than 9 treats
unknown elements in such a way that disallows
them to be styled and any element inside them
will actually end up as siblings rather than
children.
• In order to start using yet unsupported semantic
elements we can use the following workaround in
IE
o Create a dummy element of that type(s) just for the
browser to acknowledge the element and permit styling
and hierarchy
ARTISANS OF OPEN SOURCE
14. (New) Features
(Semantic Web)
• So:
o document.createElement(„tagWeNeed‟);
o Place it in the head, early in the document before the
browser parses other tags and attributes
• HTML5 enabling script is a script that does just that,
you may use it for this purpose
• <!--[if lt IE 9]>
Your script should be inside these tags so that it would be
executed only when necessary (IE versions older than 9) and
ignored (faster) if unnecessary
<![endif]-->
ARTISANS OF OPEN SOURCE
15. (New) Features
• Canvas • Microdata
• Audio • MathML
• Video • Web (SQL) database
• Storage • New Selectors
• Web workers • Web Sockets
• App Cache • SVG
• Geolocation • Window Messaging
• New input types • Drag & Drop
ARTISANS OF OPEN SOURCE
16. (New) Features
(Canvas)
• “a resolution-dependent bitmap canvas that can
be used for rendering graphs, game graphics, or
other visual images on the fly.”
ARTISANS OF OPEN SOURCE
17. (New) Features
(Video)
• HTML5 defines a new element called <video> for
embedding video in your web pages without using
third-party plugins
ARTISANS OF OPEN SOURCE
18. (New) Features
(Video)
• You can create auto-fallback behavior on the
video element by placing whatever you need the
browser to show in case <video> is not supported
• You may (should) specify multiple video sources
for different codec types for the different browsers
Flash
auto-fallback
ARTISANS OF OPEN SOURCE
19. (New) Features
(Video)
• <video src=“somevideo” controls></video>
o The controls attribute automatically places the default
controls to the player; these will look different
depending on the browser‟s implementation.
o You may want to create your own controls to maintain
cross-browser consistency in the player‟s look & feel;
the video api provides all the necessary methods for
reproduction control so the how (elements, styles,
interaction model) its the author‟s choise
ARTISANS OF OPEN SOURCE
20. (New) Features
(Storage)
• HTML5 storage provides a way for web sites to
store information on your computer and retrieve
it later. The concept is similar to cookies, but it‟s
designed for larger quantities of information.
Note: Anyone who has physical access to your
computer could look and even change your
HTML5 storage database
ARTISANS OF OPEN SOURCE
21. (New) Features
(Storage)
Cookies HTML5 Storage
• Limited in size • Larger storage
• The browser sends them • Stays on your computer
back to the web server every • Web sites can access it with
time it requests a new page JavaScript after the page is
this takes extra time and loaded
bandwidth • Any web site can read and
modify its own values
• Sites can‟t access values
stored by other sites
(same-origin restriction)
ARTISANS OF OPEN SOURCE
22. (New) Features
(Storage)
• Kinds Storage:
o Local storage: persistent data storage, remains on your
computer
o Session storage: its life span is the current session life
span (per-tab)
ARTISANS OF OPEN SOURCE
23. (New) Features
(Web Workers)
• Web Workers provide a standard way for
browsers to run JavaScript in the background
• These “background threads” can do complex
mathematical calculations, make network
requests, or access local storage while the main
web page responds to the user scrolling, clicking,
or typing.
ARTISANS OF OPEN SOURCE
24. (New) Features
(Application Cache)
• Start out as an online web application, the web
server tells your browser which files need to be
downloaded in order for the app to work offline,
these files can be anything. Once the files are
cached, you can revisit the site offline.
• When you‟re online, any changes made can be
uploaded to the remote server.
ARTISANS OF OPEN SOURCE
25. (New) Features
(Geolocation)
• This specification defines an API that provides
scripted access to geographical location
information associated with the hosting device
• Not part of the HTML5 specification, geolocation
is being standardized by the Geolocation Work
Group
• You can see this spec here
• geo.js is a geolocation API wrapper
ARTISANS OF OPEN SOURCE
26. (New) Features
(input types)
• The input element's type attribute now has
the following new values:
o tel o month
o search o week
o url o time
o email o datetime-local
o datetime o number
o date o range
o color
ARTISANS OF OPEN SOURCE
27. (New) Features
(Microdata)
• This mechanism allows machine-readable data to
be embedded in HTML documents in an easy-to-
write manner, with an unambiguous parsing
model. It is compatible with numerous other data
formats including RDF and JSON
• A standardized way to provide additional
semantics in your web pages.
o i.e. you can use microdata to declare that a photograph
is available under a specific Creative Commons license.
ARTISANS OF OPEN SOURCE
28. (New) Features
(Microdata)
• The HTML5 microdata standard includes both
HTML markup (primarily for search engines) and
a set of DOM functions (primarily for browsers)
• Microdata annotates the DOM with scoped
name/value pairs from custom vocabularies
• For further reading go here
ARTISANS OF OPEN SOURCE
30. (New) Features
(MathML)
• The goal of MathML is to enable mathematics to
be served, received, and processed on the World
Wide Web, just as HTML has enabled this
functionality for text
• While MathML is human-readable, it is
anticipated that, in all but the simplest cases,
authors will use equation editors, conversion
programs, and other specialized software tools to
generate MathML (there are existing tools
already)
ARTISANS OF OPEN SOURCE
33. (New) Features
(Web database)
• Defines an API for storing data in databases that can
be queried using a variant of SQL
• APIs to manipulate client-side databases using SQL
• Each database has a name and a current version and
they can't exist in multiple versions at once
o Versions are intended to allow authors to manage schema
changes incrementally & non-destructively, and without the
risk of old code writing to a database with incorrect
assumptions
• All strings including the empty string are valid
database names
• Database names are case-sensitive
ARTISANS OF OPEN SOURCE
34. (New) Features
(Web database)
• Transaction support
• Synchronous & Asynchronous APIs
• For SQL query execution:
o executeSql(sqlStatement, arguments, callback, errorCallback)
• The executeSql() method invokes its callback with
a SQLResultSet object as an argument
ARTISANS OF OPEN SOURCE
35. (New) Features
(New Selectors)
• getElementsByClassName
o Get a set of elements matching a CSS class
• getSelection
o Get a set of elements that match a CSS syntax
ARTISANS OF OPEN SOURCE
36. (New) Features
(Web Sockets)
• Bi-directional, full-duplex communications
channels over TCP socket, designed to be
implemented in web browsers and web servers
• API that enables two-way communication with a
remote host
ARTISANS OF OPEN SOURCE
37. (New) Features
(SVG)
• Is a modularized
language for describing
two-dimensional vector
and mixed
vector/raster graphics
in XML
• HTML5 allows the
embedding of scalable
vector graphics in your
document
ARTISANS OF OPEN SOURCE
38. (New) Features
(SVG)
• Can be interactive and dynamic. Animations can
be defined and triggered declaratively or via
scripting
• Further reading
o SVG Spec
ARTISANS OF OPEN SOURCE
39. (New) Features
(Window Messaging)
• You can use this technique to talk across related
windows (documents)
• You can post a message from document A to
document B by calling the postMessage method
which receives two parameters
o The actual message
o The URL to which you expect to pass that message
• The „*‟ wildcard can be used here but for security it should be
avoided
ARTISANS OF OPEN SOURCE
40. Compatibility
• HTML5 defines an HTML syntax that is
compatible with HTML4 and XHTML1
documents published on the Web, but is not
compatible with the more esoteric SGML features
of HTML4, such as processing instructions and
shorthand markup as these are not supported by
most user agents
ARTISANS OF OPEN SOURCE
41. Compatibility
• The basic compatibility consideration is the
browser's feature support.
o Detection techniques
• You can (should) test for the browser‟s support for the HTML5
feature you need
• A library might come in handy for this purpose
ARTISANS OF OPEN SOURCE
42. Compatibility
(feature detection)
• Example: Detecting Geolocation Support
o if ( navigator.geolocation )
// browser supports geolocation…
else
alert(„Sorry, no geolocation support‟);
Note: detecting geolocation is fairly simple, some
other features require a bit more work to check
for support, that’s why…
ARTISANS OF OPEN SOURCE
43. Compatibility
(feature detection: Modernizr)
• Mordernizr: is an open source, MIT-licensed
JavaScript library that detects support for many
HTML5 & CSS3 features.
• Use it to easily figure if the user agent supports an
specific feature
o Example: Detecting geolocation
• Modernizr.geolocation
? alert(„We know where you are!!‟)
: alert(„Where the heck are you!?‟);
ARTISANS OF OPEN SOURCE
44. Compatibility
(feature detection: Modernizr)
Current version is 1.5 (July 2010), it detects the following feature
• @font-face • CSS Gradients • History Management
• Canvas • CSS Reflections • applicationCache
• Canvas Text • CSS 2D Transforms • Web Sockets
• HTML5 Audio • CSS 3D Transforms • Web Workers
• HTML5 Video • CSS Transitions • Web SQL Database
• rgba() • Geolocation API • IndexedDB
• hsla() • localStorage • Input Types
• border-image: • sessionStorage • Input Attributes
• border-radius: • SVG
• box-shadow: • SMIL
• opacity: • SVG Clipping
• Multiple • Drag and Drop
backgrounds • hashchange
• CSS Animations • X-window
• CSS Columns Messaging ARTISANS OF OPEN SOURCE
