This slideshow provides an introduction to HTML5. The target audience should have an understanding of web development, javascript, and previous standards of HTML. This tutorial contains a brief background on the language and an overview of the most popular features. Features covered include native audio/video support, geolocation, canvas, drawing API, web forms 2.0, drag and drop, and more. Also covered is backwards compatibility and section 508 compliance. Extras include polyfills, modernizr, and a brief introduction to CSS3. Enjoy!
HTML5: An Introduction To Next Generation Web Development
1. HTML5: Next Generation Web Development
Tilak Joshi
Senior Web Architect
NASA Goddard Space Flight Center (Contractor)
August 17th
2011
Platform Product Manager
2. What is HTML5?
“HTML5 is a language for structuring and presenting content for the World Wide Web, a core technology of the Internet. It is the fifth
revision of the HTML standard (originally created in 1990 and most recently standardized as HTML4 in 1997[1]
) and as of August 2011[update]
is still under development. Its core aims have been 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 HTML4, but XHTML1 and DOM2HTML (particularly JavaScript) as well.[1]
” – Wikipedia
3. What is HTML5?
HTML5 is the up and coming standard for next generation web development. It reduces focus on syntax and
increases focus on features. It was created by developers and browsers to facilitate web programming and increase
focus on more dynamic content.
Included Features
• New Elements ( <article>,<section>,<aside>,<nav>, etc.)
• Native Audio/Video Support
• Drawing APIs (Canvas, SVG, MathML, WebGL)
• Geolocation
• Drag and Drop
• Web Forms 2.0
• Microdata
• Local Storage
• Web Sockets
• Web Workers
Fun Facts
• HTML5 is the brainchild of WHATWG and was adopted by the W3C after much hesitation
• Apple’s ongoing battle with Adobe was sparked by Apple choosing to support HTML5 over Flash
• Contrary to popular belief, almost all current browsers provide support for most HTML5 features
Official HTML5 Logo
4. New Elements in HTML5
All new tags maintain the same style and element properties as <div> but have special meaning and possibly
special interpretations by markup readers (crawlers) or browsers. When declaring these tags, in order to maintain
backwards compatibility, style them as display:block in your stylesheet or internal style.
These are most of the more important tags:
• <article> – external content (news articles, blogs, etc)
• <section> – sections of the web page (can contain multiple <article> tags)
• <aside> - content related to, but not part of, the primary content
• <nav>,<menu> - the primary navigation, any subnavigation
• <header> - section before body, at the beginning of the page
• <footer> - section after body, at the end of the page
• <hgroup> - a group of headers (<h1> to <h6> tags)
• <time> - a date or time
• <figure>,<figcaption> - a figure and a caption describing it (could be a video or image)
5. Native Audio/Video Support
Current versions of browsers support audio/video, basic controls, a poster for video, duration hint, and more. They
allow VP8, H.264, and OGG formats depending on browser, and allow you to specify a codec in the declaration.
Code (Video):
<video id="video1" width="480" height="260" poster=”firstframe.jpg" durationHint=”59" >
<source type="video/webm" src=“vid.webm" />
<source src=“vid.mp4"/>
<source src=“vid.ogv" />
<p>Error: video not supported</p>
</video>
Code (Audio):
<audio src="song.ogg" controls="controls">
Your browser does not support the audio element.
</audio>
Supported Formats (video; audio):
Mozilla Firefox – OGG, VP8; OGG, WAV
Internet Explorer – H.264 natively, OGG and VP8 with manual install; MP3 WAV
Google Chrome – OGG, H.264 (to be discontinued), VP8; OGG, WAV
Apple Safari – H.264 natively, OGG and VP8 with manual install; MP3, WAV
Opera – OGG, VP8; OGG, WAV
6. Drawing API
HTML5 supports many different APIs for drawing, eliminating the need for Flash, SilverLight, or other third-party
tools. Currently supported APIs include Canvas and SVG. Partially supported APIs include MathML and WebGL.
Canvas:
HTML
<canvas id=”canvas1" width=”600" height="200"> </canvas>
JavaScript
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.moveTo(100, 150);
context.lineTo(450, 50);
context.lineWidth = 10;
context.strokeStyle = "#ff0000"; // line color
context.stroke();
};
SVG:
HTML
<svg id=”svg1” xmlns="http://www.w3.org/2000/svg">
<circle id=”circle1" cx="50" cy="50" r="50" fill="red" />
</svg>
7. Geolocation
Geolocation provides the user’s location. This is the closest position the User Agent can obtain, which in the case of a GPS
enabled device is exact, and in the case of non-GPS enabled device is the location from the IP address, closest cell phone
tower, or wireless network connection.
Code:
function get_location() {
navigator.geolocation.getCurrentPosition( handlePosition );
}
function handlePosition(position){
var longitude = position.coords.longitude;
var latitude = position.coords.latitude;
// use this info
}
Properties:
coords.latitude – decimal degrees
coords.longitude – decimal degrees
coords.altitude - meters
coords.accuracy - meters
coords.speed – meters/second
coords.altitudeAccuracy - meters
coords.heading – degrees clockwise from true north
timestamp – Date() Object
Warning:
User has to allow the browser to share their location. It is good practice to not to depend on this data.
8. Drag and Drop
Drag and Drop is natively allowed by overriding the default browser event of objects snapping back in place.
Code:
HTML
<div id=‘drag1’ draggable=‘true’>I’m Drag1</div>
<div id=‘drag2’ draggable=‘true’>I’m Drag2</div>
<div id=‘dropArea’ ></div>
JavaScript
function allowDrop(e){
if(e.preventDefault){
e.preventDefault();
}
return false;
}
var dropArea = document.getElementById(‘dropArea’);
dropArea.ondragenter = allowDrop;
dropArea.ondragover = allowDrop;
New Events:
ondragstart – when the draggable item begins to get dragged
ondragenter – when the draggable item enters the droppable area
ondragover – when the draggable item is in the droppable area
ondrop – when the draggable item is dropped
9. Web Forms 2.0
HTML5 has taken the more common recent input fields and officially standardized them. It provides browser built-
in GUI and basic validation as required.
New Input Types:
email – current validation checks for ‘@’ sign and ‘.’
url – current validation checks for ‘.’
number – provides up and down arrows on the gui, and validates for a number
range – provides a slider on the gui, and validates for a number
date (date, month, week, time, datetime, datetime-local) – shows a picker
search – currently behaves like a regular ‘text’ field
color – provides a color picker on the gui
New Input Type Attributes:
min – min for the number (works for number and range types)
max – max for the number (works for number and range types)
step – step increment for the number (works for number and range types)
Notes:
Support is currently limited, but coming soon. It is encouraged to use it with shims and polyfills as support comes soon. There will be
variation in the GUI and validation as each browser can handle the look and feel of the additional displayed features and the exact
validation.
10. Additional Features
Microdata, Local Storage, and Web Workers are some of the additional features available in HTML5.
Microdata:
Specifies additional markup language, as per the specified namespace, to identify reviews, recipes, authors, businesses, products, and other
information. This is most useful for screen readers like Google’s crawler to read and identify your content more accurately.
Local Storage:
Information can be stored in the browser without using cookies. This is less overhead and easy access to a lot of data in JSON format but it
is not safe for secure data.
Web Workers:
This is a method for running javascript concurrently and making use of multiple processor CPUs.
Additional Features:
WebSockets, native JSON functions, Cross Domain Requests using AJAX
11. Backwards Compatibility
Polyfills or polyfiller or shim, is a piece of code (or plugin) that provides the technology that you, the developer, expect the
browser to provide natively. Flattening the API landscape if you will. They can use third party technologies like Flash, SilverLight,
or JavaScript and JQuery libraries.
Modernizr:
Modernizr.load({
test: Modernizr.geolocation,
yep : 'geo.js',
nope: 'geo-polyfill.js'
});
WebShims:
WebShims is a JavaScript library built on JQuery that provides polyfills for the most commonly used HTML5 features.
$.webshims.setOptions('canvas', { type: 'flashpro' //excanvas | flash | flashpro });
Notes:
There are polyfills available for every feature that I have covered and many more. These polyfills support browsers starting from IE6+,
Firefox 3+ and more. This is a quick and easy method that increases browser compatibility until all browsers have full support for HTML5.
Future versions of Modernizr 2.0 will have WebShims built in.
12. 508 Compliance
HTML5 does not hinder 508 compliance as everything that is visual does not apply, and everything that is not has
similar fallbacks as HTML4 or XHTML (i.e. title tags, labels for inputs). The more descriptive tags and microdata
allow a possibility for many 508 enhancements in the future.
•All new elements available in HTML5 are the equivalent of HTML divs and can handle the ‘title’ attribute
• The media-rich enhancements are just that, ‘enhancements.’ There should be text counterparts for functionality
• Microdata offers better compliance options in the future
• Better tag structure offers more options for future screen readers for compliance
![What is HTML5?
“HTML5 is a language for structuring and presenting content for the World Wide Web, a core technology of the Internet. It is the fifth
revision of the HTML standard (originally created in 1990 and most recently standardized as HTML4 in 1997[1]
) and as of August 2011[update]
is still under development. Its core aims have been 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 HTML4, but XHTML1 and DOM2HTML (particularly JavaScript) as well.[1]
” – Wikipedia](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)