Nachschlagewerk

📖 HTML-Vokabular für bessere Prompts

Mit diesen Begriffen sagst du der KI präzise, was du willst – statt vage zu beschreiben. Kombiniere mehrere Begriffe zu einem konkreten Satz.

🏗️ Struktur & Layout

Container

Ein umschließender Bereich, der Inhalte zusammenhält und begrenzt.

Card (Karte)

Ein abgegrenzter Kasten mit Schatten/Rand, z. B. für eine Frage oder ein Spiel-Element.

Grid (Raster)

Elemente werden in Zeilen und Spalten gleichmäßig angeordnet.

Spalte

Eine senkrechte Anordnung von Inhalten nebeneinander.

Zentriert

Ein Element wird mittig auf dem Bildschirm oder im Container platziert.

Responsive

Die Seite passt sich automatisch an Handy, Tablet und PC an.

⌨️ Eingabe-Elemente

Button

Eine klickbare Schaltfläche, die eine Aktion auslöst.

Textfeld

Ein Feld, in das man freien Text eintippen kann.

Suchfeld

Ein Textfeld speziell zum Filtern/Suchen von Inhalten.

Checkbox

Ankreuzfeld, mehrere Optionen gleichzeitig auswählbar.

Radiobutton

Auswahlknopf, bei dem nur eine Option aus mehreren wählbar ist.

Dropdown

Aufklappbare Liste, aus der eine Option gewählt wird.

Combobox

Mischung aus Textfeld und Dropdown – tippen und auswählen.

Autocomplete

Beim Tippen werden passende Vorschläge angezeigt.

Drag & Drop

Elemente per Maus/Finger greifen und an eine andere Stelle ziehen.

💬 Feedback & Status

Modal / Popup

Ein Fenster, das über der Seite erscheint und den Rest abdunkelt.

Toast

Kurze Hinweis-Meldung, die kurz einblendet und wieder verschwindet.

Fortschrittsbalken

Balken, der zeigt, wie weit man in einer Aufgabe/einem Level ist.

Punktestand

Laufende Anzeige der aktuell erreichten Punkte.

Timer

Sichtbare Zeitanzeige, oft mit Countdown.

Konfetti-Effekt

Kleine bunte Elemente, die bei Erfolg über den Bildschirm fallen.

Sound-Feedback

Kurzer Ton bei richtiger/falscher Antwort oder bei Level-Aufstieg.

🧭 Navigation

Menü

Liste mit Links/Optionen zum Wechseln zwischen Bereichen.

Tab

Reiter, über die zwischen mehreren Ansichten umgeschaltet wird.

Zurück-/Weiter-Button

Navigation zwischen mehreren Schritten oder Fragen.

🎨 Multimedia

Icon

Kleines Symbolbild, oft anstelle oder neben Text.

Bild-Platzhalter

Fläche, die später mit einem echten Bild gefüllt wird.

Emoji

Kleines Symbol/Gesicht als schnelles, kindgerechtes Gestaltungsmittel.

Hintergrundbild

Bild, das den gesamten Hintergrund einer Fläche füllt.

Farbverlauf

Weicher Übergang zwischen zwei oder mehr Farben.

🕹️ Spiellogik

Zufällige Reihenfolge / Shuffle

Fragen oder Karten werden bei jedem Durchlauf neu gemischt.

Highscore

Der beste bisher erreichte Punktestand wird gespeichert/angezeigt.

Lebenspunkte

Begrenzte „Leben“, die bei Fehlern abgezogen werden.

Level

Abschnitte mit steigendem Schwierigkeitsgrad.

💡 Praxis-Tipp

Kombiniere mehrere Begriffe zu einem konkreten, ganzen Satz:

„Erstelle ein Quiz mit 5 Fragen als Karten in einem zentrierten Container. Bei jeder Frage gibt es 4 Radiobuttons. Bei richtiger Antwort ein grünes Toast-Feedback und +10 Punkte im Punktestand anzeigen.“