Listen
Listen strukturieren Aufzählungen, Reihenfolgen, Glossare und Begriffserklärungen.
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
Ungeordnete und geordnete Listen
ul ist für Listen ohne feste Reihenfolge.
ol ist für Anleitungen, Ranglisten oder andere Inhalte mit klarer Reihenfolge.
li ist ein einzelner Listeneintrag und steht innerhalb von ul oder ol.
<ol>
<li>HTML-Struktur anlegen</li>
<li>Inhalt schreiben</li>
<li>Mit CSS gestalten</li>
</ol>Definitionslisten
dl ist der Container für Begriffspaare.
dt beschreibt den Begriff, dd die Erklärung dazu.
<dl>
<dt>HTML</dt>
<dd>Beschreibt die Struktur und Bedeutung einer Seite.</dd>
<dt>CSS</dt>
<dd>Beschreibt die Darstellung.</dd>
</dl>Vertiefung
Listen sind Beziehungen
Eine Liste ist nicht nur eine Aufzählung mit Punkten. ul sagt: Die Reihenfolge ist egal. ol sagt: Die Reihenfolge ist Teil der Bedeutung. dl beschreibt Begriff und Erklärung.
Verschachtelte Listen gehören in ein li, nicht direkt in ul oder ol. So bleibt die Zugehörigkeit eindeutig, und Screenreader können die Struktur ansagen.
<ul>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
<li>Backend</li>
</ul>Merksatz: Wähle den Listentyp nach Bedeutung. Die Reihenfolge und Verschachtelung müssen im Markup stimmen.
Übungsaufgabe
Rezept als strukturierte Liste
Schreibe ein Rezept mit Zutatenliste, nummerierten Schritten und einem kleinen Glossar für zwei Begriffe.
Das soll dein Programm können
- ul für die Zutaten
- ol für die Arbeitsschritte
- dl mit dt und dd für das Glossar
- li nur innerhalb von ul oder ol
- Eine sinnvolle h1 und h2
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
Für das Glossar: <dl><dt>Begriff</dt><dd>Erklärung</dd></dl>. Die Reihenfolge der Schritte ist wichtig, also ol.
Lösung anzeigen
<article>
<h1>Tomaten-Pasta</h1>
<h2>Zutaten</h2>
<ul>
<li>250 g Pasta</li>
<li>400 g Tomaten</li>
<li>2 Knoblauchzehen</li>
</ul>
<h2>Zubereitung</h2>
<ol>
<li>Wasser aufsetzen und Pasta kochen.</li>
<li>Knoblauch anbraten und Tomaten zugeben.</li>
<li>Pasta mit der Sauce vermengen.</li>
</ol>
<h2>Begriffe</h2>
<dl>
<dt>Al dente</dt>
<dd>Pasta ist noch bissfest.</dd>
<dt>Reduzieren</dt>
<dd>Flüssigkeit durch Kochen eindicken.</dd>
</dl>
</article>Warum funktioniert das?
Die Zutaten sind ungeordnet, die Schritte haben eine Reihenfolge. Das Glossar nutzt dl, weil jedem Begriff genau eine Erklärung zugeordnet ist.
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.