slanted W3C logo
Cover page images (keys)

HTML Slidy: Slide Shows in XHTML

Dave Raggett, <>

Slide Shows in XHTML

For handouts, its often useful to include extra notes using a div element with class="handout" following each slide, as in:

<div class="slide"> 
 ... your slide content ...

<div class="handout">
 ... stuff that only appears in the handouts ...

What you need to do

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="" lang="en" xml:lang="en"> 
  <title>Slide Shows in XHTML</title> 
  <meta name="copyright" 
   content="Copyright &#169; 2005 your copyright notice" /> 
  <link rel="stylesheet" type="text/css" media="screen, projection, print" 
   href="" /> 
  <script src="" 
  <style type="text/css"> 
    <!-- your custom style rules --> 
   ... your slides marked up in XHTML ...

To get the W3C Blue Style

The head element should include the following link to the style sheet:

<link rel="stylesheet" type="text/css" media="screen, projection, print"
 href="" /> 

The body element's content should start with the following markup:

<div class="background"> 
  <img id="head-icon" alt="graphic with four colored squares"
    src="" /> 
  <object id="head-logo" title="W3C logo" type="image/svg+xml"
   alt="W3C logo" id="head-logo-fallback" /></object>

This adds the logos on the top left and right corners of the slide.

You are of course welcome to create your own slide designs. You can provide different styles and backgrounds for different slides (more details later).

Use the meta element with name="copyright" for use in the slide show footer:

<meta name="copyright" 
content="Copyright &#169; 2005 W3C (MIT, ERCIM, Keio)" /> 

To use it off-line

Generate a Title Page

If you want a separate title page with the W3C blue style, the first slide should be as follows:

<div class="slide cover"> 
 <img src="" 
  alt="Cover page images (keys)" class="cover" /> 
 <br clear="all" />            
 <h1>HTML Slidy: Slide Shows in XHTML</h1> 
 <p><a href="">Dave Raggett,</a> 
 <a href=""></a></p> 

The w3c-blue.css style sheet looks for the classes "slide" and "cover" on div and img elements using the CSS selector div.slide.cover

This technique can be used to assign your slides to different classes with a different appearence for each such class.

Slidy also allows you to use different background markup for different slides, based upon shared class names, as in "foo" below. Backgrounds without additional class names are always shown except when the slide isn't transparent. You may need to tweak your custom style sheet.

<div class="background foo">
   ... background content ...


<div class="slide foo">
   ... slide content ...

Incremental display of slide contents

For incremental display, use class="incremental", for instance:

which is marked up as follows:

<ul class="incremental"> 
  <li>First bullet point</li> 
  <li>Second bullet point</li> 
  <li>Third bullet point</li> 
<p class="incremental">which is marked up as follows:</p> 
<pre class="incremental"> 

An element is incrementally revealed if its parent element has class="incremental" or if itself has that attribute. Text nodes are not elements and are revealed when their parent element is revealed. You can use class="incremental" on any element except for <br />. Use class="non-incremental" to override the effect of setting the parent element's class to incremental.

Note: you will see a red asterisk on the left of the toolbar when there is still something more to reveal.

Create outline lists with hidden content

You can make your bullet points or numbered list items into outlines that you can expand or collapse

<ol class='outline'>
  <!-- topic 1 starts collapsed -->
  <li>Topic 1
        <li>subtopic a</li>
        <li>subtopic b</li>
  <!-- topic 2 starts expanded -->
  <li class="expand">Topic 2
        <li>subtopic c</li>
        <li>subtopic d</li>

Make your images scale with the browser window size

For adaptive layout, use percentage widths on images, together with CSS positioning:

<div class="slide"> 
  <h1>Analysts - "Open standards programming will become 
  mainstream, focused around VoiceXML"</h1> 
  <!-- use CSS positioning and scaling for adaptive layout --> 
  <img src="trends.png" width="50%" style="float:left" 
   alt="projected growth of VoiceXML" /> 

  <blockquote style="float:right;width: 35%"> 
    VoiceXML will dominate the voice environment, due to its 
    flexibility and eventual multimodal capabilities 
  </blockquote><br clear="all" /> 
  <p style="text-align:center">Source Data Monitor, March 

Incremental display of layered images

These can be marked up using CSS relative positioning, e.g.

<div class="incremental" 
 style="margin-left: 4em; position: relative"> 
  <img src="face1.gif" alt="face" 
   style="position: static; vertical-align: bottom"/> 
  <img src="face2.gif" alt="eyes" 
    style="position: absolute; left: 0; top: 0" /> 
  <img src="face3.gif" alt="nose" 
    style="position: absolute; left: 0; top: 0" /> 
  <img src="face4.gif" alt="mouth" 
    style="position: absolute; left: 0; top: 0" /> 

You should also use transparent GIF images to avoid the IE/Win bug for alpha channel in PNG. A fix is expected in IE 7. A work around is available on My thanks to ACID2 for the graphics.

face eyes nose mouth

Include SVG Content

Inclusion of SVG content can be done using the object element, for example:

Indian Office logo

has been achieved by:

<object data="example.svg" type="image/svg+xml" 
  width="50%" height="10%" title="Indian Office logo"> 
    <img src="example.png" width="50%" 
          alt="Indian Office logo" /> 

This ensures that the enclosed png is displayed when the browser has no plugin installed or can't display SVG directly.

However, there are caveats, see the next slide!

Caveats with SVG+object

There is a serious bug in IE6+Adobe Plugin that can create problems. Namely:

On Windows, the Adobe SVG plugin doesn't respect the CSS z-index property, and if used on backgrounds will always show through other content.

Some browsers (e.g. Opera 8) only support SVG Tiny, which doesn't support external style sheets or style elements within SVG. The work around is to set the properties via style attributes on the corresponding elements. In principle, browsers should honor the version attribute and fall back to the alternative within the object element if they don't support the version used by a given SVG file.

Are there any tools for downgrading SVG to SVG Tiny?

Additional Remarks

Future Plans

Recent additions have included a table of contents, and a way to hide and reveal content in the spirit of outline lists. Further work is anticipated on the following:

If you have comments, suggestions for improvements, or would like to volunteer your help with further work on Slidy, please contact Dave Raggett <>


Note that while Slidy and S5 were developed independently, both support the use of the class values "slide" and "handout" for div elements. Slidy doesn't support the "layout" class featured in S5 and Opera Show, but instead provides a more flexible alternative with the "background" class, which enables different backgrounds on different slides.