• in
InterCourses
CoursesBlogs
0
← Introduction to HTML
○What Is HTML? See Tags in Action○Exercise: Build the Meridian Signal○Complete HTML5 Page Structure: See It in Action○Exercise: Build a Complete HTML5 Page✦Module Quiz
○Heading Hierarchy Demo: H1 and H2○Exercise: Extend the Signal Brief○Paragraphs and Inline Tags Demo○Exercise: Write Meridian's Survey Notes○List Types Demo: Steps, Items, and Terms○Exercise: Build a Crew member Loadout○Challenge: Transmit a Rescue Signal✦Module Quiz
○Hyperlinks○Images○Applying Styles to HTML✦Module Quiz
○Div and Span○HTML Tables○Classes and IDs○Review: Structured Profile✦Module Quiz
○Project 1 - Visiting Card Structure○Project 1 - Visiting Card Actions✦Module Quiz
○The Head Element and Page Title○Meta Tags○HTML Entities✦Module Quiz
○Form Basics Demo: Join the Meridian Relay○Exercise: Build a Night-Shift Check-In○Input Types Demo: Build a Mission Profile○Exercise: Record Beacon Maintenance○Choice Controls Demo: Select Training Modes○Exercise: Plan a Supply Pickup○Response Controls Demo: Send a Mission Reply○Exercise: Build a Rescue Dispatch Report○Challenge: Send an Emergency Beacon✦Module Quiz
○Project 2 - Contact Us Form Structure○Project 2 - Contact Us Form Actions✦Module Quiz
○Embedding Video○Embedding Audio○Iframes✦Module Quiz
○Semantic HTML Tags●Details, Figure, and Figcaption✦Module Quiz
○Project 3 - Resume Semantic Structure○Project 3 - Resume Links and Actions✦Module Quiz

Details, Figure, and Figcaption

Mission

A second Riverstone garden page needs a compact “Before You Visit” area. Add questions people can open when needed and a seedling image whose caption stays connected to the image.

What you'll build

An FAQ with expandable answers (one open by default) and a captioned figure with an image and figcaption, keeping media and explanation together.

Target: an FAQ with one answer already visible and a captioned illustration beneath it. In the preview, clicking each question should reveal only that question's answer.

Let optional information stay optional

<details> creates a disclosure widget with no JavaScript. Its <summary> is the visible control; the rest of the content appears when a visitor opens it.

html
<details>
    <summary>Can I bring a reusable bag?</summary>
    <p>Yes. Bring one for your harvest share.</p>
</details>

The content starts collapsed. Add the boolean open attribute when one answer should be visible on page load.

html
<details open>
    <summary>Where is the garden gate?</summary>
    <p>Enter beside the blue tool shed on Willow Lane.</p>
</details>

Use this pattern for FAQs, optional instructions, or spoiler-free extra detail. Put <summary> first so the control is easy to find and use.

Keep media and its caption together

A <figure> groups self-contained media with its explanation. The media can be an image, diagram, chart, or code sample. <figcaption> names or describes it.

html
<figure>
    <img src="seedlings.jpg" alt="Tomato seedlings in trays beside a sunny window">
    <figcaption>Tomato seedlings ready for the Saturday planting table.</figcaption>
</figure>

Unlike a plain <div>, this structure tells browsers and assistive technology that the image and caption belong together. The caption may be the first or last child of the figure.

Checkpoint

Preview the page. One FAQ answer should be visible immediately; the other answers should appear only after their summaries are clicked. The illustration caption should read as part of the same unit as the image. If a question will not toggle, make sure its <summary> is inside its <details>.

Your Task

  1. Add at least two <details> elements, each with an answer about visiting the garden.
  2. Put a <summary> inside each <details> element.
  3. Add the open attribute to exactly one <details> element so one answer starts expanded.
  4. Add a <figure> containing an <img> with descriptive alt text for the garden page. Use an available image URL (the starter contains no image asset).
  5. Add a <figcaption> inside that figure to describe the image.

Payoff

The visit information now stays tidy while the photo carries its own explanation—useful context without extra scripting or detached captions.

Hint 1
1 / 4
HINT 1

The <details> element is collapsed by default. Add the open attribute to expand it on load.

HINT 2

The first child of <details> should be a <summary> — it becomes the clickable toggle text.

HINT 3
<figure> is for self-contained media (image, diagram, code) referenced from the main text.
HINT 4
<figcaption> provides a caption for a <figure> and can be placed at the top or bottom.
Take the Quiz →
Loading editor…
READY
intercourses
html