Skip to content

FAQ Page

Easy~20 min

What you'll build

A `faq.html` file with a page heading and four collapsible question/answer blocks built only with the native details and summary elements.

Goals

  • Use the details/summary elements for native collapsible sections
  • Structure repeated content with a consistent pattern
  • Write accessible markup without extra ARIA or JS
  • Add minimal CSS to make the page feel polished

Prerequisites

  • HTML document structure
  • Headings and paragraphs

Steps

  2. 1

    Set up the page and heading

    Create faq.html with the standard skeleton and an h1 "Frequently Asked Questions". Add a short intro paragraph so visitors know what this page is for.

    Code
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>FAQ</title>
  </head>
  <body>
    <h1>Frequently Asked Questions</h1>
    <p>Everything you need to know to get started.</p>
  </body>
</html>

    Expected result

    A page with a title and intro paragraph.

  4. 2

    Add the first question

    The details element creates a collapsible block. The summary is the always-visible label; everything else inside details is the hidden answer. Add one question to see the pattern.

    Code
    <details>
  <summary>What is this project about?</summary>
  <p>It is a beginner-friendly FAQ built with native HTML, no JavaScript required.</p>
</details>

    Expected result

    A row with a triangle marker and the question text; clicking it reveals the answer.

  6. 3

    Add three more questions

    Repeat the details/summary pattern for three more questions. Copy-paste is fine here — the repetition is the point, and you will see how consistent structure scales.

    Code
    <details>
  <summary>Do I need to know CSS?</summary>
  <p>No, but a little CSS makes it look nicer. This project includes a small stylesheet.</p>
</details>
<details>
  <summary>Can I add more questions later?</summary>
  <p>Yes — just copy one details block and change the text.</p>
</details>
<details>
  <summary>Is this accessible?</summary>
  <p>Yes. details and summary are native elements with keyboard and screen-reader support built in.</p>
</details>

    Expected result

    Four collapsible rows appear, each independently expandable.

  8. 4

    Add minimal styling

    Add a style block in the head to set a font, give the body some padding, and add a bottom border to each summary so the rows look like a list. A little CSS goes a long way.

    Code
    body { font-family: system-ui, sans-serif; max-width: 40rem; margin: 2rem auto; padding: 0 1rem; }
summary { cursor: pointer; padding: 0.75rem 0; border-bottom: 1px solid #e2e8f0; }
summary:hover { color: #2563eb; }

    Expected result

    The page is centered, readable, and each row has a divider line with a hover color.

Try it yourself

What you learned

You used the native details/summary elements to build an accessible, collapsible FAQ with zero JavaScript — a great example of letting the platform do the work.

Related Resources

Related Lessons

  • HTML

    The document skeleton and sectioning used here.

  • HTML

    details and summary — the interactive elements this project is built on.

Related Practice

Related Tools

Related Cheatsheets

Related Reference

Related Errors

Related Glossary

  • HTML

    HyperText Markup Language.

  • DOM

    Document Object Model basics.

  • Event

    User and system events.

Related Glossary

A beginner-friendly glossary explains jargon in plain English — variables, functions, DOM, Promise, and more.

  • HTML

    HyperText Markup Language.

  • DOM

    Document Object Model basics.

  • Event

    User and system events.

Related Errors

Plain-English explanations of common errors — what they mean, why they happen, and how to fix them.

← Back to topic