Create your own awesome maps

Even on the go

with our free apps for iPhone, iPad and Android

Get Started

Already have an account?
Log In

Deep Dive into html 5 by Mind Map: Deep Dive into html 5
5.0 stars - 1 reviews range from 0 to 5

Deep Dive into html 5


Dustin Tauer

Dev 12 years

Instructor 8 years


Html 5 high level

is html4

not some magic bullet, it basically allows more javascript easier

HTML5 Features & Examples

<!DOCTYPE html>

New tags

<header> <nav> article, section, aside, footer, basically replaces divs with ids

Custom Data Attribute

"data-", after the hyphen is up to you, it can be anything

<div data-value="100"></div>

Form Fields

types, email, date, range, search, tel, color

attributes, 'required', min/max, placeholder, pattern (regex) enforcement


Local storage, client side database, key/valueu (JSON), Stores in users browser, 5MB per domain, Data persists, after the browser is shutdown or session is closed, window.localStorage.setItem('key', someValue);

Session storage, just like local storage but data expires once browser window is closed, still client side

Indexed DB, WebSQL is deprecated, Object Store,'Database Name');

Application Cache (offline apps), offline first, cache manifest (*.appcache => file), text file that lists every asset/resource needed to run offline, mimetype: text/cache-manifest, 5MB, more as a chrome app


webworkers (multi-threading), worker = new Worker("Thread.js");, Thread.js, self.onmessage = function(event)..., self.postMessage("recv'd:" +;, worker.onmessage = function(event)..., worker.postMessage('data');


<video controls width="500">, have fallback list, <source src="video.mp4" type="video/mp4" />, <source src="video.ogg" type="video/ogg" />, <embed flash....>

Graphics & 3D


Canvas element


Many More

File Access



Device Access, geo-location, camera/microphone, contacts/events, orientationi, notifications

CSS3, lots of stuff

The Real World

Do Detect Feature Support

modernizer,, class conditions in the head, check for geolocation and load different js

Shiv or Shim, same thing


all html5 needs

Need animation