20 min read

A Gallery Page

Organise photos into categories with sections and headings, use figures with captions, and link thumbnails to full-size images.

Planning the Gallery

The Structure

One <section> per category, each with an <h2> heading. Inside each section, a <div class="gallery"> holds the photos (the class is for the CSS grid in the next course). Each photo is a <figure> with an <img> and a <figcaption> . Each image is wrapped in a link to the full-size file, so visitors can open it larger.

gallery.html (main only)HTML

1<main>2  <h1>Gallery</h1>3  <p>Click a photo to see it full size.</p>4 5  <section>6    <h2>Teas</h2>7    <div class="gallery">8      <figure>9        <a href="images/teas/cup-of-tea.webp"><img src="images/teas/cup-of-tea.webp" alt="A cup of black Ceylon tea" width="180" loading="lazy"></a>10        <figcaption>A classic cup of black tea</figcaption>11      </figure>12      <figure>13        <a href="images/teas/tea-picking.webp"><img src="images/teas/tea-picking.webp" alt="A tea plucker picking leaves on a hillside estate" width="180" loading="lazy"></a>14        <figcaption>Hand-picked on hill-country estates</figcaption>15      </figure>16    </div>17  </section>18 19  <section>20    <h2>Cakes and short eats</h2>21    <div class="gallery">22      <figure>23        <a href="images/cakes/love-cake.webp"><img src="images/cakes/love-cake.webp" alt="A tray of golden love cake" width="180" loading="lazy"></a>24        <figcaption>Love cake</figcaption>25      </figure>26      <figure>27        <a href="images/cakes/kokis.webp"><img src="images/cakes/kokis.webp" alt="Crispy flower-shaped kokis on a plate" width="180" loading="lazy"></a>28        <figcaption>Kokis</figcaption>29      </figure>30    </div>31  </section>32</main>

What the browser shows

Without CSS the photos stack one under another. In the CSS course you will turn each gallery into a neat grid with a hover effect — compare it with the finished example gallery .

index.html

What the browser shows

Try it:

Add a second figure using images/room/cafe-interior.webp with suitable alt text and caption. Then wrap the image in a link to the full-size file.

Practice

What is the best way to show the start of each gallery category?

More lessons in HTML · Next: Frames and iframes · Previous: Building a Multi-Page Site

The Structure

One <section> per category, each with an <h2> heading. Inside each section, a <div class="gallery"> holds the photos (the class is for the CSS grid in the next course). Each photo is a <figure> with an <img> and a <figcaption> . Each image is wrapped in a link to the full-size file, so visitors can open it larger.

gallery.html (main only)HTML

1<main>2  <h1>Gallery</h1>3  <p>Click a photo to see it full size.</p>4 5  <section>6    <h2>Teas</h2>7    <div class="gallery">8      <figure>9        <a href="images/teas/cup-of-tea.webp"><img src="images/teas/cup-of-tea.webp" alt="A cup of black Ceylon tea" width="180" loading="lazy"></a>10        <figcaption>A classic cup of black tea</figcaption>11      </figure>12      <figure>13        <a href="images/teas/tea-picking.webp"><img src="images/teas/tea-picking.webp" alt="A tea plucker picking leaves on a hillside estate" width="180" loading="lazy"></a>14        <figcaption>Hand-picked on hill-country estates</figcaption>15      </figure>16    </div>17  </section>18 19  <section>20    <h2>Cakes and short eats</h2>21    <div class="gallery">22      <figure>23        <a href="images/cakes/love-cake.webp"><img src="images/cakes/love-cake.webp" alt="A tray of golden love cake" width="180" loading="lazy"></a>24        <figcaption>Love cake</figcaption>25      </figure>26      <figure>27        <a href="images/cakes/kokis.webp"><img src="images/cakes/kokis.webp" alt="Crispy flower-shaped kokis on a plate" width="180" loading="lazy"></a>28        <figcaption>Kokis</figcaption>29      </figure>30    </div>31  </section>32</main>

What the browser shows

Without CSS the photos stack one under another. In the CSS course you will turn each gallery into a neat grid with a hover effect — compare it with the finished example gallery .

index.html

What the browser shows

Try it:

Add a second figure using images/room/cafe-interior.webp with suitable alt text and caption. Then wrap the image in a link to the full-size file.

Practice

What is the best way to show the start of each gallery category?