This document defines the required HTML DOM structure for reveal.js presentations. It covers the mandatory container hierarchy, how section elements create slides, and the rules for horizontal and vertical slide nesting. For information about using Markdown to generate this structure automatically, see Markdown Support. For details on slide-specific attributes that modify behavior, see Slide Attributes.
Every reveal.js presentation requires a specific three-level DOM structure:
Sources: index.html17-22 demo.html27-30
Sources: index.html17-22 demo.html27-30
| Element | Purpose | Requirements |
|---|---|---|
div.reveal | Root container detected by Reveal.js initialization | Must have class reveal |
div.slides | Direct child of .reveal, contains all slide sections | Must have class slides |
section | Individual slide element | Direct child of .slides for horizontal slides |
Sources: index.html17-22
Each top-level section element directly inside div.slides creates a horizontal slide. Horizontal slides are navigated using left/right arrow keys or swipe gestures.
Sources: index.html18-22 demo.html31-78
Sources: index.html19-21
Each horizontal slide receives an internal horizontal index (h) starting from 0. This index is used by the navigation system for URL hashing and the Reveal.slide(h, v) API.
Sources: demo.html31-78
A section element containing nested section children creates a vertical slide stack. The parent section becomes the top slide, and each child section becomes a vertically-stacked slide below it. Vertical slides are navigated using up/down arrow keys.
Sources: demo.html49-71
The demo.html file demonstrates vertical slides at demo.html49-71:
Sources: demo.html49-71
Sources: demo.html49-71
| Index | Type | Description |
|---|---|---|
h | Horizontal | Index of top-level section (0-based) |
v | Vertical | Index of nested section within parent (0-based, defaults to 0) |
Sources: demo.html49-71
Sources: demo.html49-71
Single Depth Only: Only one level of section nesting is supported. You cannot nest sections within nested sections.
Parent Content Behavior: When a parent section contains child section elements, the parent's direct text/element content becomes the first vertical slide (v=0).
Mixed Content: A parent section can contain both child sections and regular HTML elements. The regular elements appear on the parent slide (v=0).
Sources: demo.html49-71
Reveal.js only processes two levels: top-level sections (horizontal) and their immediate children (vertical).
Sources: demo.html49-71
A minimal but complete reveal.js HTML document requires:
Sources: index.html1-41
| Element/Asset | Purpose | Location in Document |
|---|---|---|
<meta name="viewport"> | Responsive scaling | <head> |
dist/reset.css | CSS reset for consistency | <head> |
dist/reveal.css | Core reveal.js styles | <head> |
| Theme CSS | Visual theme (e.g., black.css) | <head> |
div.reveal | Root container | <body> |
div.slides | Slides wrapper | Inside div.reveal |
dist/reveal.js | Core JavaScript | Before </body> |
Reveal.initialize() | Initialization call | After reveal.js script |
Sources: index.html1-41
The HTML structure directly maps to reveal.js navigation coordinates:
Sources: demo.html49-71 index.html17-22
The Reveal.js core uses a zero-based coordinate system:
section in DOM ordersection within parent (0 for parent itself)The Reveal.slide(h, v) API and Location controller use these coordinates. For details on navigation implementation, see Slide Navigation.
Sources: demo.html49-71
Slides can be hidden from normal navigation using the data-visibility="hidden" attribute:
Sources: index.html20 demo.html80-85
Hidden slides:
next()/prev() methods)Reveal.slide(h, v)showHiddenSlides: true in configurationFor more on slide visibility attributes, see Slide Attributes.
Sources: index.html20 demo.html80-85
Refresh this wiki