Galleries do not need to be nested inside each other in order to be shown as such. However it can be useful for both the semantics of the page and the rendering of its printed version to nest <section> elements within other <section> elements to reflect the physicality of a gallery tree. Some plugins, such as takefive-counters.css, actually rely on this structure to function. The following tutorial provides a simple general procedure to create a tree of nested galleries.
An easy way to begin is to create a map of the planned tree using <ul> elements and simple labels, without any formatting:
| HTML | Result |
|---|---|
<ul>
<li>
Slide 1
<ul>
<li>
Slide 1.1
<ul>
<li>
Slide 1.1.1
<ul>
<li>
Slide 1.1.1.1
</li>
<li>
Slide 1.1.1.2
</li>
</ul>
</li>
<li>
Slide 1.1.2
</li>
</ul>
</li>
<li>
Slide 1.2
</li>
<li>
Slide 1.3
<ul>
<li>
Slide 1.3.1
</li>
</ul>
</li>
<li>
Slide 1.4
</li>
</ul>
</li>
<li>
Slide 2
<ul>
<li>
Slide 2.1
</li>
</ul>
</li>
<li>
Slide 3
</li>
</ul>
|
|
Each label can now be nested inside an <em> element:
| HTML | Result |
|---|---|
<ul>
<li>
<em>Slide 1</em>
<ul>
<li>
<em>Slide 1.1</em>
<ul>
<li>
<em>Slide 1.1.1</em>
<ul>
<li>
<em>Slide 1.1.1.1</em>
</li>
<li>
<em>Slide 1.1.1.2</em>
</li>
</ul>
</li>
<li>
<em>Slide 1.1.2</em>
</li>
</ul>
</li>
<li>
<em>Slide 1.2</em>
</li>
<li>
<em>Slide 1.3</em>
<ul>
<li>
<em>Slide 1.3.1</em>
</li>
</ul>
</li>
<li>
<em>Slide 1.4</em>
</li>
</ul>
</li>
<li>
<em>Slide 2</em>
<ul>
<li>
<em>Slide 2.1</em>
</li>
</ul>
</li>
<li>
<em>Slide 3</em>
</li>
</ul>
|
|
The following simple passages will turn the previous example into an ordered structure of <section> and <article> elements:
<em> elements with <article> elements<ul> elements with <section> elements<li> and </li>| HTML | Result |
|---|---|
<section>
<article>Slide 1</article>
<section>
<article>Slide 1.1</article>
<section>
<article>Slide 1.1.1</article>
<section>
<article>Slide 1.1.1.1</article>
<article>Slide 1.1.1.2</article>
</section>
<article>Slide 1.1.2</article>
</section>
<article>Slide 1.2</article>
<article>Slide 1.3</article>
<section>
<article>Slide 1.3.1</article>
</section>
<article>Slide 1.4</article>
</section>
<article>Slide 2</article>
<section>
<article>Slide 2.1</article>
</section>
<article>Slide 3</article>
</section>
|
|
It is now possible to add the "slide" class to all the <article> elements, add a unique id to each slide and start populating them. Finally, a link to the first slide can be added to the page to make the gallery tree accessible:
| HTML | Result |
|---|---|
<p><a href="#slide-1">My gallery</a></p>
<section>
<article id="slide-1" class="slide">
<header>
<h2>Slide 1</h2>
</header>
<div>
Here goes the content of slide 1
</div>
<nav>
<a rel="parent" href="#nowhere">Main page</a>
<a rel="next" href="#slide-2">Slide 2</a>
<a rel="child" href="#slide-1.1">Slide 1.1</a>
</nav>
</article>
<section>
<article id="slide-1.1" class="slide">
<header>
<h2>Slide 1.1</h2>
</header>
<div>
Here goes the content of slide 1.1
</div>
<nav>
<a rel="parent" href="#slide-1">Slide 1</a>
<a rel="next" href="#slide-1.2">Slide 1.2</a>
<a rel="child" href="#slide-1.1.1">Slide 1.1.1</a>
</nav>
</article>
<section>
<article id="slide-1.1.1" class="slide">
<header>
<h2>Slide 1.1.1</h2>
</header>
<div>
Here goes the content of slide 1.1.1
</div>
<nav>
<a rel="parent" href="#slide-1.1">Slide 1.1</a>
<a rel="next" href="#slide-1.1.2">Slide 1.1.2</a>
<a rel="child" href="#slide-1.1.1.1">Slide 1.1.1.1</a>
</nav>
</article>
<section>
<article id="slide-1.1.1.1" class="slide">
<header>
<h2>Slide 1.1.1.1</h2>
</header>
<div>
Here goes the content of slide 1.1.1.1
</div>
<nav>
<a rel="parent" href="#slide-1.1.1">Slide 1.1.1</a>
<a rel="next" href="#slide-1.1.1.2">Slide 1.1.1.2</a>
</nav>
</article>
<article id="slide-1.1.1.2" class="slide">
<header>
<h2>Slide 1.1.1.2</h2>
</header>
<div>
Here goes the content of slide 1.1.1.2
</div>
<nav>
<a rel="parent" href="#slide-1.1.1">Slide 1.1.1</a>
<a rel="prev" href="#slide-1.1.1.1">Slide 1.1.1.1</a>
</nav>
</article>
</section>
<article id="slide-1.1.2" class="slide">
<header>
<h2>Slide 1.1.2</h2>
</header>
<div>
Here goes the content of slide 1.1.2
</div>
<nav>
<a rel="parent" href="#slide-1.1">Slide 1.1</a>
<a rel="prev" href="#slide-1.1.1">Slide 1.1.1</a>
</nav>
</article>
</section>
<article id="slide-1.2" class="slide">
<header>
<h2>Slide 1.2</h2>
</header>
<div>
Here goes the content of slide 1.2
</div>
<nav>
<a rel="parent" href="#slide-1">Slide 1</a>
<a rel="prev" href="#slide-1.1">Slide 1.1</a>
<a rel="next" href="#slide-1.3">Slide 1.3</a>
</nav>
</article>
<article id="slide-1.3" class="slide">
<header>
<h2>Slide 1.3</h2>
</header>
<div>
Here goes the content of slide 1.3
</div>
<nav>
<a rel="parent" href="#slide-1">Slide 1</a>
<a rel="prev" href="#slide-1.2">Slide 1.2</a>
<a rel="next" href="#slide-1.4">Slide 1.4</a>
<a rel="child" href="#slide-1.3.1">Slide 1.3.1</a>
</nav>
</article>
<section>
<article id="slide-1.3.1" class="slide">
<header>
<h2>Slide 1.3.1</h2>
</header>
<div>
Here goes the content of slide 1.3.1
</div>
<nav>
<a rel="parent" href="#slide-1.3">Slide 1.3</a>
</nav>
</article>
</section>
<article id="slide-1.4" class="slide">
<header>
<h2>Slide 1.4</h2>
</header>
<div>
Here goes the content of slide 1.4
</div>
<nav>
<a rel="parent" href="#slide-1">Slide 1</a>
<a rel="prev" href="#slide-3">Slide 3</a>
</nav>
</article>
</section>
<article id="slide-2" class="slide">
<header>
<h2>Slide 2</h2>
</header>
<div>
Here goes the content of slide 2
</div>
<nav>
<a rel="parent" href="#nowhere">Main page</a>
<a rel="prev" href="#slide-1">Slide 1</a>
<a rel="next" href="#slide-3">Slide 3</a>
<a rel="child" href="#slide-2.1">Slide 2.1</a>
</nav>
</article>
<section>
<article id="slide-2.1" class="slide">
<header>
<h2>Slide 2.1</h2>
</header>
<div>
Here goes the content of slide 2.1
</div>
<nav>
<a rel="parent" href="#slide-2">Slide 2</a>
</nav>
</article>
</section>
<article id="slide-3" class="slide">
<header>
<h2>Slide 3</h2>
</header>
<div>
Here goes the content of slide 3
</div>
<nav>
<a rel="parent" href="#nowhere">Main page</a>
<a rel="prev" href="#slide-2">Slide 2</a>
</nav>
</article>
</section>
|
The <section> elements used in these examples have no classes assigned, as Take Five! does not require any. Two plugins however rely on a "slides" (plural) class assigned to the <section> elements that host multiple slides: takefive-counters.css and takefive-slides.css. For more details, please refer to the documentation of these plugins.