Interaktiv
Einige HTML-Elemente bringen Interaktion direkt mit, ohne dass du sofort JavaScript schreiben musst.
Ansicht
01
Verstehen
Lies die Kernidee und das Beispiel.
02
Prüfen
Beantworte die Aktiv-Checks.
03
Anwenden
Setze die Transferaufgabe um.
Lerninhalt
Verstehen & anwenden
Aufklappen und Dialoge
details und summary erzeugen einen nativen aufklappbaren Bereich.
dialog ist ein natives Dialogelement, das per JavaScript geöffnet werden kann.
<details>
<summary>Mehr anzeigen</summary>
<p>Dieser Text ist erst nach dem Klick sichtbar.</p>
</details>Status und Messwerte
progress zeigt Fortschritt auf ein Ziel.
meter zeigt einen Wert in einem bekannten Bereich, etwa Speicher oder Bewertung.
<label for="fortschritt">Kursfortschritt</label>
<progress id="fortschritt" value="6" max="10">6 von 10</progress>
<label for="speicher">Speicher belegt</label>
<meter id="speicher" value="0.7" min="0" max="1">70 %</meter>Fortgeschrittene Elemente
noscript ist ein Fallback, wenn JavaScript deaktiviert ist.
iframe bettet andere Seiten ein. template und slot sind wichtig für Web Components.
Vertiefung
Native Interaktion zuerst
Viele Interaktionen brauchen kein JavaScript. details und summary liefern ein aufklappbares Element, dialog einen modalen Dialog, progress und meter passende Anzeigen für Fortschritt und Messwerte.
Native Elemente bringen Tastaturbedienung und Screenreader-Unterstützung mit. Eigene div-Konstrukte müssen all das erst nachbauen — meist schlechter und fehleranfälliger.
<details>
<summary>Brauche ich JavaScript?</summary>
<p>Für dieses FAQ nicht.</p>
</details>
<label for="fortschritt">Kursfortschritt</label>
<progress id="fortschritt" value="40" max="100">40 %</progress>Merksatz: Prüfe zuerst, ob HTML das Verhalten schon mitbringt. Native Elemente sind zugänglicher und wartungsärmer.
Übungsaufgabe
FAQ mit Fortschritt
Baue einen aufklappbaren FAQ-Bereich mit drei Fragen und eine Fortschrittsanzeige für ein Lernziel. Ergänze einen nativen Dialog.
Das soll dein Programm können
- Drei details mit summary
- progress mit value und max
- dialog mit einem Button zum Schließen
- Sichtbare Beschriftungen
- Kein JavaScript für das Aufklappen
Schreibe den Code hier oder in deiner IDE und vergleiche ihn dann mit der Lösung.
Dein Code wird automatisch auf diesem Gerät gespeichert.
Hinweis anzeigen
Der Dialog kann per JavaScript mit showModal() geöffnet werden. Für die Übung reicht das Markup mit einem Schließen-Button.
Lösung anzeigen
<section aria-labelledby="faq">
<h2 id="faq">Häufige Fragen</h2>
<details>
<summary>Wie lange dauert das Modul?</summary>
<p>Etwa zehn Minuten pro Lektion.</p>
</details>
<details>
<summary>Brauche ich Vorkenntnisse?</summary>
<p>Nein, wir starten bei den Grundlagen.</p>
</details>
<details>
<summary>Kann ich Pausen machen?</summary>
<p>Ja, dein Fortschritt bleibt gespeichert.</p>
</details>
<label for="ziel">Lernziel</label>
<progress id="ziel" value="6" max="10">6 von 10</progress>
<dialog id="hinweis">
<p>Du kannst jederzeit pausieren.</p>
<button type="button">Schließen</button>
</dialog>
</section>Warum funktioniert das?
details und summary funktionieren ohne JavaScript. progress braucht value und max; der Textinhalt ist der Fallback für ältere Browser. Der Dialog bleibt zunächst geschlossen und wird per JavaScript geöffnet.
Aktiv-Check
Teste dein Verständnis
Erkennen: Welcher Abschnitt passt?
Welcher Abschnitt passt zu diesen Begriffen?
Transfer
Mini-Projekt: Deine Lieblingsseite
Baue eine kleine Seite über ein Thema, das dich wirklich interessiert. Nutze die Struktur, die du in dieser Lektion gelernt hast.
Selbstcheck
Kann ich das schon?
Hake ab, was du wirklich erklären oder selbst bauen könntest.
Fortschritt
Bereit zum Abschließen?
Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.