Clean, semantic markup for slides

Theresa O’Connor

Clean, semantic markup for slides

Theresa O’Connor

I want to mark up slides really cleanly & have the result look great on desktop and mobile, in portrait and landscape, and in and out of fullscreen.

2/N

Clean, semantic markup for slides

Theresa O’Connor

Let's start with an empty HTML document.

<!DOCTYPE html>
<meta charset=utf-8>
<title>This is a slide deck</title>

3/N

Clean, semantic markup for slides

Theresa O’Connor

The <article> element feels like a good fit for a slide deck, with <section> children for each slide.

<!DOCTYPE html>
<meta charset=utf-8>
<title>This is a slide deck</title>
<article>
  … slides go here …
</article>

4/N

Clean, semantic markup for slides

Theresa O’Connor

Let’s add a slide.

<!DOCTYPE html>
<meta charset=utf-8>
<title>This is a slide deck</title>
<article>
  <section>
    <p>This is a slide.
  </section>
</article>

5/N

Clean, semantic markup for slides

Theresa O’Connor

We can use <header> and <footer> elements to provide the kind of per-slide metadata you often see in presentations.

<section>
  <header>
    <p>Some metadata
  </header>
  <p>This is a slide.
  <footer>
    <p>Some other metadata
  </footer>
</section>

6/N

Clean, semantic markup for slides

Theresa O’Connor

Slide content goes between the <header> and <footer> elements. Just write ordinary HTML.

<section>
  <header></header>
  <p>Use the 'p' element for paragraphs
  <ul>
    <li>and 'li' elements for list items.
    <li>You know the drill.
  </ul>
  <footer></footer>
</section>

6/N

Of course, slides don’t need to have <header>s and <footer>s if you want a minimalist look.

<section>
  <p>This slide doesn't have &lt;header>
  or &lt;footer> elements.
</section>

TODO: This slide should be about the figure element

TODO: This slide should be about the table element

Clean, semantic markup for slides

Theresa O’Connor

Right. We've got a bunch of slides with content now, but they don't look like slides. They look like