Kapitel 7: HTML-Listen-Tags

📋 Lernziel: Listen erstellen - unverzichtbar für Navigation, Produktlisten und mehr!

7.1 Ungeordnete Liste: ul + li

Die ungeordnete Liste verwendet Aufzählungszeichen (•).

Syntax:

<ul>
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
</ul>

Darstellung:

• Element 1
• Element 2
• Element 3

Häufige Verwendungszwecke:

• Navigationsleisten
• Produktlisten
• Feature-Listen
• Blog-Kategorien

Beispiel - Navigationsleiste:

<ul>
  <li><a href="index.html">Startseite</a></li>
  <li><a href="über-uns.html">Über uns</a></li>
  <li><a href="kontakt.html">Kontakt</a></li>
</ul>

---

7.2 Geordnete Liste: ol + li

Die geordnete Liste verwendet Nummern (1, 2, 3...).

Syntax:

<ol>
  <li>Erster Schritt</li>
  <li>Zweiter Schritt</li>
  <li>Dritter Schritt</li>
</ol>

Darstellung:

1. Erster Schritt
2. Zweiter Schritt
3. Dritter Schritt

Häufige Verwendungszwecke:

• Tutorial-Schritte
• Ranglisten
• Prozessabläufe
• Rezepte

Beispiel - Tutorial-Schritte:

<ol>
  <li>Öffne VS Code</li>
  <li>Erstelle eine neue Datei</li>
  <li>Schreibe HTML-Code</li>
  <li>Speichere und öffne im Browser</li>
</ol>

ol-Attribute:

Attribut	Wert	Effekt
type	1, A, a, I, i	Nummerierungsart
start	Zahl	Startnummer

<!-- Römische Zahlen, startet bei 5 -->
<ol type="I" start="5">
  <li>Eintrag</li>
  <li>Noch ein Eintrag</li>
</ol>

---

7.3 Definitionsliste: dl + dt + dd

Die Definitionsliste wird für Begriffe und deren Definitionen verwendet.

Syntax:

<dl>
  <dt>Begriff 1</dt>
  <dd>Beschreibung des Begriffs 1</dd>
  
  <dt>Begriff 2</dt>
  <dd>Beschreibung des Begriffs 2</dd>
</dl>

Darstellung:

Begriff 1
    Beschreibung des Begriffs 1

Begriff 2
    Beschreibung des Begriffs 2

Häufige Verwendungszwecke:

• FAQ-Seiten
• Glossar
• Produktbeschreibungen
• Metadaten-Anzeige

Beispiel - FAQ:

<dl>
  <dt>Was ist HTML?</dt>
  <dd>HTML ist eine Auszeichnungssprache für Webseiten.</dd>
  
  <dt>Wie lerne ich HTML?</dt>
  <dd>Durch Praxis und Übungen wie in diesem Tutorial!</dd>
</dl>

---

7.4 Listen-Verschachtelung

Listen können ineinander verschachtelt werden für komplexe Strukturen.

Beispiel - Verschachtelte ungeordnete Liste:

<ul>
  <li>Obst
    <ul>
      <li>Äpfel</li>
      <li>Bananen</li>
    </ul>
  </li>
  <li>Gemüse
    <ul>
      <li>Karotten</li>
      <li>Brokkoli</li>
    </ul>
  </li>
</ul>

Darstellung:

• Obst
    • Äpfel
    • Bananen
• Gemüse
    • Karotten
    • Brokkoli

Beispiel - Navigationsmenü mit Untermenüs:

<ul>
  <li><a href="index.html">Start</a></li>
  <li>Leistungen
    <ul>
      <li><a href="webdesign.html">Webdesign</a></li>
      <li><a href="seo.html">SEO</a></li>
    </ul>
  </li>
  <li><a href="kontakt.html">Kontakt</a></li>
</ul>

---

7.5 Praxis: Navigationsliste, Schritte, FAQ

Aufgabe 1: Navigationsliste erstellen

<nav>
  <ul>
    <li><a href="index.html">Startseite</a></li>
    <li><a href="blog.html">Blog</a></li>
    <li><a href="kontakt.html">Kontakt</a></li>
  </ul>
</nav>

Aufgabe 2: Schritte erstellen

<h2>So erstellst du deine erste Webseite</h2>
<ol>
  <li>Installiere einen Code-Editor (VS Code)</li>
  <li>Erstelle eine Datei namens index.html</li>
  <li>Schreibe die HTML-Grundstruktur</li>
  <li>Füge Inhalte hinzu</li>
  <li>Speichere und öffne die Datei im Browser</li>
</ol>

Aufgabe 3: FAQ mit Definitionsliste

<h2>Häufig gestellte Fragen</h2>
<dl>
  <dt>Ist HTML schwer zu lernen?</dt>
  <dd>Nein, HTML ist eine der einfachsten Sprachen für Anfänger.</dd>
  
  <dt>Brauche ich ein Studium?</dt>
  <dd>Nein, du kannst HTML durch Online-Tutorials selbst lernen.</dd>
</dl>

---

✅ Zusammenfassung

In diesem Kapitel hast du gelernt:

• ✅ Ungeordnete Listen (<ul> + <li>)
• ✅ Geordnete Listen (<ol> + <li>)
• ✅ Definitionslisten (<dl> + <dt> + <dd>)
• ✅ Listen verschachteln
• ✅ Praxis: Navigation, Schritte, FAQ

🎯 Nächster Schritt: In Kapitel 8 lernst du Tabellen-Tags!

---

← Zurück zu Kapitel 6: Link-TagsWeiter zu Kapitel 8: Tabellen-Tags →