CINXE.COM

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"> <head><script type="text/javascript" src="/_static/js/bundle-playback.js?v=HxkREWBo" charset="utf-8"></script> <script type="text/javascript" src="/_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="/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("http://www.apple.com/html5/","20100823202950","https://web.archive.org/","web","/_static/", "1282595390"); </script> <link rel="stylesheet" type="text/css" href="/_static/css/banner-styles.css?v=S1zqJCYt" /> <link rel="stylesheet" type="text/css" href="/_static/css/iconochive.css?v=3PDvdIFv" />  <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta http-equiv="pics-label" content="(pics-1.1 "http://www.icra.org/ratingsv02.html" l gen true for "http://www.apple.com" r (cz 1 lz 1 nz 1 oz 1 vz 1) "http://www.rsac.org/ratingsv01.html" l gen true for "http://www.apple.com" r (n 0 s 0 v 0 l 0))"/> <meta name="Author" content="Apple Inc."/> <meta name="viewport" content="width=1024"/> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/> <meta name="viewport" content="width=1024; maximum-scale=1.2;"/> <title>Apple - HTML5</title> <meta name="omni_page" content="HTML5 - Index"/> <meta name="Category" content=""/> <meta name="Description" content=""/> <script src="https://web.archive.org/web/20100823202950js_/http://images.apple.com/global/scripts/lib/prototype.js" type="text/javascript" charset="utf-8"></script> <script src="https://web.archive.org/web/20100823202950js_/http://images.apple.com/global/scripts/lib/scriptaculous.js" type="text/javascript" charset="utf-8"></script> <script src="https://web.archive.org/web/20100823202950js_/http://images.apple.com/global/scripts/browserdetect.js" type="text/javascript" charset="utf-8"></script> <script src="https://web.archive.org/web/20100823202950js_/http://images.apple.com/global/scripts/apple_core.js" type="text/javascript" charset="utf-8"></script> <script src="https://web.archive.org/web/20100823202950js_/http://images.apple.com/global/scripts/search_decorator.js" type="text/javascript" charset="utf-8"></script> <script src="https://web.archive.org/web/20100823202950js_/http://images.apple.com/global/scripts/lib/event_mixins.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var elements = ['article', 'nav', 'section', 'header', 'aside', 'footer']; for (var i=elements.length-1; i>=0; i--) { document.createElement(elements[i]); } </script> <script type="text/javascript" src="https://web.archive.org/web/20100823202950js_/http://images.apple.com/html5/scripts/showcase.js"></script> <script type="text/javascript" src="https://web.archive.org/web/20100823202950js_/http://images.apple.com/html5/showcase/scripts/library.js"></script> <link rel="stylesheet" href="/web/20100823202950cs_/http://www.apple.com/global/styles/base.css" type="text/css"/> <link rel="stylesheet" href="/web/20100823202950cs_/http://www.apple.com/global/styles/blackout.css" type="text/css" media="screen"/> <link rel="stylesheet" href="/web/20100823202950cs_/http://www.apple.com/html5/styles/html5.css" type="text/css" media="screen"/> </head> <body id="overview"> <script src="https://web.archive.org/web/20100823202950js_/http://images.apple.com/global/nav/scripts/shortcuts.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var searchSection = 'global'; var searchCountry = 'us'; </script> <div id="globalheader">  <ul id="globalnav"> <li id="gn-apple"><a href="/web/20100823202950/http://www.apple.com/">Apple</a></li> <li id="gn-store"><a href="https://web.archive.org/web/20100823202950/http://store.apple.com/">Store</a></li> <li id="gn-mac"><a href="/web/20100823202950/http://www.apple.com/mac/">Mac</a></li> <li id="gn-ipod"><a href="/web/20100823202950/http://www.apple.com/ipod/">iPod</a></li> <li id="gn-iphone"><a href="/web/20100823202950/http://www.apple.com/iphone/">iPhone</a></li> <li id="gn-ipad"><a href="/web/20100823202950/http://www.apple.com/ipad/">iPad</a></li> <li id="gn-itunes"><a href="/web/20100823202950/http://www.apple.com/itunes/">iTunes</a></li> <li id="gn-support"><a href="/web/20100823202950/http://www.apple.com/support/">Support</a></li> </ul>  <div id="globalsearch"> <form action="https://web.archive.org/web/20100823202950/http://searchcgi.apple.com/cgi-bin/sp/nph-searchpre11.pl" method="post" class="search" id="g-search"> <div> <input type="hidden" value="utf-8" name="oe" id="search-oe"> <input type="hidden" value="p" name="access" id="search-access"> <input type="hidden" value="us_only" name="site" id="search-site"> <input type="hidden" value="lang_en" name="lr" id="search-lr"> <label for="sp-searchtext"><span class="prettyplaceholder">Search</span><input type="search" name="q" id="sp-searchtext" class="g-prettysearch applesearch" accesskey="s"></label> </div> </form> <div id="sp-results"><div class="inside"></div></div> </div> </div> <div id="top">  <script type="text/javascript"> /* RSID: */ var s_account="appleglobal,appleushtml5" </script> <script type="text/javascript" src="https://web.archive.org/web/20100823202950js_/http://images.apple.com/global/metrics/js/s_code_h.js"></script> <script type="text/javascript"> s.pageName=AC.Tracking.pageName()+" (US)"; s.server="" s.channel="www.us.html5" s.pageType="" s.prop1="" s.prop2="" s.prop3="" s.prop4=document.URL; s.prop5="" s.prop18="" s.prop19="" /* E-commerce Variables */ s.campaign="" s.state="" s.zip="" s.events="" s.products="" s.purchaseID="" s.eVar1="" s.eVar2="" s.eVar3="" s.eVar4="" s.eVar5="" /************* DO NOT ALTER ANYTHING BELOW THIS LINE ! **************/ var s_code=s.t();if(s_code)document.write(s_code)</script>  </div> <article id="main" class="content"> <header id="pageheader"> <img src="https://web.archive.org/web/20100823202950im_/http://images.apple.com/html5/images/hero.png" width="482" height="503" alt="" class="left"/> <h1><img src="https://web.archive.org/web/20100823202950im_/http://images.apple.com/html5/images/title_html5andthefuture.png" width="352" height="92" alt="HTML5 and the future of the web."/></h1> <p class="intro">Every new Apple mobile device and every new Mac — along with the latest version of Apple’s Safari web browser — supports web standards including HTML5, CSS3, and JavaScript. These web standards are open, reliable, highly secure, and efficient. They allow web designers and developers to create advanced graphics, typography, animations, and transitions. Standards aren’t add-ons to the web. They are the web. And you can start using them today.</p> </header> <section id="showcase"> <h2>HTML5 Showcase</h2> <p class="intro">The demos below show how the latest version of Apple’s Safari web browser, new Macs, and new Apple mobile devices all support the capabilities of HTML5, CSS3, and JavaScript. Not all browsers offer this support. But soon other modern browsers will take advantage of these same web standards — and the amazing things they enable web designers to do.</p> <noscript><p>Please enable JavaScript to view this page properly.</p></noscript> <div id="html5-showcase" class="showcase"> <div class="HTML5Pane pane_1" id="pane_1"> <a href="/web/20100823202950/http://www.apple.com/html5/showcase/video/" class="trigger" id="sc_video"> <img src="https://web.archive.org/web/20100823202950im_/http://images.apple.com/html5/images/showcase_video.jpg" width="293" height="210" alt=""/> <span class="caption">Video</span> </a> </div> <div class="HTML5Pane pane_2" id="pane_2"> <a href="/web/20100823202950/http://www.apple.com/html5/showcase/typography/" class="trigger" id="sc_type"> <img src="https://web.archive.org/web/20100823202950im_/http://images.apple.com/html5/images/showcase_type.jpg" width="293" height="210" alt=""/> <span class="caption">Typography</span> </a> </div> <div class="HTML5Pane pane_3" id="pane_3"> <a href="/web/20100823202950/http://www.apple.com/html5/showcase/gallery/" class="trigger" id="sc_gallery"> <img src="https://web.archive.org/web/20100823202950im_/http://images.apple.com/html5/images/showcase_gallery.jpg" width="293" height="210" alt=""/> <span class="caption">Gallery</span> </a> </div> <div class="HTML5Pane pane_4" id="pane_4"> <a href="/web/20100823202950/http://www.apple.com/html5/showcase/transitions/" class="trigger" id="sc_transitions"> <img src="https://web.archive.org/web/20100823202950im_/http://images.apple.com/html5/images/showcase_transitions.jpg" width="293" height="210" alt=""/> <span class="caption">Transitions</span> </a> </div> <div class="HTML5Pane pane_5" id="pane_5"> <a href="/web/20100823202950/http://www.apple.com/html5/showcase/audio/" class="trigger" id="sc_audio"> <img src="https://web.archive.org/web/20100823202950im_/http://images.apple.com/html5/images/showcase_audio.jpg" width="293" height="210" alt=""/> <span class="caption">Audio</span> </a> </div> <div class="HTML5Pane pane_6" id="pane_6"> <a href="/web/20100823202950/http://www.apple.com/html5/showcase/threesixty/" class="trigger" id="sc_360"> <img src="https://web.archive.org/web/20100823202950im_/http://images.apple.com/html5/images/showcase_360.jpg" width="293" height="210" alt=""/> <span class="caption">360°</span> </a> </div> <div class="HTML5Pane pane_7" id="pane_7"> <a href="/web/20100823202950/http://www.apple.com/html5/showcase/vr/" class="trigger" id="sc_vr"> <img src="https://web.archive.org/web/20100823202950im_/http://images.apple.com/html5/images/showcase_vr.jpg" width="293" height="210" alt=""/> <span class="caption">VR</span> </a> </div> <div class="HTML5Pane learnmore pane_8" id="pane_8"> <a href="https://web.archive.org/web/20100823202950/http://developer.apple.com/safaridemos/"> <img src="https://web.archive.org/web/20100823202950im_/http://images.apple.com/html5/images/showcase_learnmore.png" width="112" height="88" alt=""/> <span class="caption"><strong>Developers: Learn how to do it yourself.</strong> Visit the Safari Dev Center for more information about HTML5 and to see how you can add effects like these to your website today. <span class="more">Learn more</span></span> </a> </div> </div> </section> </article> <div class="content promos grid2col"> <aside class="column first" id="optimized"> <a href="/web/20100823202950/http://www.apple.com/ipad/ready-for-ipad/"> <img class="right" src="https://web.archive.org/web/20100823202950im_/http://images.apple.com/html5/images/promo_optimized.jpg" width="200" height="154" alt=""/> <h2>iPad ready.</h2> <p>More and more websites are incorporating the latest web standards to deliver content optimized especially for iPad. Take a look at some of them. <span class="more">Learn more</span></p> </a> </aside> <aside class="column last" id="thoughts"> <a href="/web/20100823202950/http://www.apple.com/hotnews/thoughts-on-flash/"> <img class="right" src="https://web.archive.org/web/20100823202950im_/http://images.apple.com/html5/images/promo_thoughts.jpg" width="74" height="114" alt=""/> <h2>Thoughts on Flash.</h2> <p>Apple CEO Steve Jobs explains why iPhone, iPod touch, and iPad do not support Flash and why open standards are the future of the web. <span class="more">Learn more</span></p> </a> </aside> </div> <div id="globalfooter"> <div id="breadory"> <ol id="breadcrumbs"> <li class="home"><a href="/web/20100823202950/http://www.apple.com/">Home</a></li> <li>HTML5</li> </ol> </div> <p class="gf-buy">Shop the <a href="/web/20100823202950/http://www.apple.com/store/">Apple Online Store</a> (1-800-MY-APPLE), visit an <a href="/web/20100823202950/http://www.apple.com/retail/">Apple Retail Store</a>, or find a <a href="/web/20100823202950/http://www.apple.com/buy/">reseller</a>.</p> <ul class="gf-links piped"> <li><a href="/web/20100823202950/http://www.apple.com/about/" class="first">Apple Info</a></li> <li><a href="/web/20100823202950/http://www.apple.com/sitemap/">Site Map</a></li> <li><a href="/web/20100823202950/http://www.apple.com/hotnews/">Hot News</a></li> <li><a href="/web/20100823202950/http://www.apple.com/rss/">RSS Feeds</a></li> <li><a href="/web/20100823202950/http://www.apple.com/contact/" class="contact_us">Contact Us</a></li> <li><a href="/web/20100823202950/http://www.apple.com/choose-your-country/" class="choose" title="Choose your country or region."><img src="https://web.archive.org/web/20100823202950im_/http://images.apple.com/home/elements/worldwide_us.png" alt="United States" width="22" height="22"></a></li> </ul> <div class="gf-sosumi"> <p>Copyright © 2010 Apple Inc. All rights reserved.</p> <ul class="piped"> <li><a href="/web/20100823202950/http://www.apple.com/legal/terms/site.html" class="first">Terms of Use</a></li> <li><a href="/web/20100823202950/http://www.apple.com/privacy/">Privacy Policy</a></li> </ul> </div> </div> </body> </html>