Clean, semantic markup for slides
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
Let's start with an empty HTML document.
<!DOCTYPE html>
<meta charset=utf-8>
<title>This is a slide deck</title>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>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>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>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 <header>
or <footer> elements.
</section>
<figure> element for
images. Don't forget to include width=""
and height="" attributes!
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| Value 1 | Value 2 | Value 3 |
| Value 4 | Value 5 | Value 6 |
| Value 7 | Value 8 | Value 9 |
Right. We've got a bunch of slides with content now, but they don't look like slides. We need to style them.
Styling
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;
}Flexbox is a good fit for laying out the content of each slide.
section.current {
display: blockflex;
}We'll use a vertical flexbox.
section {
flex-direction: column;
align-items: center;
justify-content: center;
}Most slide content should flex equally.
section > * {
flex: 1;
}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;
}Let's keep the header and footer text small, though.
section > header, section > footer {
font-size: 16pt;
}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;
}Something about print stylesheets here.
Things look all right now. But how do we switch slides? We need to write some JavaScript.
Behavior
Different users may prefer different methods to change which slide we're on. Let's add several of them.
Let's put them in the shadow DOM instead. That feels right.
const deck =
document.querySelector("article");
const deckShadow =
deck.attachShadow({
mode: 'closed'
});