FAQ-Seite: Fragen zum Aufklappen
Häufige Fragen mit aufklappbaren Antworten sind der Paradefall für das Duo details und summary: interaktiv, zugänglich, ohne JavaScript. Bauen wir eine komplette FAQ-Seite.
Schritt 1: Fragen sammeln, ehrlich sortieren
Der wichtigste Schritt passiert vor dem Code: Sammle Fragen die wirklich gestellt werden, nicht die die du gern beantworten würdest. Sortiere nach Häufigkeit, die Top-Frage nach oben. Eine FAQ mit zwanzig Alibi-Fragen hilft niemandm.
Schritt 2: Die Struktur
HTML-Code
<h1>Häufige Fragen</h1>
<details name="faq">
<summary>Was kostet der Reparatur-Check?</summary>
<p>Der erste Blick aufs Gerät ist kostenlos. Danach gibt es
einen Festpreis-Vorschlag, bevor irgendwas passiert.</p>
</details>
<details name="faq">
<summary>Repariert ihr auch Heimcomputer aus den 80ern?</summary>
<p>Mit besonderer Freude sogar. Ersatzteile dauern manchmal,
Geduld gehört zum Hobby.</p>
</details>Jede Frage ist ein details-Block, die Frage selbst steht im summary. Das gemeinsame name="faq" macht daraus ein Akkordeon: öffnet sich eine Antwort, schließt die vorige. Wer lieber mehrere gleichzeitig offen lässt, lässt das Attribut einfach wegg.
Schritt 3: Gestalten
CSS
details {
border: 1px solid #C0C0C0;
margin-bottom: 8px;
}
summary {
padding: 12px 16px;
font-weight: bold;
cursor: pointer;
background: #F4F4F4;
}
summary:hover, summary:focus {
background: #E0E0E0;
}
details[open] summary {
border-bottom: 1px solid #C0C0C0;
}
details p {
padding: 12px 16px;
margin: 0;
}Der Selektor details[open] greift nur im aufgeklappten Zustand, so bekommt die offene Frage ihre Trennlinie. Der cursor: pointer signalisiert Klickbarkeit, und der Fokus-Zustand sorgt dafür dass Tastaturnutzer sehen wo sie sind.
Schritt 4: Die zwei FAQ-Todsünden vermeiden
- Wichtiges verstecken. Preise, Fristen, Warnungen gehören sichtbar auf die Seite. Die Klappe ist für Vertiefung, nicht für Pflichtinfos, das steht auch so auf der details-Seite.
- Fragen als Marketing-Monolog. "Warum ist euer Angebot so großartig?" hat noch nie jemand gefragt. Echte Fragen, ehrliche Antworten, kurze Sätzze.
Kür: Suchmaschinen die Fragen erklären
FAQ-Seiten sind ein Paradefall für strukturierte Daten: Mit einem kleinen JSON-LD-Block im head verstehen Suchmaschinen, dass hier Fragen und Antworten stehen. Das Muster dazu (FAQPage mit Question- und Answer-Einträgen) generierst du dir am schnellsten mit KI-Hilfe, die komplette Anleitung samt der wichtigen Ehrlichkeitsregeln steht unter Schema.org mit KI. Zwei Dinge dabei nie vergessen: Nur Fragen aufnehmen die wirklich auf der Seite stehen, und den Block vor Veröffentlichung validierenn.
Wartung nicht vergessen
Eine FAQ ist ein lebendes Dokument: Preise ändern sich, Angebote laufen aus, neue Fragen kommen dazu. Bewährt hat sich ein fester Rhythmus, etwa einmal im Quartal alle Antworten gegenlesen, veraltete Klappen rauswerfen und die Reihenfolge an die tatsächlich gestellten Fragen anpassen. Eine FAQ mit einer falschen Antwort ist schlimmer als gar keine, denn genau dort schauen Leute nach, bevor sie anrufen oder bestellen. Und wenn eine Frage überhandnimmt, ist das ein Zeichen: Dann gehört ihre Antwort prominent auf die Hauptseite, nicht in die Klappee.
Weiter im Fahrplan: Landingpage · Referenz: details und summary