E-standards for Training
HTML5 review
Q&A for Developers
E-standards for Training
Version 1.0 May 2014
flexiblelearning.net.au
2014 HTML5 Q & A for Developers
Disclaimer
The Australian Government, through the Department of Industry, does not accept any liability to any
person for the information or advice (or the use of such information or advice) which is provided in this
material or incorporated into it by reference. The information is provided on the basis that all persons
accessing this material undertake responsibility for assessing the relevance and accuracy of its content.
No liability is accepted for any information or services which may appear in any other format. No
responsibility is taken for any information or services which may appear on any linked websites.
With the exception of the Commonwealth Coat of Arms, the Department’s logo, any material protected
by a trade mark and where otherwise noted all material presented in this document is provided under a
Creative Commons Attribution 3.0 Australia (http://creativecommons.org/licenses/by/3.0/au/) licence.
New Generation Technologies
incorporating E-standards for Training
National VET E-learning Strategy
2014 HTML5 Q & A for Developers
Table of Contents
1 Background ......................................................................................................... 1
1.1 National VET E-learning Strategy ............................................................................... 1
1.2 New Generation Technologies Business Activity ....................................................... 1
2 Q&A for Developers ............................................................................................ 2
3 Can I use the new HTML5 semantic elements? ................................................. 2
3.1.1 In summary ......................................................................................................................... 3
4 Can I use other HTML5 elements? ..................................................................... 3
4.1.1 In summary ......................................................................................................................... 4
5 Can I use the new CSS3 selectors? ................................................................... 4
5.1.1 In summary ......................................................................................................................... 5
6 Can I use the new CSS3 modules and JavaScript APIs? ................................. 5
6.1.1 In summary ......................................................................................................................... 6
7 Can I use media queries? ................................................................................... 6
More Information .................................................................................................... 8
New Generation Technologies
incorporating E-standards for Training
National VET E-learning Strategy
2014 HTML5 Q & A for Developers
1 Background
1.1 National VET E-learning Strategy
The National VET1 E-learning Strategy (Strategy) aims to strengthen the Australian
training sector’s use of new learning technologies and leverage opportunities
provided by such projects as the National Broadband Network (NBN) to make major
advances in the achievement of government training objectives.
The Strategy seeks to build the capability of registered training organisations (RTOs),
industry and community stakeholders to create more accessible training options and
facilitate new ways of learning through technology. It also aims to stimulate elearning ventures to support individual participation in training and employment, and
the alignment of workforce skill levels with economic needs.
The Strategy is driven by the vision:
A globally competitive Australian training system underpinned by
world class e-learning infrastructure and capability.
and has the following three goals:
1. Develop and utilise e-learning strategies to maximise the benefits of
the national investment in broadband.
2. Support workforce development in industry through innovative
training solutions.
3. Expand participation and access for individuals through targeted
e-learning approaches.
1.2 New Generation Technologies Business Activity
The New Generation Technologies Business Activity incorporates the E-standards
for Training activity and primarily contributes to Goal 1 of the National VET E-learning
Strategy. It has the following objective:
Support the capacity of the VET system to use broadband and emerging
technologies for learning, through research, standards development and advice.
1
Vocational Education and Training
National VET E-learning Strategy
New Generation Technologies
incorporating E-standards for Training
Page 1
2014 HTML5 Q & A for Developers
2 Q&A for Developers
This year, and for the first time, the E-standards for Training officially recommend the
use of the HTML5 doctype and semantic elements. This recommendation comes with
the proviso that fallbacks are put in place for the recommended browsers that lack
support for those elements.
This article explains how to implement such a fallback, and provides guidance on
how to start using other recent Web technologies, including CSS3 and the new
JavaScript APIs.
The information provided here is relevant at the time of writing in May 2014, and
should continue to be so at least until the 2015 E-standards for Training review.
Some online resources over which we have no control may be discontinued.
3 Can I use the new HTML5 semantic elements?
The new semantic elements introduced by HTML5 include: section , article ,
aside , header , footer , nav , figure , figcaption , time , mark , main . With the
exception of main , which was added to the specification in 2013, the current level of
support for these elements is excellent.
The following table lists the browsers included in the E-standards and, for each
browser, compares the minimum recommended version(s) with the first version to
support the new semantic elements.
Browser
Minimum version(s)
First version with support
Internet Explorer (IE)
8 on Windows XP
9
10 on Windows 7
Mozilla Firefox
23
4
Chrome
29
6
Safari
6
5
As you can see, Internet Explorer 8 is the only browser included in the standards that
doesn’t support the new HTML5 semantic elements. Fortunately, a simple
workaround exists in the form of a polyfill called html5shiv.
This polyfill exploits a quirk of IE involving the JavaScript function
document.createElement() . After calling this function for each of the new HTML5
elements (e.g. document.createElement(“section”) ), IE is able to recognise
National VET E-learning Strategy
New Generation Technologies
incorporating E-standards for Training
Page 2
2014 HTML5 Q & A for Developers
and parse these elements correctly. The polyfill also adds default block styling
( display: block; ) for the elements that require it (all except time and mark ).
Download the script, add it to the head of the page then wrap it with a conditional
comment targeting IE8 and below. (Doing so will ensure that the script is not loaded
in any other browser.)
<!--[if lt IE 9]>
<script src="[path_to_script]/html5shiv.min.js"></script>
<![endif]-->
If you are certain your content will never be viewed off-line, you don't even need to
download and host the script yourself. You can indeed rely on a CDN (Content
Delivery Network) such as cdnjs.com. (CDNs offer many advantages over selfhosting):
<!--[if lt IE 9]>
<script
src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.min.js">
</script>
<![endif]-->
3.1.1 In summary

DO use the new semantic elements.

DO NOT use the main element yet (or use specific polyfills/fallbacks as
explained in the next section).

DO refer to HTML5 Doctor and the Mozilla Developer Network to understand
their semantics.

DO use the html5shiv polyfill for IE8 support, preferably via a CDN.
4 Can I use other HTML5 elements?
HTML5 brings more new elements than the semantic ones listed in the previous
section. These include: video , audio , canvas , svg , math , output , progress ,
meter , etc.
Unfortunately, they are not as well supported by modern browsers as the new
semantic elements. No generic solution exists; each element must be considered
separately, as needed. HTML5 Please and Can I Use are great resources to learn
the best way to start using them today. The most common techniques involved are
polyfills and fallbacks. A fallback is an alternative implementation of a feature that is
used on browsers that do not support the initial, modern implementation of that
feature. One of the most common examples of fallbacks is the use of a Flash
embedded video player on browsers that do not support the new video element. A
very challenging aspect of using the new HTML5 elements is accessibility. Indeed,
the use of a polyfill or fallback does not guarantee accessibility on all (if any)
National VET E-learning Strategy
New Generation Technologies
incorporating E-standards for Training
Page 3
2014 HTML5 Q & A for Developers
browsers. This is especially true for the video element and its commonlyrecommended polyfill MediaElement.js, which is not fully accessible.
In this particular case, a solution exists in the VET E-standards' accessible HTML5
video player. This player provides an accessible user interface for the video
element on modern browsers, as well as an accessible Flash player fallback for old
browsers. But for all other elements, whichever the chosen solution (polyfill and/or
fallback), rigorous cross-browser accessibility testing will be required.
The same applies to the new form input types ( color , date , email , number ,
range , tel , url , etc.) and other form features (validation, placeholders, etc.)
brought by HTML5. Their level of support is too inconsistent, and they must be
considered separately from one another. The good news, however, is that if an input
field has a type that is not supported by a browser, it defaults to a simple text field. It
is up to you to decide whether this behaviour is satisfactory for your project.
4.1.1 In summary

DO use the new HTML5 elements, input types and form features, assuming
you find appropriate, accessible polyfills and/or fallbacks for browsers that
require them.

DO thoroughly test any use of these elements and features on all browsers
(both old and modern).
5 Can I use the new CSS3 selectors?
As IE8 is now the oldest browser listed in the VET technical standards, it is safe to
use all CSS 2.1 selectors: descendant > , next sibling + , :before , :after ,
:first-child , :focus , [attribute] , etc.
Unfortunately, IE8 is the only remaining browser that does not support CSS3
selectors: :nth-child(n) , :last-child , :not(s) , :disabled , :checked ,
:nth-of-type(n) , etc.
First, know that you are free to use these selectors for any non-essential styling; that
is, for styles you think IE8 users won't miss. An example is setting a slightly different
background colour to the odd rows of a table with tr:nth-child(odd) . This is
made possible by the way browsers (including IE8) parse CSS: when they encounter
a selector they don't understand, they simply skip the declaration block that follows
and move on to the next rule set.
Second, know that one can always work without CSS3 selectors, as an element can
always be targeted via a unique class name. It is common practice to set and
manipulate classes via JavaScript (and a library like jQuery) to allow the use of CSS
2.1 selectors only.
National VET E-learning Strategy
New Generation Technologies
incorporating E-standards for Training
Page 4
2014 HTML5 Q & A for Developers
However, if you do decide to use CSS3 selectors, then a good option is to use a
polyfill called Selectivizr. This polyfill adds support for CSS3 selectors to IE8. It works
only in combination with a JavaScript library (jQuery, Dojo, Prototype, etc.), the
choice of which determines the level of selector support. (Refer to the table on the
polyfill's homepage. If you choose jQuery, use the latest 1.x version, as versions 2.x
do not support IE8.) Before you start using Selectivizr, make sure you check out its
few limitations.
<script
src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!--[if lt IE 9]>
<script
src="//cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizrmin.js"></script>
<![endif]-->
5.1.1 In summary

DO use CSS3 selectors for non-essential styling.

DO consider sticking with CSS 2.1 for essential styling.

DO use Selectivizr if you believe your project will significantly benefit from the
use of CSS3 selectors.
6 Can I use the new CSS3 modules and JavaScript
APIs?
The new modular approach the W3C uses to work on the CSS standard means that
CSS3 modules are at various stages of standardisation. At the time of writing, the
Selectors and Color modules are Standards; the Fonts and Values and Units
modules are Candidate Recommendations; the Flexbox module is a Last Call Draft;
and the Animations, Transitions and 3D Transforms modules are still Working Drafts.
The same goes with the new JavaScript APIs: Geolocation and Web Storage are
Standards, while Pointer Events and WebSockets are Candidate Recommendations.
This makes it quite difficult to know what technology is stable and ready for use in
production. Flexbox, for instance, has seen its syntax significantly changed three
times. As a result, only the most recent versions of the major browsers implement the
new, stable syntax, and it is very difficult to find polyfills and fallbacks for older
versions. By contrast, Transitions and Transforms have been around and stable for a
long time. The simple use of vendor prefixes (-webkit-, -ms-, -moz-, etc.) as a fallback
is enough to support a large number of browsers.
As always, IE8 remains troublesome, as it supports very few CSS3 properties and
new JavaScript APIs. It also doesn't support ECMAScript 5, the current version of the
JavaScript standard.
Generally, the lack of support for a feature is an issue that can be dealt with in one of
the following ways:
National VET E-learning Strategy
New Generation Technologies
incorporating E-standards for Training
Page 5
2014 HTML5 Q & A for Developers

By using a polyfill (e.g. es5-shim for ECMAScript 5).

By simply ignoring it; particularly when dealing with non-essential features
(e.g. decorative animations and transitions).

By resorting to graceful degradation to provide a reasonably good,
alternative experience to affected users. For example, uniform colours are
commonly used as graceful fallbacks for gradients, which are not supported in
IE8 and IE9.

By resorting to progressive enhancement to deliver very basic functionalities
to all browsers by default, then enhance these functionalities on the fly in
browsers that do support the feature. For instance: show a map by default,
then, if the browser supports the Geolocation API, show the user's location on
the map.
6.1.1 In summary

DO use new CSS3 and JavaScript features along with polyfills and fallback
techniques (including progressive enhancement).

DO NOT use unstable and only-recently-stable technologies (e.g. Flexbox).

DO follow advice given on HTML5 Please, Can I Use, and the Mozilla
Developer Network.
7 Can I use media queries?
Media queries are used to create responsive websites; that is, websites that provide
an optimal viewing experience across a wide range of devices, particularly mobile
phones, tablets and desktop computers.
Over the years, two responsive design techniques have emerged: “desktop-first” and
mobile-first. With the former, the developer starts by writing the styles for the desktop
version of the site, and then adds max-width media queries to deal with smaller
devices incrementally. In the case of mobile-first responsive design, the developer
starts from mobile styles and adds min-width media queries to deal with bigger
devices. The desktop-first technique is popular for making a static desktop website
responsive, while the mobile-first technique is usually recommended when building or
re-building a website from scratch. Here is an example of a mobile-first stylesheet
( em values are recommended for accessibility: em = px / 16 ):
/* For mobile users */
body {
background-color: red;
}
/* For users of devices of 480px or more (typically tablet users) */
@media (min-width: 30em) {
body {
background-color: blue;
National VET E-learning Strategy
New Generation Technologies
incorporating E-standards for Training
Page 6
2014 HTML5 Q & A for Developers
}
}
/* For users of devices of 800px or more (typically desktop users) */
@media (min-width: 50em) {
body {
background-color: green;
}
}
Internet Explorer 8 is the only browser included in the standards that doesn’t support
media queries.
One can rightfully argue that a website doesn’t need to be responsive on IE8. After
all, the browser is mostly—if not only—used as a desktop browser. A liquid layout is,
therefore, all that is needed to make sure a website can adapt to the various desktop
monitor resolutions (800x600, 1024x768, etc.) when viewed in IE8.
But here comes the problem: IE8 neither sees nor apply styles that are defined
inside media queries. For most desktop-first responsive websites this is not an
issue, as in such sites, desktop styles are typically not inside media queries. On the
contrary, it is problematic for mobile-first websites, in which the desktop styles are
inside media queries, as only the mobile styles get applied.
This issue can be solved in multiple ways. For instance, one can create an IE8-only
stylesheet containing a copy of all the desktop styles. This usually results in a
maintenance nightmare, as changes to the main stylesheet changes have to be
propagated to the IE stylesheet. On the other side of the complexity spectrum, one
can keep this idea of an IE-only stylesheet, but use a CSS pre-processor like SASS
or LESS (more specifically the @import directive) to generate it, and therefore
remove the need for a tedious maintenance process.
A more popular solution, however, is to rely on a polyfill called respond.js. It was
designed specifically for mobile-first responsive websites, as it only supports minwidth and max-width media queries (along with all media types: screen , print ,
etc.) This limitation means that the script is extremely fast and lightweight (approx. 1
kB minified). It also has a significant caveat, which is that the stylesheets and the
polyfill’s script must be hosted on the same domain. The use of a public CDN like
cdnjs.com is, therefore, out of the question.
Like Selectivizr, respond.js can be wrapped with an IE conditional comment to make
sure it’s not loaded on browsers that do support media queries:
<!--[if lt IE 9]>
<script src="[path_to_script]/respond.min.js"></script>
<![endif]-->
National VET E-learning Strategy
New Generation Technologies
incorporating E-standards for Training
Page 7
2014 HTML5 Q & A for Developers
More Information
New Generation Technologies
incorporating E-standards for Training
Email:
e-standards@flexiblelearning.net.au
Websites:
New Generation Technologies: ngt.flexiblelearning.net.au
E-standards for Training: e-standards.flexiblelearning.net.au
National VET E-learning Strategy
New Generation Technologies
incorporating E-standards for Training
Page 8