HTML Tutorial
HTML Project: FAQ Page
An FAQ that uses details and summary so answers stay closed until the reader opens them.
What you will build
A frequently asked questions page for Reed Cycle Repair. An intro paragraph sets the scene. Six questions sit in details elements. Each summary is the question. The answer stays closed until the reader opens it.
You do not need JavaScript for the open and close. The browser already knows how. Your job is clear questions, short answers, and a page that still makes sense if every panel is shut.
Try the open state in /html/try with Try it in HTML. Keyboard users should be able to tab to each summary.
Tags you will use
| Tag | Job on this page |
|---|---|
header | Title and the intro paragraph |
details | One question-and-answer pair |
summary | The visible question, always on screen |
p | The answer inside the details panel |
A definition list can also hold terms and answers. This project uses details because the catalog asks for panels that stay closed. Do not mix both patterns on the same six questions.
Build in slices
One panel first. The summary is a question. The paragraph is the answer. Leave the panel closed in the markup. Add open only if that one answer must start expanded.
Example
<details>
<summary>Do I need an appointment?</summary>
<p>
Yes for weekend slots. Weekdays we take walk-ins before 11:00 if the stand is free.
</p>
</details>Then write the intro. The intro is not a seventh question. It tells people what the list covers.
Example
<header>
<h1>Reed Cycle Repair</h1>
<p>
Answers about bookings, parts, and what we will not fix. Open a question. Close it when you are done.
</p>
</header>Put the question in summary, not in a heading inside the hidden panel. If the panel is closed, a heading inside it is gone. Test that in /html/try.
Complete document
Intro plus six questions. Light borders. A marker the browser already draws. No accordion script.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Reed Cycle Repair FAQ</title>
<style>
body {
margin: 0;
background: #f4f1ea;
color: #1f2933;
font-family: "Segoe UI", sans-serif;
}
main {
max-width: 38rem;
margin: 0 auto;
padding: 1.4rem 1.1rem 2rem;
}
details {
background: #fff;
border: 1px solid #d6d3cd;
margin-bottom: 0.55rem;
padding: 0.4rem 0.8rem 0.55rem;
}
summary {
cursor: pointer;
font-weight: 650;
padding: 0.35rem 0;
}
details p { margin: 0.3rem 0 0.5rem; line-height: 1.5; }
</style>
</head>
<body>
<main>
<header>
<h1>Reed Cycle Repair FAQ</h1>
<p>
Answers about bookings, parts, and what we will not fix. Open a question. Close it when you are done.
</p>
</header>
<details>
<summary>Do I need an appointment?</summary>
<p>Yes for weekend slots. Weekdays we take walk-ins before 11:00 if the stand is free.</p>
</details>
<details>
<summary>How long is a standard service?</summary>
<p>A gears-and-brakes service is two hours if parts are in the drawer. We call if a spoke or cable is missing.</p>
</details>
<details>
<summary>Do you sell inner tubes?</summary>
<p>Yes, in common sizes. We do not keep novelty colors in stock. Name the wheel size when you write.</p>
</details>
<details>
<summary>Can I wait in the shop?</summary>
<p>There is a bench and a kettle. If the job needs the stand for more than an hour, we will give you a collection time instead.</p>
</details>
<details>
<summary>What will you not repair?</summary>
<p>Carbon frames with a crack. Electric systems still under a brand warranty. We will say no rather than guess.</p>
</details>
<details>
<summary>How do I pay?</summary>
<p>Card or cash on collection. We do not take a deposit for a walk-in puncture.</p>
</details>
</main>
</body>
</html>A second complete FAQ
Six new questions for a small library. First panel can start open with the open attribute if you want one answer visible on arrival.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>West Stack Library FAQ</title>
<style>
body { margin: 0; background: #0f172a; color: #e2e8f0; font-family: Georgia, serif; }
main { max-width: 36rem; margin: 0 auto; padding: 1.3rem; }
details { border-bottom: 1px solid #334155; padding: 0.5rem 0; }
summary { cursor: pointer; }
a { color: #7dd3fc; }
</style>
</head>
<body>
<main>
<header>
<h1>West Stack Library</h1>
<p>Hours, cards, and the quiet floor. Each answer is under its question.</p>
</header>
<details open>
<summary>When is the quiet floor open?</summary>
<p>Tuesday to Saturday, 9–18. Closed on public holidays.</p>
</details>
<details>
<summary>Do I need a card to sit?</summary>
<p>No. You need a card to borrow, not to read.</p>
</details>
<details>
<summary>How long is a loan?</summary>
<p>Three weeks for books. One week for discs. Renew once if nobody is waiting.</p>
</details>
<details>
<summary>Is there a printer?</summary>
<p>Yes, beside the catalogue desk. Ten cents a side. USB only.</p>
</details>
<details>
<summary>Can I bring a flask?</summary>
<p>A closed flask is fine. Hot food is not. Crumbs find the rare maps.</p>
</details>
<details>
<summary>Who do I write to?</summary>
<p>Use the <a href="#desk">enquiry desk address</a> on the contact page.</p>
</details>
</main>
</body>
</html>Common mistakes
- Questions as headings outside
details, with the answer in a hiddendiv. Use the native pair. - Empty summaries such as “Q1”. The closed panel must still be readable.
- Putting the only copy of the answer in an image. Closed or open, the text has to be text.
- Ten panels all with the
openattribute. Then nothing is an FAQ. It is just a list. - Interactive content in
summarybesides the question. Keep the summary short.
Practice tasks
- Rewrite all six questions for a cafe, a class, or a club you know. Keep
detailsandsummary. - Leave the first panel open with the
openattribute. Leave the rest closed. - Add a seventh question. Confirm you can tab through every summary at /html/try.