Text
HTML gibt Texten Bedeutung: Überschriften, Absätze, Betonung, Zitate und Code werden nicht nur optisch, sondern strukturell beschrieben.
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
Überschriften und Absätze
h1 bis h6 bilden die Dokumentgliederung.
Eine Seite sollte eine klare Hauptüberschrift haben.
p steht für normale Textabsätze. br erzwingt einen Zeilenumbruch, ist aber kein Layout-Werkzeug.
<h1>HTML Grundlagen</h1>
<h2>Text</h2>
<p>Das ist ein normaler Absatz.</p>
<hr>
<p>Ein neues Thema beginnt.</p>Betonung und Bedeutung
strong markiert wichtige Inhalte, em markiert Betonung.
b und i verändern eher die Darstellung. Semantische Tags sind für Lernen, Suche und Barrierefreiheit meist besser.
<p><strong>Wichtig:</strong> Speichere deine Datei vor dem Test.</p>
<p>Das ist <em>besonders</em> hilfreich.</p>
<p><mark>Neu</mark> im Kurs: responsive Bilder.</p>Spezielle Textarten
code, pre, kbd, samp und var beschreiben technische Inhalte.
blockquote, q und cite helfen bei Zitaten. time beschreibt Daten und Uhrzeiten maschinenlesbar.
Vertiefung
Text trägt Bedeutung
strong bedeutet wichtige Betonung, b nur optische Hervorhebung. Screenreader und Suchmaschinen können diesen Unterschied auswerten. Setze semantische Tags bewusst und sparsam ein.
Überschriften sind keine Formatierungswerkzeuge. Wenn Text nur größer aussehen soll, ist CSS die richtige Ebene. Eine saubere h1–h6-Folge bleibt auch dann verständlich, wenn das Stylesheet fehlt.
<article>
<h1>Clean Code</h1>
<p><strong>Wichtig:</strong> Namen sollen Absicht verraten.</p>
<blockquote cite="https://example.test/clean-code">
<p>Code wird öfter gelesen als geschrieben.</p>
</blockquote>
<p>Veröffentlicht am <time datetime="2026-10-18">18. Oktober 2026</time>.</p>
</article>Merksatz: Semantische Text-Tags erklären, warum etwas wichtig ist. Optik gehört ins CSS.
Übungsaufgabe
Artikel mit Textsemantik
Schreibe einen kurzen Artikel über dein Lieblingsthema. Nutze Überschriften, Absätze, wichtige Betonung, ein Zitat mit Quelle und ein maschinenlesbares Datum.
Das soll dein Programm können
- Eine h1 und mindestens eine h2
- strong und em semantisch eingesetzt
- blockquote mit cite
- time mit datetime
- Kein br als Layout-Werkzeug
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
Das datetime-Attribut erwartet ein maschinenlesbares Format wie 2026-10-18. Die sichtbare Beschriftung darf deutsch bleiben.
Lösung anzeigen
<article>
<h1>Warum klare Namen wichtig sind</h1>
<p>Ein guter Name erklärt <strong>Absicht</strong>, nicht nur Technik. Das gilt besonders für Variablen und Funktionen.</p>
<h2>Ein Beispiel</h2>
<p>Statt <code>d</code> heißt die Variable besser <em>verbleibendeTage</em>.</p>
<blockquote cite="https://example.test/clean-code">
<p>Code wird öfter gelesen als geschrieben.</p>
</blockquote>
<p>Notiert am <time datetime="2026-10-18">18. Oktober 2026</time>.</p>
</article>Warum funktioniert das?
strong markiert die Kernaussage, em die Betonung im Satz. blockquote und cite ordnen das Zitat ein; time macht das Datum für Maschinen lesbar.
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.