Aufklapplisten direkt in HTML: Entdecke details und summary

HTML
HTML Basics - Der HTML Kurs in der Cord Media Academy

Inhalt

In der Welt des Webdesigns jagen wir oft nach den neuesten JavaScript-Frameworks oder CSS-Tricks, um unsere Webseiten zum Leben zu erwecken. Dabei übersehen wir leicht, dass HTML selbst einige beeindruckende Tricks auf Lager hat. Heute schauen wir uns <details> und <summary> an – zwei HTML-Tags, die Interaktivität sehr einfach machen.

Was ist <details>?

<details> ist ein wenig bekanntes, aber unglaublich nützliches HTML-Element. Es ermöglicht Webentwicklern, versteckte Informationen einzubetten, die der Nutzer durch einfaches Klicken aufdecken kann. Denk an FAQs, Produktbeschreibungen oder sogar kleine interaktive Geschichten, die sich entfalten, während der Leser voranschreitet.

Der Sidekick: <summary>

Hand in Hand mit <details> geht der <summary>-Tag. Er definiert, welche Information als „Vorschau“ oder Trigger für das versteckte Element angezeigt wird. Dies ist in der Regel eine Überschrift oder Frage, die neugierig macht und zum Klicken einlädt.

So funktioniert’s

Die Magie von <details> und <summary> erlebt man am besten in Aktion. Hier ein einfaches Beispiel:

<details>
  <summary>Was ist HTML?</summary>
  HTML (HyperText Markup Language) ist die Standard-Auszeichnungssprache für das Erstellen von Webseiten und Webanwendungen.
</details>

Wenn du diesen Code in deiner Webseite einfügst, siehst du eine interaktive Überschrift, die sich erweitert, um die Antwort zu zeigen, wenn man darauf klickt.

Warum nutzen?

Die Schönheit dieser Tags liegt in ihrer Einfachheit und Zugänglichkeit. Du benötigst kein JavaScript oder aufwendige CSS-Stile, um Aufklapplisten zu realisieren. Sie sind von Natur aus barrierefrei, was bedeutet, dass sie auch für Nutzer mit eingeschränkten Möglichkeiten gut funktionieren.

Anwendungsmöglichkeiten:

  • FAQ-Bereiche: Erstelle einen klaren, interaktiven FAQ-Bereich, ohne eine Zeile JavaScript zu schreiben.
  • Versteckte Inhalte: Biete zusätzliche Informationen oder Überraschungen, die Nutzer entdecken können, um deine Webseite interaktiver zu gestalten.
  • Lernmodule: Gestalte Module, die Schritt für Schritt Informationen freigeben, perfekt für Bildungszwecke.

Gestalten mit CSS

Obwohl <details> und <summary> großartig aus der Box funktionieren, kannst du sie mit ein wenig CSS vollständig an dein Design anpassen. Hier ein einfaches Beispiel, um den Pfeil zu entfernen und einen eigenen Stil hinzuzufügen:

details > summary {
  list-style: none;
}

details > summary::-webkit-details-marker {
  display: none;
}

details[open] > summary {
  font-weight: bold;
}

Fazit

<details> und <summary> sind zwei unterschätzte HTML-Elemente, die eine Menge Potenzial für Webentwickler und Designer bergen. Sie bieten eine einfache Lösung, um interaktive Elemente zu Webseiten hinzuzufügen, ohne auf zusätzliche Skripte angewiesen zu sein. Experimentiere mit ihnen und sieh selbst, wie sie deine Webprojekte bereichern können.

Passend dazu...