Front End Web Development – Cert Program
HTML 5: Introduction
Background
“When HTML 4 was nearing completion, the W3C decided (in a workshop run in 1998) that
in terms of markup languages, the future of the Web was XML and XHTML, not HTML
(comparison of XHTML and HTML). So the W3C drew a line under HTML 4.01 and instead
concentrated on the XHTML 1.0 spec, finished in early 2000. XHTML 1.0 is just the same as
HTML 4.01, except that it uses the markup syntax rules of XML. XHTML 2.0soon followed,
which added a whole bunch of new powerful features and an XML-only mime-type, and
aimed to be the next big thing on the Web.
The trouble with XHTML 2.0 is that it wasn't backwards compatible with the markup
already on the Web - the elements worked differently, the XHTML mimetype
(application/xhtml+xml) did not work at all on IE, which still has the majority browser
marketshare as of the time of writing, the developer tools available weren't ready for
working with XML, and it didn't really reflect what web developers were REALLY doing out
there in the wild wild web.
In 2004, a group of like minded developers and implementers (including representatives
from Opera, Mozilla and slightly later, Apple) got together and formed a breakaway spec
group called the WHATWG, with the aim of writing a better HTML markup spec that could
handle authoring the new breed of web applications, without - crucially - breaking
backwards compatibility.
The result was the Web Applications 1.0 specification, which documented existing
interoperable browser behaviours and features, as well as new features for the Web stack
such as APIs and new DOM parsing rules. After many discussions between W3C Members,
on March 7 2007 the work on HTML was restarted with a new HTML Working Group in an
open participation process. In the first few days, hundreds of participants joined to continue
to work on the next version of HTML. One of the first decisions of the HTML WG was to
adopt the Web Applications 1.0 spec and call it
HTML5.” –from source: http://dev.opera.com/articles/view/get-familiar-with-html5/
Overview




Backwards compatible with most previous HTML tags.
Based on the same JavaScript/DOM that developers are already used to.
New featured tags allow embedding of audio, video, and easier form validation
among other things.
Better suited to writing dynamic applications than previous versions that were
designed for static document creation.
New Structural Elements
“During the creation of HTML5, editor Ian Hickson used Google's tools to mine data from
over a billion web pages, surveying what ID and class names are most commonly used on
the real world web. You can see one of the surveys published at Google Code: Web
Authoring Statistics: Classes. To cut a long story short, the element names seen in this
article were taken from the 20 most popular IDs and class names found in Hickson's
surveys.”
–from source: http://dev.opera.com/articles/view/new-structural-elements-in-html5/
<header>: Used to contain the header of a site.
<footer>: Contains the footer of a site.
<nav>: Contains the navigation functionality for the page.
<article>: Contains a standalone piece of content that would make sense if









syndicated as an RSS item, for example a news item.
<section>: Used to either group different articles into different purposes or subjects,
or to define the different sections of a single article.
<time>: Used for for marking up times and dates.
<aside>: Defines a block of content that is related to the main content around it, but
not central to the flow of it.
<hgroup>: Used to wrap more than one heading if you only want it to count as a
single heading in the page's heading structure.
<figure> and <figcaption>: Used to encapsulate a figure as a single item, and contain
a caption for the figure, respectively.
Examples:
<!-- header -->
<header>
<hgroup>
<h1>A history of Pop Will Eat Itself</h1>
<h2>Introducing the legendary Grebo Gurus!</h2>
</hgroup>
</header>
<!-- footer -->
<footer>
<h3 id="copyright">Copyright and attribution</h3>
<!-- navigation -->
<nav>
<h2>Contents</h2>
</footer>
<ul>
<li><a href="#Intro">Introduction</a></li>
<li><a href="#History">History</a>
<!-- other navigation links... -->
</ul>
</nav>
<!-- aside is used for sidebars outside the main content -->
<aside>
<table>
<!-- lots of quick facts inside here -->
</table>
</aside>
<!-- figure used for images and captions replaces the need for 2 paragraphs -->
<figure>
<img src="pwei.png" alt="Old poppies logo" />
<figcaption>
The old poppies logo, circa 1987.<br /><a
href="http://www.flickr.com/photos/bobcatrock/317261648/">Original picture on
Flickr</a>, taken by bobcatrock.
</figcaption>
</figure>
<!-- time, both human and machine readable -->
<time datetime="1989-03-13">13th March 1989</time>
<time datetime="1989-03-13">March 13 1989</time>
<time datetime="1989-03-13">My nineteenth birthday</time>
<!-- The <article> element is for standalone pieces of content that would make sense
outside the context of the current page, and could be syndicated nicely. Such pieces
of content include blog posts, a video and it's transcript, a news story, or a single
part of a serial story.
The <section> element, on the other hand is for breaking the content of a page into
different functions or subjects areas, or breaking an article or story up into different
sections. -->
<article>
<section id="Intro">
<h2>Introduction</h2>
</section>
<section id="History">
<h2>History</h2>
</section>
<section id="Discography">
<h2>Discography</h2>
</section>
</article>
<!-- or -->
<section id="rock">
<h2>Rock bands</h2>
<!-- multiple article elements could go in here -->
</section>
<section id="jazz">
<h2>Jazz bands</h2>
<!-- multiple article elements could go in here -->
</section>
Older broswer support techniques
Most browsers treat elements they do not recognize like <span> to get them to
behave properly we just setthem to display block in our css:
article, section, aside, hgroup, nav, header, footer, figure, figcaption {
block; }
For older versions of IE:
display:
<script>
document.createElement('article');
document.createElement('section');
document.createElement('aside');
document.createElement('hgroup');
document.createElement('nav');
document.createElement('header');
document.createElement('footer');
document.createElement('figure');
document.createElement('figcaption');
</script>
Boilerplate Method:
https://github.com/h5bp/html5-boilerplate
http://html5boilerplate.com/
New Form Features
http://dev.opera.com/articles/view/new-form-features-in-html5/
Native audio and video
<video width=”320” height=”240” controls poster=”turkish.jpg”>
<source src=”turkish.ogv” type=”video/ogg”>
<source src=turkish.mp4 type=”video/mp4”>
Download the <a href=”video.ogg”>Turkish dancing masterclass video</a>
<!-- optional flash fall back -->
</video>
<audio controls preload="auto" autobuffer>
<source src="elvis.mp3" />
<source src="elvis.ogg" />
<!-- now include flash fall back -->
</audio>
Wiki list of free Theora (http://theora.org) OGV encoders for video:
http://wiki.xiph.org/index.php/TheoraSoftwareEncoders
OGG Audio encoders:
http://www.vorbis.com/
Canvas interactivity
http://dev.opera.com/articles/view/html-5-canvas-the-basics/
Web Sockets
http://dev.opera.com/articles/view/introducing-web-sockets/
Offline storage
http://dev.opera.com/articles/view/web-storage/
Geo location
http://dev.opera.com/articles/view/how-to-use-the-w3c-geolocation-api/