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.

Markup

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>

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>

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>

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>

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>

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>
Street art of a fellow wearing a scally cap.
Use the <figure> element for images. Don't forget to include width="" and height="" attributes!
The <table> element is pretty neat.
Column 1Column 2Column 3
Value 1Value 2Value 3
Value 4Value 5Value 6
Value 7Value 8Value 9

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. We need to style them.

Styling

Clean, semantic markup for slides

Theresa O’Connor

Let's hide all but the current slide. We'll need a way to mark the current one—how about a "current" class.

section {
  display: none;
}

section.current {
  display: block;
}

Clean, semantic markup for slides

Theresa O’Connor

Flexbox is a good fit for laying out the content of each slide.

section.current {
  display: blockflex;
}

Clean, semantic markup for slides

Theresa O’Connor

We'll use a vertical flexbox.

section {
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

Clean, semantic markup for slides

Theresa O’Connor

Most slide content should flex equally.

section > * {
  flex: 1;
}

Clean, semantic markup for slides

Theresa O’Connor

Headers and footers, though, should be pushed to the edge.

section > header, section > footer {
  flex: 100;
}

Clean, semantic markup for slides

Theresa O’Connor

Speaking of headers and footers, I'd like them to be one line tall & to spred their contents out horizontally.

section > header, section > footer {
  flex: 100 1em;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

Clean, semantic markup for slides

Theresa O’Connor

The text on our slides is still really small. Let's make the overall text size in the document very big. The vh unit is a good fit for this.

html {
  font-size: 5vh;
}

Clean, semantic markup for slides

Theresa O’Connor

Let's keep the header and footer text small, though.

section > header, section > footer {
  font-size: 16pt;
}

Clean, semantic markup for slides

Theresa O’Connor

Don't forget that each slide can have its own, per-slide styles. For instance, you can have fun with color!

#dark-slide {
  background-color: black;
  color: white;
}

Clean, semantic markup for slides

Theresa O’Connor

Something about print stylesheets here.

Clean, semantic markup for slides

Theresa O’Connor

Things look all right now. But how do we switch slides? We need to write some JavaScript.

Behavior

Clean, semantic markup for slides

Theresa O’Connor

Different users may prefer different methods to change which slide we're on. Let's add several of them.

Clean, semantic markup for slides

Theresa O’Connor

First, let's add previous & next slide buttons. We'll make clicking on them actually do something later.

<button title="Previous slide"
    >←</button>
<button title="Next slide"
    >→</button>

Clean, semantic markup for slides

Theresa O’Connor

But where should these buttons live in the markup? I don't think they belong in the slide deck themselves. That feels wrong.

Clean, semantic markup for slides

Theresa O’Connor

Let's put them in the shadow DOM instead. That feels right.


const deck =
  document.querySelector("article");
const deckShadow =
  deck.attachShadow({
    mode: 'closed'
  });