CINXE.COM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <title>S5: A Simple Standards-Based Slide Show System</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="/favicon.ico"> <link rel="home" href="http://meyerweb.com/" title="Home" > <link rel="openid.server" href="http://www.myopenid.com/server"> <link rel="openid.delegate" href="http://emeyer.myopenid.com/"> <meta name="google-site-verification" content="I_JFi4WrY6bW7AE2ya5sSlruVvgvrIeRa1IsqO0GB78" /> <link rel="alternate" type="application/rss+xml" title="Thoughts From Eric" href="/eric/thoughts/rss2/full"> <link rel="alternate" type="application/rss+xml" title="Thoughts From Eric (only technical posts)" href="/eric/thoughts/category/tech/rss2/full"> <link rel="alternate" type="application/rss+xml" title="Thoughts From Eric (only personal posts)" href="/eric/thoughts/category/personal/rss2/full"> <link rel="alternate" type="application/rss+xml" title="Excuse of the Day" href="/feeds/excuse/rss20.xml">  <meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@meyerweb"> <meta name="twitter:title" content="meyerweb.com"> <meta name="twitter:description" content="The web home of Eric A. Meyer, CSS guy; and his wife Kathryn, doctor of nursing."> <meta name="twitter:url" content="https://meyerweb.com/"> <meta name="twitter:image" content="https://meyerweb.com/ui/i/heart/663399love.png"> <meta name="twitter:image:width" content="192"> <meta name="twitter:image:height" content="192"> <meta property="og:type" content="website"> <meta property="og:image" content="https://meyerweb.com/ui/i/hamonshu/fb-og-image.png"> <meta property="fediverse:creator" content="@meyerweb@mastodon.social"> <link rel="stylesheet" type="text/css" href="s5.css" media="screen"> </head> <body id="www-meyerweb-com" class="tools sidebar right"> <header role="banner" id="sitemast"> <a href="/">meyerweb.com</a> <nav role="navigation" aria-label="page" id="skiplinks"> <a href="#main">Main content</a> <a href="#navigate">Navigation links</a> <a href="#global">Footer</a> </nav> </header> <nav role="navigation" aria-label="site" id="navigate"> <ul id="navlinks"> <li id="archLink"><a href="/eric/thoughts/">Post Archives</a></li> <li id="cssLink"><a href="/eric/css/">CSS Work</a></li> <li id="toolsLink"><a href="/eric/tools/">Toolbox</a></li> <li id="writeLink"><a href="/eric/writing.html">Writing</a></li> <li id="speakLink"><a href="/eric/talks/">Speaking</a></li> <li id="otherLink"><a href="/other/">Other Stuff</a></li> <li id="aboutsite"><a href="/ui/about.html">About this site</a></li> </ul> </nav> <div id="main"> <div id="mainpage"> <h1>S5: A Simple Standards-Based Slide Show System</h1> <p> S5 is a slide show format based entirely on XHTML, CSS, and JavaScript. With one file, you can run a complete slide show and have a printer-friendly version as well. The markup used for the slides is very simple, highly semantic, and completely accessible. Anyone with even a smidgen of familiarity with HTML or XHTML can look at the markup and figure out how to adapt it to their particular needs. Anyone familiar with CSS can create their own slide show theme. It's totally simple, and it's totally standards-driven. </p> <p> If you'd like to see S5 in action, go ahead and run through <a href="s5-intro.html">the introductory slide show</a> (also available as <a href="s5-intro.zip">a 186KB ZIP archive</a>, the size of which is due to the presence of several images in the slide show). Feel free to try any of the features. For example, you can hit the space bar to advance to the next slide. Or use the right arrow, the down arrow, hit Return... any of these will work. The other features will be explained in, or else demonstrated by, the slide show itself. </p> <p> If you like the general idea of S5 but don't like the theme used for the introductory slide show, then fear not: there are already <a href="themes/">a number of themes</a> available, and you can of course always create your own. </p> <p> If you have a hankerin' to know more about how this system works, exactly, we have a few resources that might help. </p> <ul> <li><a href="primer.html">A Basic Primer in Using S5</a> — pretty much what it sounds like.</li> <li><a href="structure-ref.html">S5 Reference</a> — a full reference describing what markup is required, what is recommended, and what is optional in an S5 presentation file.</li> <li><a href="structure-min.html">Minimal S5 Structure</a> — a guide to the absolute bare minimum markup used in an S5 slide file.</li> <li><a href="filemap.html">S5 File Map</a> — explains what files are where, and what each one does.</li> <li><a href="faq.html">S5 FAQ</a> — it may not answer all your questions, but it will answer the common ones. The uncommon ones you'll have to send in.</li> </ul> <p> Please also visit the <a href="credits.html">thanks and acknowledgments</a> page, which lists the people who helped improve S5 beyond what I ever could have done myself. </p> </div> <div id="extra"> <div class="first panel"> <h4>Downloads</h4> <ul> <li><a href="v/1.1/s5-11.zip">S5 1.1</a> (477KB ZIP file) <p> When you uncompress the archive, you <strong>must</strong> preserve the directory structure. </p> </li> <li><a href="v/1.2/dev/v12a2.zip">S5 1.2a2</a> (177KB ZIP file) <p> Latest development release. <strong>This is an alpha release; treat it accordingly.</strong> </p> </li> </ul> </div> <div class="panel"> <h4>Contact</h4> <ul> <li><a id="contactAddr" onmouseover="setAddr('s');" onfocus="setAddr('s');" href="/other/contact.html">Send e-mail</a> </li> </ul> </div> <div class="panel"> <h4>More Information</h4> <ul> <li><a href="features.html">Feature list</a></li> <li><a href="faq.html">S5 FAQ</a></li> <li><a href="primer.html">A Basic Primer in Using S5</a></li> <li><a href="structure-ref.html">Full S5 Reference</a></li> <li><a href="xoxo-structure-ref.html">Full S5 Reference (XOXO Version)</a></li> </ul> </div> <div class="panel"> <h4>Historical Information</h4> <ul> <li><a href="v/1.0/structure-ref.html">S5 Reference</a> (v1.0)</li> <li><a href="/eric/thoughts/category/tech/s5/">S5 posts in "Thoughts From Eric"</a></li> </ul> </div> </div> </div> <footer id="global"> <div> <div id="archipelago"> <h4>Identity Archipelago</h4> <ul> <li><a rel="me" href="https://mastodon.social/@meyerweb"><img src="/pix/icons/mastodon.svg" alt="Mastodon"></a></li> <li><a rel="me" href="https://github.com/meyerweb"><img src="/pix/icons/github.png" alt="GitHub"></a></li> <li><a rel="me" href="https://codepen.io/meyerweb"><img src="/pix/icons/codepen.png" alt="Codepen"></a></li> <li><a rel="me" href="https://dribbble.com/meyerweb"><img src="/pix/icons/dribbble.png" alt="Dribbble"></a></li> <li><a rel="me" href="https://flickr.com/photos/meyerweb/"><img src="/pix/icons/flickr.png" alt="Flickr"></a></li> <li><a rel="me" href="https://www.linkedin.com/in/meyerweb"><img src="/pix/icons/linkedin.png" alt="LinkedIn"></a></li> </ul> </div> <div id="excuse"> <?php include ($_SERVER["DOCUMENT_ROOT"] . '/feeds/excuse/current.html') ?> <div class="panel" id="excuse"> <h4>The <a href="/feeds/excuse/">excuse of the day</a> is</h4> <p>Barney</p> </div> </div> <div class="sosumi"> All contents of this site, unless otherwise noted, are ©1993-<?php echo date('Y') ?>2025 <strong>Eric A. and Kathryn S. Meyer</strong>. All Rights Reserved.</div> <div id="wordpress" class="credits">"<a href="/eric/thoughts/">Thoughts From Eric</a>" is powered by <a href="http://wordpress.org/">WordPress</a>. Most of the rest of the site is hand-authored.</div> <div id="design" class="credits">The ink-sketch images used in this site鈥檚 design are adapted from <a href="https://archive.org/search.php?query=creator%3A%22Mori%2C+Yu%CC%84zan%2C+-1917%22">Y奴zan Mori鈥檚 <cite><dfn title="In English: Wave Forms">Hamonsh奴</dfn></cite>, Volumes 1-3</a>, published in 1903 and made available for public use by the <a href="https://library.si.edu/">Smithsonian Libraries</a> and the <a href="https://archive.org/">Internet Archive</a>.</div> </div> </footer> </body> </html>