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/","20121214133303","https://web.archive.org/","web","/_static/", "1355491983"); </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 name="Author" content="Apple Inc."/> <meta name="viewport" content="width=1024"/> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, IE=9"/> <link id="globalheader-stylesheet" rel="stylesheet" href="https://web.archive.org/web/20121214133303cs_/http://images.apple.com/global/nav/styles/navigation.css" type="text/css"/> <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/20121214133303js_/http://images.apple.com/global/scripts/lib/prototype.js" type="text/javascript" charset="utf-8"></script> <script src="https://web.archive.org/web/20121214133303js_/http://images.apple.com/global/scripts/lib/scriptaculous.js" type="text/javascript" charset="utf-8"></script> <script src="https://web.archive.org/web/20121214133303js_/http://images.apple.com/global/scripts/lib/sizzle.js" type="text/javascript" charset="utf-8"></script> <script src="https://web.archive.org/web/20121214133303js_/http://images.apple.com/global/scripts/browserdetect.js" type="text/javascript" charset="utf-8"></script> <script src="https://web.archive.org/web/20121214133303js_/http://images.apple.com/global/scripts/apple_core.js" type="text/javascript" charset="utf-8"></script> <script src="https://web.archive.org/web/20121214133303js_/http://images.apple.com/global/scripts/search_decorator.js" type="text/javascript" charset="utf-8"></script> <script src="https://web.archive.org/web/20121214133303js_/http://images.apple.com/global/ac_base/ac_base.js" type="text/javascript" charset="utf-8"></script> <script src="https://web.archive.org/web/20121214133303js_/http://images.apple.com/global/ac_retina/ac_retina.js" type="text/javascript" charset="utf-8"></script> <script src="https://web.archive.org/web/20121214133303js_/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/20121214133303js_/http://images.apple.com/html5/scripts/showcase.js"></script> <script type="text/javascript" src="https://web.archive.org/web/20121214133303js_/http://images.apple.com/html5/showcase/scripts/library.js"></script> <link rel="stylesheet" href="/web/20121214133303cs_/http://www.apple.com/global/styles/base.css" type="text/css"/> <link rel="stylesheet" href="/web/20121214133303cs_/http://www.apple.com/global/styles/blackout.css" type="text/css" media="screen"/> <link rel="stylesheet" href="/web/20121214133303cs_/http://www.apple.com/html5/styles/html5.css" type="text/css" media="screen"/> </head> <body id="overview"> <script type="text/javascript"> var searchSection = 'global'; var searchCountry = 'us'; </script> <script src="https://web.archive.org/web/20121214133303js_/http://images.apple.com/global/nav/scripts/globalnav.js" type="text/javascript" charset="utf-8"></script> <nav id="globalheader">  <ul id="globalnav" role="navigation"> <li id="gn-apple"><a href="/web/20121214133303/http://www.apple.com/"><span>Apple</span></a></li> <li id="gn-store"><a href="https://web.archive.org/web/20121214133303/http://store.apple.com/"><span>Store</span></a></li> <li id="gn-mac"><a href="/web/20121214133303/http://www.apple.com/mac/"><span>Mac</span></a></li> <li id="gn-ipod"><a href="/web/20121214133303/http://www.apple.com/ipod/"><span>iPod</span></a></li> <li id="gn-iphone"><a href="/web/20121214133303/http://www.apple.com/iphone/"><span>iPhone</span></a></li> <li id="gn-ipad"><a href="/web/20121214133303/http://www.apple.com/ipad/"><span>iPad</span></a></li> <li id="gn-itunes"><a href="/web/20121214133303/http://www.apple.com/itunes/"><span>iTunes</span></a></li> <li id="gn-support" class="gn-last"><a href="/web/20121214133303/http://www.apple.com/support/"><span>Support</span></a></li> </ul>  <div id="globalsearch"> <form action="/web/20121214133303/http://www.apple.com/search/" method="post" class="search" id="g-search"><div class="sp-label"> <label for="sp-searchtext">Search</label> <input type="text" name="q" id="sp-searchtext" accesskey="s"/> </div></form> <div id="sp-magnify"><div class="magnify-searchmode"></div><div class="magnify"></div></div> <div id="sp-results"></div> </div> </nav> <script type="text/javascript"> AC.GlobalNav.Instance = new AC.GlobalNav(); </script> <div id="top">  <script type="text/javascript"> /* RSID: */ var s_account="appleglobal,appleushtml5" </script> <script type="text/javascript" src="https://web.archive.org/web/20121214133303js_/http://images.apple.com/metrics/scripts/s_code_h.js"></script> <script type="text/javascript"> s.pageName=AC.Tracking.pageName()+" (us)"; s.channel="www.us.html5" /************* 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/20121214133303im_/http://images.apple.com/html5/images/hero.png" width="482" height="503" alt="" class="left"/> <h1><img src="https://web.archive.org/web/20121214133303im_/http://images.apple.com/html5/images/title_html5andthefuture.png" width="352" height="92" alt="HTML5 and web standards."/></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/20121214133303/http://www.apple.com/html5/showcase/video/" class="trigger" id="sc_video"> <img src="https://web.archive.org/web/20121214133303im_/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/20121214133303/http://www.apple.com/html5/showcase/typography/" class="trigger" id="sc_type"> <img src="https://web.archive.org/web/20121214133303im_/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/20121214133303/http://www.apple.com/html5/showcase/gallery/" class="trigger" id="sc_gallery"> <img src="https://web.archive.org/web/20121214133303im_/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/20121214133303/http://www.apple.com/html5/showcase/transitions/" class="trigger" id="sc_transitions"> <img src="https://web.archive.org/web/20121214133303im_/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/20121214133303/http://www.apple.com/html5/showcase/audio/" class="trigger" id="sc_audio"> <img src="https://web.archive.org/web/20121214133303im_/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/20121214133303/http://www.apple.com/html5/showcase/threesixty/" class="trigger" id="sc_360"> <img src="https://web.archive.org/web/20121214133303im_/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/20121214133303/http://www.apple.com/html5/showcase/vr/" class="trigger" id="sc_vr"> <img src="https://web.archive.org/web/20121214133303im_/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/20121214133303/http://developer.apple.com/safaridemos/"> <img src="https://web.archive.org/web/20121214133303im_/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 id="globalfooter"> <div id="breadory"> <ol id="breadcrumbs"> <li class="home"><a href="/web/20121214133303/http://www.apple.com/">Home</a></li> <li>HTML5</li> </ol> </div> <p class="gf-buy">Shop the <a href="https://web.archive.org/web/20121214133303/http://store.apple.com/us">Apple Online Store</a> (1-800-MY-APPLE), visit an <a href="/web/20121214133303/http://www.apple.com/retail/">Apple Retail Store</a>, or find a <a href="/web/20121214133303/http://www.apple.com/buy/">reseller</a>.</p> <ul class="gf-links piped"> <li><a href="/web/20121214133303/http://www.apple.com/about/" class="first">Apple Info</a></li> <li><a href="/web/20121214133303/http://www.apple.com/sitemap/">Site Map</a></li> <li><a href="/web/20121214133303/http://www.apple.com/hotnews/">Hot News</a></li> <li><a href="/web/20121214133303/http://www.apple.com/rss/">RSS Feeds</a></li> <li><a href="/web/20121214133303/http://www.apple.com/contact/" class="contact_us">Contact Us</a></li> <li><a href="/web/20121214133303/http://www.apple.com/choose-your-country/" class="choose"><img src="https://web.archive.org/web/20121214133303im_/http://images.apple.com/global/elements/flags/22x22/usa.png" alt="Choose your country or region" width="22" height="22" data-hires="true"/></a></li> </ul> <div class="gf-sosumi"> <p>Copyright © 2012 Apple Inc. All rights reserved.</p> <ul class="piped"> <li><a href="/web/20121214133303/http://www.apple.com/legal/terms/site.html" class="first">Terms of Use</a></li> <li><a href="/web/20121214133303/http://www.apple.com/privacy/">Privacy Policy</a></li> </ul> </div> </div> </body> </html>