Modul 2: Texte strukturieren
Lerne, wie du Texte mit Überschriften, Absätzen und Listen richtig strukturierst
- Sie koennen Texte mit Überschriften-Hierarchie, Absätzen und Listen strukturierenAnwenden
Nachdem du die Grundstruktur von HTML kennst, lernst du jetzt, wie du Texte sinnvoll strukturierst. Gute Struktur macht Webseiten lesbar und zugänglich.
Überschriften-Hierarchie
HTML bietet sechs Überschriften-Ebenen: <h1> bis <h6>. Die <h1> ist die wichtigste Überschrift (wie ein Buchtitel), <h2> sind Kapitel, <h3> Unterkapitel usw.
Wichtig: Verwende pro Seite nur eine <h1> und halte die Reihenfolge ein (springe nicht von h2 zu h4).
<h1>Mein Lieblings-Rezept: Spaghetti Carbonara</h1>
<h2>Zutaten</h2>
<p>Für 4 Personen benötigst du folgende Zutaten.</p>
<h3>Hauptzutaten</h3>
<ul>
<li>400g Spaghetti</li>
<li>200g Pancetta oder Speck</li>
<li>4 Eigelb</li>
<li>100g Parmesan</li>
</ul>
<h3>Gewürze</h3>
<ul>
<li>Salz</li>
<li>Schwarzer Pfeffer</li>
</ul>
<h2>Zubereitung</h2>
<ol>
<li>Wasser zum Kochen bringen und Spaghetti al dente kochen</li>
<li>Pancetta in der Pfanne knusprig braten</li>
<li>Eigelb mit Parmesan verrühren</li>
<li>Alles vermischen und mit Pfeffer würzen</li>
</ol>Listen in HTML
Es gibt zwei Arten von Listen:
- Ungeordnete Listen (
<ul>): Für Aufzählungen ohne Reihenfolge (Bullet Points) - Geordnete Listen (
<ol>): Für nummerierte Schritte oder Ranglisten
Jedes Listenelement steht in einem <li>-Tag (list item).
Challenge
Übung: Dein Lieblings-Rezept
Erstelle eine HTML-Seite für ein Rezept deiner Wahl. Die Seite soll enthalten:
- Eine
<h1>mit dem Rezeptname - Eine
<h2>für den Abschnitt 'Zutaten' mit einer ungeordneten Liste - Eine
<h2>für 'Zubereitung' mit einer nummerierten Liste (Schritt-für-Schritt) - Optional: Eine
<h3>für Unterkategorien bei den Zutaten
Kreativ werden: Wähle ein Rezept, das dir wirklich gefällt - Pizza, Smoothie, Kuchen, oder sogar ein Sandwich!
Note
Tipp: Schau dir echte Rezept-Websites an (z.B. Chefkoch.de) und beobachte, wie dort Überschriften und Listen verwendet werden. Das ist ein guter Weg, um zu lernen!