CINXE.COM

<!DOCTYPE html> <html lang="en-US" dir="ltr" id="developer-mozilla-org" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#"> <head><script type="text/javascript" src="https://web-static.archive.org/_static/js/bundle-playback.js?v=7YQSqjSh" charset="utf-8"></script> <script type="text/javascript" src="https://web-static.archive.org/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="https://web-static.archive.org/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("https://developer.mozilla.org/en-US/docs/HTML/HTML5","20130113011431","https://web.archive.org/","web","https://web-static.archive.org/_static/", "1358039671"); </script> <link rel="stylesheet" type="text/css" href="https://web-static.archive.org/_static/css/banner-styles.css?v=p7PEIJWi" /> <link rel="stylesheet" type="text/css" href="https://web-static.archive.org/_static/css/iconochive.css?v=3PDvdIFv" />  <title>HTML5 - HTML | MDN</title> <meta charset="utf-8"> <meta name="robots" content="index, follow"> <link rel="home" href="/en-US/"> <link rel="copyright" href="#copyright"> <link rel="shortcut icon" href="https://web.archive.org/web/20130113011431im_/https://developer.cdn.mozilla.net/media/img/favicon.ico">  <link rel="stylesheet" media="screen,projection,tv" href="https://web.archive.org/web/20130113011431cs_/https://developer.cdn.mozilla.net/media/css/mdn-min.css?build=5c536df"/> <link rel="stylesheet" media="screen,projection,tv" href="https://web.archive.org/web/20130113011431cs_/https://developer.cdn.mozilla.net/media/css/wiki-min.css?build=5c536df"/>     <link rel="stylesheet" type="text/css" media="print" href="https://web.archive.org/web/20130113011431cs_/https://developer.cdn.mozilla.net/media/css/mdn-print.css"> <link rel="stylesheet" href="//web.archive.org/web/20130113011431cs_/https://www.mozilla.org/tabzilla/media/css/tabzilla.css"> <link rel="search" type="application/opensearchdescription+xml" href="https://web.archive.org/web/20130113011431/https://developer.mozilla.org/en-US/search/xml" title="Mozilla Developer Network"/> <link rel="stylesheet" media="print" href="https://web.archive.org/web/20130113011431cs_/https://developer.cdn.mozilla.net/media/css/wiki-print-min.css?build=5c536df"/> <link rel="stylesheet" type="text/css" href="/web/20130113011431cs_/https://developer.mozilla.org/en-US/docs/Template:CustomCSS?raw=1"/>  <link rel="alternate" type="application/json" href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/HTML5$json"/> <link rel="canonical" href="https://web.archive.org/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/HTML5"/> <meta property="og:title" content="HTML5"/> <meta property="og:type" content="website"/> <meta property="og:image" content="https://web.archive.org/web/20130113011431im_/https://developer.mozilla.org/media/img/mdn-logo-sm.png"/> <meta property="og:site_name" content="Mozilla Developer Network"/> <meta property="og:url" content="https://web.archive.org/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/HTML5"/> <meta name="twitter:card" content="summary"/> <meta name="twitter:url" content="https://web.archive.org/web/20130113011431im_/https://developer.mozilla.org/en-US/docs/HTML/HTML5"/> <meta name="twitter:title" content="HTML5"/> <meta name="twitter:image" content="https://web.archive.org/web/20130113011431im_/https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"/> <meta name="twitter:site" content="@mozhacks"/> <meta name="twitter:creator" content="@mozhacks"/> <meta property="og:description" content="HTML5 is the latest evolution of the standard that defines HTML . It is a new version of the language HTML, with new elements, attributes, and behaviors, and a larger set of technologies that allows more diverse and powerful Web sites and applications."/> <meta name="description" content="HTML5 is the latest evolution of the standard that defines HTML . It is a new version of the language HTML, with new elements, attributes, and behaviors, and a larger set of technologies that allows more diverse and powerful Web sites and applications."/> <meta name="twitter:description" content="HTML5 is the latest evolution of the standard that defines HTML . It is a new version of the language HTML, with new elements, attributes, and behaviors, and a larger set of technologies that allows more diverse and powerful Web sites and applications."/> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-36116321-5']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://web.archive.org/web/20130113011431/https://ssl' : 'https://web.archive.org/web/20130113011431/http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </head> <body id="" class="html-ltr document" role="document">  <header id="masthead" class="minor"> <div class="wrap"> <ul id="nav-access"> <li><a href="#language">Select language</a></li> <li><a href="#q">Skip to search</a></li> <li><a href="#content">Skip to main content</a></li> </ul> <div id="branding"> <div id="logo"><a href="/web/20130113011431/https://developer.mozilla.org/en-US/"><img src="https://web.archive.org/web/20130113011431im_/https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="Mozilla Developer Network" title="Mozilla Developer Network" width="62" height="71"> Mozilla Developer Network</a></div> </div> <nav id="nav"> <ul id="nav-main" role="menubar"> <li id="nav-main-topics" class="menu" role="menuitem"><a href="#nav-sub-topics" class="toggle" aria-haspopup="true" aria-labelledby="nav-main-topics" title="Explore other parts of MDN">Topics</a> <ul id="nav-sub-topics" class="sub-menu" aria-hidden="true"> <li id="nav-sub-web"><a href="/web/20130113011431/https://developer.mozilla.org/en-US/web">Web</a></li> <li id="nav-sub-apps"><a href="/web/20130113011431/https://developer.mozilla.org/en-US/apps">Apps</a></li> <li id="nav-sub-mobile"><a href="/web/20130113011431/https://developer.mozilla.org/en-US/mobile">Mobile</a></li> <li id="nav-sub-addons"><a href="/web/20130113011431/https://developer.mozilla.org/en-US/addons">Add-ons</a></li> <li id="nav-sub-mozilla"><a href="/web/20130113011431/https://developer.mozilla.org/en-US/mozilla">Mozilla</a></li> </ul> </li> <li id="nav-main-docs" class="menu" role="menuitem"> <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs" class="docs toggle" aria-haspopup="true" aria-labelledby="nav-main-docs">Docs</a> <div id="nav-sub-docs" class="sub-menu" aria-hidden="true"> <ul> <li> <ul> <li><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML">HTML</a></li> <li><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/DOM">DOM</a></li> <li><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/Using_HTML5_audio_and_video">Video</a></li> <li><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/Using_HTML5_audio_and_video">Audio</a></li> <li><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/SVG">SVG</a></li> <li><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/WebGL">WebGL</a></li> </ul> </li> <li> <ul> <li><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/HTML5">HTML5</a></li> <li><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/WebSockets">WebSockets</a></li> <li><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/Using_the_application_cache">Offline Cache</a></li> <li><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/DOM/Storage">Local Storage</a></li> <li><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/IndexedDB">IndexedDB</a></li> <li><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications">File API</a></li> </ul> </li> <li> <ul> <li><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/CSS">CSS</a></li> <li><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_gradients">Gradients</a></li> <li><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transforms">Transforms</a></li> <li><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions">Transitions</a></li> <li><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_animations">Animations</a></li> <li><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/CSS/Media_queries">Media Queries</a></li> </ul> </li> <li> <ul> <li><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/JavaScript">JavaScript</a></li> <li><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/AJAX">AJAX</a></li> <li><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/Canvas">Canvas</a></li> <li><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/Using_geolocation">Geolocation</a></li> <li><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop">Drag & Drop</a></li> <li><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/DOM/Using_web_workers">Web Workers</a></li> </ul> </li> </ul> <p><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs">More docs…</a></p> </div> </li> <li id="nav-main-demos" role="menuitem"><a href="/web/20130113011431/https://developer.mozilla.org/en-US/demos/" class="demos">Demos</a></li> <li id="nav-main-learning" role="menuitem"><a href="/web/20130113011431/https://developer.mozilla.org/en-US/learn" class="learning">Learning</a></li> <li id="nav-main-community" class="menu" role="menuitem"><a href="#nav-sub-community" class="community toggle" aria-haspopup="true" aria-labelledby="nav-main-community">Community</a> <ul id="nav-sub-community" class="sub-menu"> <li><a href="/web/20130113011431/https://developer.mozilla.org/en-US/events">Events</a></li> <li><a href="/web/20130113011431/https://developer.mozilla.org/en-US/promote">Promote</a></li> <li><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/Project:How_to_Help">Contribute</a></li> </ul> </li> </ul> </nav> <ul class="user-state signed-out"> <li class="user-signin menu"> <form class="browserid" action="/web/20130113011431/https://developer.mozilla.org/en-US/users/browserid_verify" method="POST"> <input id="next" name="next" type="hidden" value="/en-US/docs/HTML/HTML5"/> <input required="required" type="hidden" name="assertion" id="id_assertion"/> <a href="#" target="_blank" class="browserid-signin toggle" aria-haspopup="true" title="Sign in with Persona">Sign in</a> <div class="browserid-info sub-menu" aria-hidden="true"> <h3>What's this?</h3> <p>MDN has switched to <a href="https://web.archive.org/web/20130113011431/https://persona.org/" target="_blank" rel="external">Persona</a>, a safe and simple way to sign in with just your e-mail address. <a href="https://web.archive.org/web/20130113011431/http://identity.mozilla.com/post/12950196039/deploying-browserid-at-mozilla" rel="external">Learn more about why Mozilla is using Persona</a>.</p> <p><strong>Returning members:</strong> sign in with Persona and you'll be connected to your MDN profile (all your information is still here).</p> <p><strong>New members:</strong> sign in with Persona first, then you'll be able to set up your new MDN profile.</p> <p><a href="#" target="_blank" class="browserid-signin" title="Sign in with Persona">Sign in</a></p> </div> </form> </li> </ul> <form id="site-search" method="get" action="https://web.archive.org/web/20130113011431/http://www.google.com/search" data-url="/en-US/search"> <p> <input type="text" role="search" placeholder="Search MDN" id="q" name="q" value=""> <noscript><button type="submit">Search</button></noscript> </p> <input type="hidden" name="sitesearch" value="developer.mozilla.org"> <div id="site-search-gg"></div> </form> <a href="https://web.archive.org/web/20130113011431/http://www.mozilla.org/" id="tabzilla">mozilla</a> </div> </header>  <section id="nav-toolbar"><div><div class="wrap">  <nav id="tool-menus" role="navigation"> <ul id="tools"> <li class="menu"> <a href="#page-tools" class="toggle">This page</a> <ul id="page-tools" class="sub-menu"> <li class="page-print"> <a href="#" onclick="return window.print();" title="Print page">Print this page</a></li> <li><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/new?parent=457">New sub-page</a></li> <li><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/new?clone=457">Clone this page</a></li> </ul> </li> <li class="menu"> <a href="#" class="toggle">Languages</a> <ul id="translations"> <li><a rel="internal" href="/web/20130113011431/https://developer.mozilla.org/bn-BD/docs/HTML/HTML5" title="HTML5">বাংলা (বাংলাদেশ)</a></li> <li><a rel="internal" href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/pt-br/HTML/HTML5" title="HTML5">English (US)</a></li> <li><a rel="internal" href="/web/20130113011431/https://developer.mozilla.org/es/docs/HTML/HTML5" title="HTML5">Español</a></li> <li><a rel="internal" href="/web/20130113011431/https://developer.mozilla.org/fa/docs/HTML/HTML5" title="HTML5">فارسی</a></li> <li><a rel="internal" href="/web/20130113011431/https://developer.mozilla.org/fr/docs/HTML/HTML5" title="HTML5">Français</a></li> <li><a rel="internal" href="/web/20130113011431/https://developer.mozilla.org/it/docs/HTML/HTML5" title="HTML5">Italiano</a></li> <li><a rel="internal" href="/web/20130113011431/https://developer.mozilla.org/ja/docs/HTML/HTML5" title="HTML5">日本語</a></li> <li><a rel="internal" href="/web/20130113011431/https://developer.mozilla.org/ko/docs/HTML/HTML5" title="HTML5">한국어</a></li> <li><a rel="internal" href="/web/20130113011431/https://developer.mozilla.org/pl/docs/HTML/HTML5" title="HTML5">Polski</a></li> <li><a rel="internal" href="/web/20130113011431/https://developer.mozilla.org/pt-BR/docs/HTML/HTML5" title="HTML5">Português (do Brasil)</a></li> <li><a rel="internal" href="/web/20130113011431/https://developer.mozilla.org/pt-PT/docs/HTML/HTML5" title="HTML5">Português (Europeu)</a></li> <li><a rel="internal" href="/web/20130113011431/https://developer.mozilla.org/ru/docs/HTML/HTML5" title="HTML5">Русский</a></li> <li><a rel="internal" href="/web/20130113011431/https://developer.mozilla.org/tr/docs/HTML/HTML5" title="HTML5">Türkçe</a></li> <li><a rel="internal" href="/web/20130113011431/https://developer.mozilla.org/zh-CN/docs/HTML/HTML5-and-his-friends" title="HTML5 和他的朋友们">中文 (简体)</a></li> <li><a rel="internal" href="/web/20130113011431/https://developer.mozilla.org/zh-TW/docs/HTML/HTML5" title="HTML5">正體中文 (繁體)</a></li> <li><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/HTML5$locales">Add translation</a></li> </ul> </li> </ul> </nav>  <nav class="crumbs" role="navigation"> <ol> <li class="crumb"><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/en">MDN</a></li> <li class="crumb"><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML">HTML</a></li> <li class="crumb">HTML5</li> </ol> </nav> </div></div></section> <section id="content"> <div class="wrap"> <div id="content-main" class="full"> <article class="article" role="main" data-current-revision="344765" data-refresh-message="Your changes were merged. However, something else has been edited, so this page will be refreshed to reflect the changes." data-cancel-edit-message="Abort editing in progress? Your unsaved changes will be discarded."> <header id="article-head"> <div class="title"> <h1 class="page-title">HTML5</h1> </div> <ul id="page-buttons"> <li class="page-history"><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/HTML5$history">History</a></li> <li class="page-edit"><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/HTML5$edit">Edit</a></li> </ul> </header> <div id="wikiArticle" class="page-content boxed"> <div class="callout-box"> <div style="font: normal 20px 'Bebas Neue','League Gothic',Haettenschweiler,Impact,'Arial Narrow',sans-serif; text-transform: uppercase;"> HTML5 Demos</div> <p>A <a href="/web/20130113011431/https://developer.mozilla.org/en-US/demos/tag/tech:html5" title="demos/tag/tech:html5/">collection of demos</a> showing the latest HTML technologies in action.</p> <p><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/HTML5" title="html5"><img alt="HTML5_Logo_128.png" class="internal default" src="/web/20130113011431im_/https://developer.mozilla.org/@api/deki/files/6020/=HTML5_Logo_128.png" style=""></a></p> </div> <p><span class="seoSummary"><strong>HTML5</strong> is the latest evolution of the standard that defines <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML" title="HTML">HTML</a>. </span>The term represents two different concepts:</p> <ul> <li><span class="seoSummary">It is a new version of the <em>language</em> HTML, with new elements, attributes, and behaviors,</span></li> <li><span class="seoSummary">and a larger set of technologies that allows more diverse and powerful Web sites and applications.</span> This set is sometimes called <em>HTML5 & friends</em> and often shortened to just <em>HTML5</em>.</li> </ul> <p>Designed to be usable by all Open Web developers, this reference page links to numerous resources about HTML5 technologies, classified into several groups based on their function.</p> <ul> <li><em>Semantics</em>: allowing you to describe more precisely what your content is.</li> <li><em>Connectivity</em>: allowing you to communicate with the server in new and innovative ways.</li> <li><em>Offline & Storage</em>: allowing webpages to store data on the client-side locally and operate offline more efficiently.</li> <li><em>Multimedia</em>: making video and audio first-class citizens in the Open Web.</li> <li><em>2D/3D Graphics & Effects</em>: allowing a much more divisive range of presentation options.</li> <li><em>Performance & Integration</em>: providing greater speed optimization and better usage of computer hardware.</li> <li><em>Device Access</em>: allowing for the usage of various input and output devices.</li> <li><em>Styling</em>: letting authors write more sophisticated themes.</li> </ul> <div class="cleared row topicpage-table"> <div class="section"> <h2 id="Semantics" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/web/20130113011431im_/https://developer.mozilla.org/files/3827/HTML5_Semantics_512.png" style="vertical-align: middle; width: 64px; height: 64px; padding-right: 0.5em;">Semantics</h2> <dl> <dt> <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sections and outlines in HTML5</a></dt> <dd> A look at the new outlining and sectioning element in HTML5: <code><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/Element/section" title="<section>"><section></a></code>, <code><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/Element/article" title="<article>"><article></a></code>, <code><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/Element/nav" title="<nav>"><nav></a></code>, <code><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/Element/header" title="<header>"><header></a></code>, <code><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/Element/footer" title="<footer>"><footer></a></code>, <code><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/Element/aside" title="<aside>"><aside></a></code> and <code><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/Element/hgroup" title="<hgroup>"><hgroup></a></code>.</dd> <dt> <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Using HTML5 audio and video</a></dt> <dd> The <code><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/Element/audio" title="<audio>"><audio></a></code> and <code><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/Element/video" title="<video>"><video></a></code> elements embed and allow the manipulation of new multimedia content.</dd> <dt> <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/Forms_in_HTML" title="Forms in HTML5">Forms in HTML5</a></dt> <dd> A look at improvements to web forms in HTML5: the constraint validation API, several new attributes, new values for the <code><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/Element/input" title="<input>"><input></a></code> attribute <code><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/Element/input#attr-type">type</a></code> and the new <code><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/Element/output" title="<output>"><output></a></code> element.</dd> <dt> New semantic elements</dt> <dd> Beside sections, media and forms elements, numerous new elements, like <code><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/Element/mark" title="<mark>"><mark></a></code>, <code><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/Element/figure" title="<figure>"><figure></a></code>, <code><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/Element/figcaption" title="<figcaption>"><figcaption></a></code>, <code><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/Element/data" title="<data>"><data></a></code>, <code><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/Element/time" title="<time>"><time></a></code>, <code><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/Element/output" title="<output>"><output></a></code>, <code><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/Element/progress" title="<progress>"><progress></a></code>, or <code><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/Element/meter" title="<meter>"><meter></a></code>, increasing the amount of <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/HTML5/HTML5_element_list" title="HTML/HTML5/HTML5_element_list">valid HTML5 elements</a>.</dd> <dt> Improvement in <code><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/Element/iframe" title="<iframe>"><iframe></a></code></dt> <dd> Using the <code><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/Element/iframe#attr-sandbox">sandbox</a></code>, <code><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/Element/iframe#attr-seamless">seamless</a></code>, and <code><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/Element/iframe#attr-srcdoc">srcdoc</a></code> attributes, authors can now precise the level of security and the wished rendering of an <code><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/Element/iframe" title="<iframe>"><iframe></a></code> element.</dd> <dt> <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/MathML" title="MathML">MathML</a></dt> <dd> Allows to directly embed mathematical formulas.</dd> <dt> <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/HTML5/Introduction_to_HTML5" title="HTML/HTML5/Introduction_to_HTML5">Introduction to HTML5</a></dt> <dd> This article introduces how to indicate to the problem that you are using HTML5 in your web design or web application.</dd> <dt> <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">HTML5-compliant parser</a></dt> <dd> The parser, which turns the bytes of an HTML document into a DOM, has been extended and now precisely defines the behavior to use in all cases, even when faced with invalid HTML. This leads to far greater predictability and interoperability between HTML5-compliant browsers.</dd> </dl> <h2 id="Connectivity" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/web/20130113011431im_/https://developer.mozilla.org/files/3839/HTML5_Connectivity_512.png" style="vertical-align: middle; width: 64px; height: 64px; padding-right: 0.5em;">Connectivity</h2> <dl> <dt> <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/WebSockets" title="WebSockets">Web Sockets</a></dt> <dd> Allows to create a permanent connection between the page and the server and to exchange non-HTML data through that means.</dd> <dt> <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/Server-sent_events/Using_server-sent_events" title="Server-sent_events/Using_server-sent_events">Server-sent events</a></dt> <dd> Allows a server to push events to client, rather than the classical paradigm where the server could send data only in response to a client's request.</dd> <dt> <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt> <dd> This technology, where RTC stands for Real-Time Communication, allow to connect to other people and control videoconferencing directly in the browser, without the need for a plugin or an external application.</dd> </dl> <h2 id="Offline_.26_storage" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/web/20130113011431im_/https://developer.mozilla.org/files/3833/HTML5_Offline_Storage_512.png" style="vertical-align: middle; width: 64px; height: 64px; padding-right: 0.5em;">Offline & storage</h2> <dl> <dt> <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">Offline resources: the application cache</a></dt> <dd> Firefox fully supports the HTML5 offline resource specification. Most others have offline resource support at some level.</dd> <dt> <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Online and offline events</a></dt> <dd> Firefox 3 supports WHATWG online and offline events, which let applications and extensions detect whether or not there's an active Internet connection, as well as to detect when the connection goes up and down.</dd> <dt> <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/DOM/Storage" title="DOM/Storage">WHATWG client-side session and persistent storage (aka DOM Storage)</a></dt> <dd> Client-side session and persistent storage allows web applications to store structured data on the client side.</dd> <dt> <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt> <dd> Is a web standard for the storage of significant amounts of structured data in the browser and for high performance searches on this data using indexes.</dd> <dt> <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">Using files from web applications</a></dt> <dd> Support for the new HTML5 File API has been added to Gecko, making it possible for web applications to access local files selected by the user. This includes support for selecting multiple files using the <span style="font-family: monospace;"><code><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/Element/input" title="<input>"><input></a></code></span> of <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/Element/Input#attr-type" title="HTML/Element/input#attr-type"><strong>type</strong></a> <span style="font-family: Courier New;">file</span> HTML element's new <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/Element/Input#attr-multiple" title="HTML/Element/input#attr-multiple"><strong>multiple</strong></a> attribute. There also is <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a>.</dd> </dl> <h2 id="Multimedia" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/web/20130113011431im_/https://developer.mozilla.org/files/3835/HTML5_Multimedia_512.png" style="vertical-align: middle; width: 64px; height: 64px; padding-right: 0.5em;">Multimedia</h2> <dl> <dt> <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Using HTML5 audio and video</a></dt> <dd> The <code><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/Element/audio" title="<audio>"><audio></a></code> and <code><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/Element/video" title="<video>"><video></a></code> elements embed and allow the manipulation of new multimedia content.</dd> <dt> <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt> <dd> This technology, where RTC stands for Real-Time Communication, allow to connect to other people and control videoconferencing directly in the browser, without the need for a plugin or an external application.</dd> <dt> <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Using the Camera API</a></dt> <dd> Allows to use, manipulate and store an image from the computer's camera.</dd> <dt> Track and WebVTT</dt> <dd> The <code><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/Element/track" title="<track>"><track></a></code> element allows subtitles and chapters. <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> is a text track format.</dd> </dl> <h2 id="3D.2C_graphics_.26_effects" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/web/20130113011431im_/https://developer.mozilla.org/files/3841/HTML5_3D_Effects_512.png" style="vertical-align: middle; width: 64px; height: 64px; padding-right: 0.5em;">3D, graphics & effects</h2> <dl> <dt> <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/Canvas_tutorial" title="Canvas tutorial">Canvas Tutorial</a></dt> <dd> Learn about the new <code><code><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/Element/canvas" title="<canvas>"><canvas></a></code></code> element and how to draw graphs and other objects in Firefox</dd> <dt> <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">HTML5 text API for <code><canvas></code> elements</a></dt> <dd> The HTML5 text API is now supported by <code><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/Element/canvas" title="<canvas>"><canvas></a></code> elements.</dd> <dt> <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/WebGL" title="WebGL">WebGL</a></dt> <dd> WebGL brings 3D graphics to the Web by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 <code><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/Element/canvas" title="<canvas>"><canvas></a></code> elements.</dd> <dt> <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/SVG" title="SVG">SVG</a></dt> <dd> An XML-based format of vectorial images that can directly be embdedded in the HTML.</dd> <dt> </dt> </dl> </div> <div class="section"> <h2 id="Performance_.26_integration" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/web/20130113011431im_/https://developer.mozilla.org/files/3831/HTML5_Performance_512.png" style="vertical-align: middle; width: 64px; height: 64px; padding-right: 0.5em;">Performance & integration</h2> <dl> <dt> <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/DOM/Using_web_workers" title="Using web workers">Web Workers</a></dt> <dd> Allows to delegate JavaScript evaluation to background threads, allowing these activities to prevent slowing down interactive events.</dd> <dt> <code><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> Level 2</dt> <dd> Allows to fetch asynchronously some parts of the page, allowing it to be display dynamic content, varying according the time and user actions. This is the technology behind <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/AJAX" title="AJAX">Ajax</a>.</dd> <dt> JIT-compiling JavaScript engines</dt> <dd> The new generation of JavaScript engines are much more powerful , leading to greater performance.</dd> <dt> <a href="https://web.archive.org/web/20130113011431/https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating_the_browser_history">History API</a></dt> <dd> Allows the manipulation of the browser history. This is especially useful for pages loading interactively new information.</dd> <dt> <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/Content_Editable" title="HTML/Content Editable">The contentEditable attribute: transform your website to a wiki!</a></dt> <dd> HTML5 has standardized the contentEditable attribute. Learn more about this feature.</dd> <dt> <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">Drag and drop</a></dt> <dd> The HTML5 drag and drop API allows support for dragging and dropping items within and between web sites. This also provides a simpler API for use by extensions and Mozilla-based applications.</dd> <dt> <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">Focus management in HTML</a></dt> <dd> The new HTML5 <code>activeElement</code> and <code>hasFocus</code> attributes are supported.</dd> <dt> <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">Web-based protocol handlers</a></dt> <dd> You can now register web applications as protocol handlers using the <code>navigator.registerProtocolHandler()</code> method.</dd> <dt> <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/DOM/window.requestAnimationFrame" title="DOM/window.requestAnimationFrame"><code>requestAnimationFrame</code></a></dt> <dd> Allows to control animations rendering to obtain optimal performance.</dd> <dt> <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/DOM/Using_full-screen_mode" title="DOM/Using_full-screen_mode">Fullscreen API</a></dt> <dd> Controls the usage of the whole screen for a Web page or application, without the browser UI displayed.</dd> <dt> <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt> <dd> Allows to lock the pointer to the content, so games and similar application don't lose the focus when the pointer reaches the window limit.</dd> <dt> <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Online and offline events</a></dt> <dd> In order to build a good offline-capable web application, you need to know when your application is actually offline. Incidentally, you also need to know when your application has returned to an online status again.</dd> </dl> <h2 id="Device_access" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/web/20130113011431im_/https://developer.mozilla.org/files/3837/HTML5_Device_Access_512.png" style="vertical-align: middle; width: 64px; height: 64px; padding-right: 0.5em;">Device access</h2> <dl> <dt> <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Using the Camera API</a></dt> <dd> Allows to use, manipulate and store an image from the computer's camera.</dd> <dt> <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/DOM/Touch_events" title="DOM/Touch_events">Touch events</a></dt> <dd> Handlers to react to events created by a user pressing touch screens.</dd> <dt> <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/Using_geolocation" title="Using geolocation">Using geolocation</a></dt> <dd> Let browsers locate the position of the user using geolocation.</dd> <dt> <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/Detecting_device_orientation" title="Detecting_device_orientation">Detecting device orientation</a></dt> <dd> Let get the information when the device on which runs the browser change orientation. This can be used as an input device (e.g. to make games that react to the position of the device) or to adapt the layout of a page to the orientation of the screen (portrait or landscape).</dd> <dt> <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt> <dd> Allows to lock the pointer to the content, so games and similar application don't lose the focus when the pointer reaches the window limit.</dd> </dl> <h2 id="Styling" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/web/20130113011431im_/https://developer.mozilla.org/files/3829/HTML5_Styling_512.png" style="vertical-align: middle; width: 64px; height: 64px; padding-right: 0.5em;">Styling</h2> <p><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/CSS" title="CSS">CSS</a> has been extended to be able to style elements in a much more complex way. This is often referred as <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a>, though CSS is not a monolithic specification anymore and the different modules are not all at level 3: some are at level 1 and some at level 4, with all the intermediate levels covered.</p> <dl> <dt> New background styling features</dt> <dd> It is now possible to put a shadow to a box, using <code><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/CSS/box-shadow">box-shadow</a></code> and <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple_backgrounds">multiple backgrounds</a> can be set.</dd> <dt> More fancy borders</dt> <dd> Not only it is now possible to use images to style borders, using <code><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/CSS/border-image">border-image</a></code> and its associated longhand properties, but rounded borders are supported via the <code><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/CSS/border-radius">border-radius</a></code> property.</dd> <dt> Animating your style</dt> <dd> Using <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions" title="CSS/Using_CSS_transitions">CSS Transitions</a> to animate between different states or using <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_animations" title="CSS/Using_CSS_animations">CSS Animations</a> to animate parts of the page without a trigerring event, you can now control mobile elements on your page.</dd> <dt> Typography improvement</dt> <dd> Authors have better control to reach better typography. They can control <code><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/CSS/text-overflow">text-overflow</a></code> and <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/CSS/hyphens" title="CSS/hyphens">hyphenation</a>, but also can a <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/CSS/text-shadow" title="CSS/text-shadow">shadow</a> to it or control more precisely its <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/CSS/text-decoration" title="SVG/Attribute/text-decoration">decorations</a>. Custom typefaces can be downloaded and applied thanks to the new <code><a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/CSS/@font-face">@font-face</a></code> at-rule.</dd> <dt> New presentational layouts</dt> <dd> In order to improve the flexibility of designs, two new layouts have been added: the <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="CSS/Using_CSS_multi-column_layouts">CSS multi-column layout</a>, and the <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/CSS/Flexbox" title="CSS/Flexbox">CSS flexible box layout</a>.</dd> </dl> </div> </div> <p><span style="color: #0000cd;"><strong>Html5 Tutorial References</strong></span></p> <p><a class="external" href="https://web.archive.org/web/20130113011431/http://www.html5andcss3.org/" title="http://www.html5andcss3.org">Html5 Tutorial</a></p> </div> <section class="page-meta"> <section id="page-tags"> <h2>Tags (4)</h2> <div id="deki-page-tags"> <ul class="tags tagit ui-widget ui-widget-content"> <li class="tagit-choice ui-widget-content ui-state-default"> <a class="text tagit-label" href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/tag/References">References</a> </li> <li class="tagit-choice ui-widget-content ui-state-default"> <a class="text tagit-label" href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/tag/HTML">HTML</a> </li> <li class="tagit-choice ui-widget-content ui-state-default"> <a class="text tagit-label" href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/tag/HTML5">HTML5</a> </li> <li class="tagit-choice ui-widget-content ui-state-default"> <a class="text tagit-label" href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/tag/Web%20Development">Web Development</a> </li> </ul> </div> </section> <section id="page-attachments"> <h2>Attachments <bdi>(<span id="page-attachments-count">9</span>)</bdi></h2> <p id="page-attachments-no-message" class="hidden"> This document has no attachments. </p> <script> // This is a global, but has to be :/ MDN_ATTACHMENTS = [{"creatorUrl": "/en-US/profiles/Jay", "description": "", "creator": "Jay", "mime": "image/png", "date": "2011-12-20 00:36:08", "id": 3563, "size": 2223, "title": "HTML5_Logo_128.png", "url": "/files/3563/HTML5_Logo_128.png", "html": "<tr data-revision-id=\"3872\" data-attachment-id=\"3563\">\n <td class=\"attachment-name-cell\">\n <a href=\"/files/3563/HTML5_Logo_128.png\" target=\"_blank\">HTML5_Logo_128.png</a>\n <div class=\"attachment-description\"></div>\n </td>\n <td>2223 bytes</td>\n <td>2011-12-20 00:36:08</td>\n <td><a href=\"/en-US/profiles/Jay\">Jay</a></td>\n</tr>", "revision": 3872}, {"creatorUrl": "/en-US/profiles/teoli", "description": " ", "creator": "teoli", "mime": "image/png", "date": "2012-08-20 05:08:25", "id": 3827, "size": 4932, "title": "HTML5 Semantics", "url": "/files/3827/HTML5_Semantics_512.png", "html": "<tr data-revision-id=\"4155\" data-attachment-id=\"3827\">\n <td class=\"attachment-name-cell\">\n <a href=\"/files/3827/HTML5_Semantics_512.png\" target=\"_blank\">HTML5 Semantics</a>\n <div class=\"attachment-description\"> </div>\n </td>\n <td>4932 bytes</td>\n <td>2012-08-20 05:08:25</td>\n <td><a href=\"/en-US/profiles/teoli\">teoli</a></td>\n</tr>", "revision": 4155}, {"creatorUrl": "/en-US/profiles/teoli", "description": " ", "creator": "teoli", "mime": "image/png", "date": "2012-08-20 05:08:50", "id": 3829, "size": 3991, "title": "HTML5 Styling", "url": "/files/3829/HTML5_Styling_512.png", "html": "<tr data-revision-id=\"4157\" data-attachment-id=\"3829\">\n <td class=\"attachment-name-cell\">\n <a href=\"/files/3829/HTML5_Styling_512.png\" target=\"_blank\">HTML5 Styling</a>\n <div class=\"attachment-description\"> </div>\n </td>\n <td>3991 bytes</td>\n <td>2012-08-20 05:08:50</td>\n <td><a href=\"/en-US/profiles/teoli\">teoli</a></td>\n</tr>", "revision": 4157}, {"creatorUrl": "/en-US/profiles/teoli", "description": " ", "creator": "teoli", "mime": "image/png", "date": "2012-08-20 05:09:06", "id": 3831, "size": 11330, "title": "HTML5 Performance", "url": "/files/3831/HTML5_Performance_512.png", "html": "<tr data-revision-id=\"4159\" data-attachment-id=\"3831\">\n <td class=\"attachment-name-cell\">\n <a href=\"/files/3831/HTML5_Performance_512.png\" target=\"_blank\">HTML5 Performance</a>\n <div class=\"attachment-description\"> </div>\n </td>\n <td>11330 bytes</td>\n <td>2012-08-20 05:09:06</td>\n <td><a href=\"/en-US/profiles/teoli\">teoli</a></td>\n</tr>", "revision": 4159}, {"creatorUrl": "/en-US/profiles/teoli", "description": " ", "creator": "teoli", "mime": "image/png", "date": "2012-08-20 05:09:32", "id": 3833, "size": 9223, "title": "HTML5 Offline storage", "url": "/files/3833/HTML5_Offline_Storage_512.png", "html": "<tr data-revision-id=\"4161\" data-attachment-id=\"3833\">\n <td class=\"attachment-name-cell\">\n <a href=\"/files/3833/HTML5_Offline_Storage_512.png\" target=\"_blank\">HTML5 Offline storage</a>\n <div class=\"attachment-description\"> </div>\n </td>\n <td>9223 bytes</td>\n <td>2012-08-20 05:09:32</td>\n <td><a href=\"/en-US/profiles/teoli\">teoli</a></td>\n</tr>", "revision": 4161}, {"creatorUrl": "/en-US/profiles/teoli", "description": " ", "creator": "teoli", "mime": "image/png", "date": "2012-08-20 05:09:54", "id": 3835, "size": 2159, "title": "HTML5 Multimedia", "url": "/files/3835/HTML5_Multimedia_512.png", "html": "<tr data-revision-id=\"4163\" data-attachment-id=\"3835\">\n <td class=\"attachment-name-cell\">\n <a href=\"/files/3835/HTML5_Multimedia_512.png\" target=\"_blank\">HTML5 Multimedia</a>\n <div class=\"attachment-description\"> </div>\n </td>\n <td>2159 bytes</td>\n <td>2012-08-20 05:09:54</td>\n <td><a href=\"/en-US/profiles/teoli\">teoli</a></td>\n</tr>", "revision": 4163}, {"creatorUrl": "/en-US/profiles/teoli", "description": " ", "creator": "teoli", "mime": "image/png", "date": "2012-08-20 05:10:17", "id": 3837, "size": 3103, "title": "HTML5 Device Access", "url": "/files/3837/HTML5_Device_Access_512.png", "html": "<tr data-revision-id=\"4165\" data-attachment-id=\"3837\">\n <td class=\"attachment-name-cell\">\n <a href=\"/files/3837/HTML5_Device_Access_512.png\" target=\"_blank\">HTML5 Device Access</a>\n <div class=\"attachment-description\"> </div>\n </td>\n <td>3103 bytes</td>\n <td>2012-08-20 05:10:17</td>\n <td><a href=\"/en-US/profiles/teoli\">teoli</a></td>\n</tr>", "revision": 4165}, {"creatorUrl": "/en-US/profiles/teoli", "description": " ", "creator": "teoli", "mime": "image/png", "date": "2012-08-20 05:10:41", "id": 3839, "size": 3920, "title": "HTML5 Connectivity", "url": "/files/3839/HTML5_Connectivity_512.png", "html": "<tr data-revision-id=\"4167\" data-attachment-id=\"3839\">\n <td class=\"attachment-name-cell\">\n <a href=\"/files/3839/HTML5_Connectivity_512.png\" target=\"_blank\">HTML5 Connectivity</a>\n <div class=\"attachment-description\"> </div>\n </td>\n <td>3920 bytes</td>\n <td>2012-08-20 05:10:41</td>\n <td><a href=\"/en-US/profiles/teoli\">teoli</a></td>\n</tr>", "revision": 4167}, {"creatorUrl": "/en-US/profiles/teoli", "description": " ", "creator": "teoli", "mime": "image/png", "date": "2012-08-20 05:11:16", "id": 3841, "size": 4474, "title": "HTML5 3D Effects", "url": "/files/3841/HTML5_3D_Effects_512.png", "html": "<tr data-revision-id=\"4169\" data-attachment-id=\"3841\">\n <td class=\"attachment-name-cell\">\n <a href=\"/files/3841/HTML5_3D_Effects_512.png\" target=\"_blank\">HTML5 3D Effects</a>\n <div class=\"attachment-description\"> </div>\n </td>\n <td>4474 bytes</td>\n <td>2012-08-20 05:11:16</td>\n <td><a href=\"/en-US/profiles/teoli\">teoli</a></td>\n</tr>", "revision": 4169}]; </script> <table cellpadding="0" cellspacing="0" id="page-attachments-table" class=""> <thead> <th>File</th> <th>Size</th> <th>Date</th> <th>Attached by</th> </thead> <tbody> <tr data-revision-id="3872" data-attachment-id="3563"> <td class="attachment-name-cell"> <a href="/web/20130113011431/https://developer.mozilla.org/files/3563/HTML5_Logo_128.png" target="_blank">HTML5_Logo_128.png</a> <div class="attachment-description"></div> </td> <td>2223 bytes</td> <td>2011-12-20 00:36:08</td> <td><a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/Jay">Jay</a></td> </tr> <tr data-revision-id="4155" data-attachment-id="3827"> <td class="attachment-name-cell"> <a href="/web/20130113011431/https://developer.mozilla.org/files/3827/HTML5_Semantics_512.png" target="_blank">HTML5 Semantics</a> <div class="attachment-description"> </div> </td> <td>4932 bytes</td> <td>2012-08-20 05:08:25</td> <td><a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/teoli">teoli</a></td> </tr> <tr data-revision-id="4157" data-attachment-id="3829"> <td class="attachment-name-cell"> <a href="/web/20130113011431/https://developer.mozilla.org/files/3829/HTML5_Styling_512.png" target="_blank">HTML5 Styling</a> <div class="attachment-description"> </div> </td> <td>3991 bytes</td> <td>2012-08-20 05:08:50</td> <td><a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/teoli">teoli</a></td> </tr> <tr data-revision-id="4159" data-attachment-id="3831"> <td class="attachment-name-cell"> <a href="/web/20130113011431/https://developer.mozilla.org/files/3831/HTML5_Performance_512.png" target="_blank">HTML5 Performance</a> <div class="attachment-description"> </div> </td> <td>11330 bytes</td> <td>2012-08-20 05:09:06</td> <td><a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/teoli">teoli</a></td> </tr> <tr data-revision-id="4161" data-attachment-id="3833"> <td class="attachment-name-cell"> <a href="/web/20130113011431/https://developer.mozilla.org/files/3833/HTML5_Offline_Storage_512.png" target="_blank">HTML5 Offline storage</a> <div class="attachment-description"> </div> </td> <td>9223 bytes</td> <td>2012-08-20 05:09:32</td> <td><a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/teoli">teoli</a></td> </tr> <tr data-revision-id="4163" data-attachment-id="3835"> <td class="attachment-name-cell"> <a href="/web/20130113011431/https://developer.mozilla.org/files/3835/HTML5_Multimedia_512.png" target="_blank">HTML5 Multimedia</a> <div class="attachment-description"> </div> </td> <td>2159 bytes</td> <td>2012-08-20 05:09:54</td> <td><a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/teoli">teoli</a></td> </tr> <tr data-revision-id="4165" data-attachment-id="3837"> <td class="attachment-name-cell"> <a href="/web/20130113011431/https://developer.mozilla.org/files/3837/HTML5_Device_Access_512.png" target="_blank">HTML5 Device Access</a> <div class="attachment-description"> </div> </td> <td>3103 bytes</td> <td>2012-08-20 05:10:17</td> <td><a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/teoli">teoli</a></td> </tr> <tr data-revision-id="4167" data-attachment-id="3839"> <td class="attachment-name-cell"> <a href="/web/20130113011431/https://developer.mozilla.org/files/3839/HTML5_Connectivity_512.png" target="_blank">HTML5 Connectivity</a> <div class="attachment-description"> </div> </td> <td>3920 bytes</td> <td>2012-08-20 05:10:41</td> <td><a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/teoli">teoli</a></td> </tr> <tr data-revision-id="4169" data-attachment-id="3841"> <td class="attachment-name-cell"> <a href="/web/20130113011431/https://developer.mozilla.org/files/3841/HTML5_3D_Effects_512.png" target="_blank">HTML5 3D Effects</a> <div class="attachment-description"> </div> </td> <td>4474 bytes</td> <td>2012-08-20 05:11:16</td> <td><a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/teoli">teoli</a></td> </tr> </tbody> </table> </section> <section id="doc-contributors"> Contributors to this page: <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/Jay">Jay</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/lmorchard">lmorchard</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/princetoad@gmail.com">princetoad@gmail.com</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/auco">auco</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/sebmozilla">sebmozilla</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/eko.setiawan202">eko.setiawan202</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/Ashprit">Ashprit</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/Verruckt">Verruckt</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/trevorh">trevorh</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/shitface">shitface</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/Carleial">Carleial</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/thatsmekaustubh">thatsmekaustubh</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/Deadsparrow">Deadsparrow</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/MarkGiffin">MarkGiffin</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/harangozo">harangozo</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/teoli">teoli</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/testaccount">testaccount</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/vigia122">vigia122</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/msrishikesh">msrishikesh</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/louisremi">louisremi</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/f.sanxz">f.sanxz</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/xaky">xaky</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/Crash">Crash</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/Sheppy">Sheppy</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/jswisher">jswisher</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/juliepagano">juliepagano</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/Dwchiang">Dwchiang</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/coder">coder</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/leegorous">leegorous</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/Marsf">Marsf</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/funkyeah">funkyeah</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/makkes">makkes</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/berkerpeksag">berkerpeksag</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/Jason23">Jason23</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/Ptak82">Ptak82</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/KyleBarnhart">KyleBarnhart</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/jisung">jisung</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/iSpellbinder">iSpellbinder</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/Jesse">Jesse</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/vladikoff">vladikoff</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/tw2113">tw2113</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/Mohammed_Hossam">Mohammed_Hossam</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/ethertank">ethertank</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/Izel">Izel</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/BenoitL">BenoitL</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/haboque">haboque</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/medimnos">medimnos</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/swapnilraja1212">swapnilraja1212</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/Ms2ger">Ms2ger</a>, <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/bdnd">bdnd</a> <br/> Last updated by: <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/swapnilraja1212">swapnilraja1212</a>, <time datetime="2013-01-06T04:26:31-08:00">Jan 6, 2013 4:26:31 AM</time> <br/> Last reviewed by: <a href="/web/20130113011431/https://developer.mozilla.org/en-US/profiles/swapnilraja1212">swapnilraja1212</a>, <time datetime="2013-01-06T04:26:32-08:00">Jan 6, 2013 4:26:32 AM</time> </section> </section> </article> <form id="wiki-page-edit" class="editing" method="post" action="/web/20130113011431/https://developer.mozilla.org/en-US/docs/HTML/HTML5$edit"> <input type="hidden" name="form" id="form" value="rev"/> <input type="hidden" name="content" id="content" value=""/> </form> </div> </div> </section> <section id="footbar"> <div class="wrap"> <p> What do you think of the new MDN? Please <a href="https://web.archive.org/web/20130113011431/http://mdn.uservoice.com/forums/51389-mdn-website-feedback-http-developer-mozilla-org">share your feedback</a> with us. <a id="dev-mdc-link" href="https://web.archive.org/web/20130113011431/https://lists.mozilla.org/listinfo/dev-mdc">Join our mailing list</a> to discuss ways to help create great documentation. </p> </div> </section> <footer id="site-info" class="footer" role="contentinfo"> <div class="wrap"> <div id="legal"> <img src="https://web.archive.org/web/20130113011431im_/https://developer.cdn.mozilla.net/media/img/mdn-logo-tiny.png" alt="" width="42" height="48"> <p id="copyright">© 2005 - 2013 Mozilla Developer Network and individual contributors</p> <p> Content is available under <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/Project:Copyrights">these licenses</a> • <a href="/web/20130113011431/https://developer.mozilla.org/en-US/docs/Project:About">About MDN</a> • <a href="https://web.archive.org/web/20130113011431/http://www.mozilla.org/en-US/privacy">Privacy Policy</a> </div> <ul class="user-state signed-out"> <li class="user-signin menu"> <form class="browserid" action="/web/20130113011431/https://developer.mozilla.org/en-US/users/browserid_verify" method="POST"> <input id="next" name="next" type="hidden" value="/en-US/docs/HTML/HTML5"/> <input required="required" type="hidden" name="assertion" id="id_assertion"/> <a href="#" target="_blank" class="browserid-signin toggle" aria-haspopup="true" title="Sign in with Persona">Sign in</a> <div class="browserid-info sub-menu" aria-hidden="true"> <h3>What's this?</h3> <p>MDN has switched to <a href="https://web.archive.org/web/20130113011431/https://persona.org/" target="_blank" rel="external">Persona</a>, a safe and simple way to sign in with just your e-mail address. <a href="https://web.archive.org/web/20130113011431/http://identity.mozilla.com/post/12950196039/deploying-browserid-at-mozilla" rel="external">Learn more about why Mozilla is using Persona</a>.</p> <p><strong>Returning members:</strong> sign in with Persona and you'll be connected to your MDN profile (all your information is still here).</p> <p><strong>New members:</strong> sign in with Persona first, then you'll be able to set up your new MDN profile.</p> <p><a href="#" target="_blank" class="browserid-signin" title="Sign in with Persona">Sign in</a></p> </div> </form> </li> </ul> <form class="languages go" method="get" action="/web/20130113011431/https://developer.mozilla.org/en-US/docs"> <label for="language">Other languages:</label> <select id="language" class="wiki-l10n" name="next" dir="ltr"> <option value="/en-US/docs/HTML/HTML5" selected> English (US) </option> <option value="/bn-BD/docs/HTML/HTML5"> বাংলা (বাংলাদেশ) </option> <option value="/en-US/docs/pt-br/HTML/HTML5"> English (US) </option> <option value="/es/docs/HTML/HTML5"> Español </option> <option value="/fa/docs/HTML/HTML5"> فارسی </option> <option value="/fr/docs/HTML/HTML5"> Français </option> <option value="/it/docs/HTML/HTML5"> Italiano </option> <option value="/ja/docs/HTML/HTML5"> 日本語 </option> <option value="/ko/docs/HTML/HTML5"> 한국어 </option> <option value="/pl/docs/HTML/HTML5"> Polski </option> <option value="/pt-BR/docs/HTML/HTML5"> Português (do Brasil) </option> <option value="/pt-PT/docs/HTML/HTML5"> Português (Europeu) </option> <option value="/ru/docs/HTML/HTML5"> Русский </option> <option value="/tr/docs/HTML/HTML5"> Türkçe </option> <option value="/zh-CN/docs/HTML/HTML5-and-his-friends"> 中文 (简体) </option> <option value="/zh-TW/docs/HTML/HTML5"> 正體中文 (繁體) </option> </select> <noscript><button type="submit">Go</button></noscript> </form> </div> </footer> <script src="/web/20130113011431js_/https://developer.mozilla.org/en-US/jsi18n/build:5c536df"></script> <script src="//web.archive.org/web/20130113011431js_/https://www.mozilla.org/tabzilla/media/js/tabzilla.js" async></script> <script src="//web.archive.org/web/20130113011431js_/https://www.google.com/jsapi" type="text/javascript"></script> <script src="https://web.archive.org/web/20130113011431js_/https://login.persona.org/include.js" type="text/javascript"></script> <script src="https://web.archive.org/web/20130113011431js_/https://developer.cdn.mozilla.net/media/js/mdn-min.js?build=5c536df"></script> <script src="https://web.archive.org/web/20130113011431js_/https://developer.cdn.mozilla.net/media/js/wiki-min.js?build=5c536df"></script> <script type="text/javascript"> //<![CDATA[ var _tag=new WebTrends(); _tag.dcsGetId(); //]]>> </script> <script type="text/javascript"> //<![CDATA[ _tag.dcsCollect(); //]]>> </script> <noscript> <div><img alt="DCSIMG" id="DCSIMG" width="1" height="1" src="//web.archive.org/web/20130113011431im_/https://statse.webtrendslive.com/dcs8yrjuavz5bdaun34r2o8bi_8o8x/njs.gif?dcsuri=/nojavascript&WT.js=No&WT.tv=8.6.2"/></div> </noscript> </body> </html>