Du kennst das Grundgerüst — jetzt füllen wir es mit Leben. Texte, Bilder, Links, Listen und Tabellen: die Bausteine, aus denen jede Webseite besteht.
HTML kennt verschiedene Elemente für Text — von Überschriften über Absätze bis hin zu Hervorhebungen. Jedes Element hat eine semantische Bedeutung.
<p> für Absätze, <br> für Umbrüche.
<p>Erster Absatz mit Text.</p>
<p>Zweiter Absatz.</p>
<p>Zeile eins<br>Zeile zwei</p>
Wichtig: Der Browser ignoriert normale Zeilenumbrüche im Code! Nur <p> und <br> erzeugen sichtbare Abstände.
<strong> für fett, <em> für kursiv.
<p>Das ist <strong>wichtig</strong>.</p>
<p>Das wird <em>betont</em>.</p>
<strong> bedeutet semantisch „wichtig" (nicht nur fett). <em> bedeutet „betont" (nicht nur kursiv). Screenreader lesen diese anders vor!
<hr> trennt, <pre> bewahrt Formatierung.
<hr>
<!-- Horizontale Trennlinie -->
<pre>
Dieser Text
bewahrt seine
Einrückung.
</pre>
<pre> zeigt Text genau so an, wie er im Code steht — perfekt für Code-Beispiele oder ASCII-Art.
Diese Elemente machen aus statischem Text eine echte Webseite — verlinkt, visuell und strukturiert.
alt = Alternativtext für Screenreader und falls das Bild nicht lädt. Pflicht!
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol>
<li>Grundgerüst</li>
<li>Inhalte</li>
<li>Styling</li>
</ol>
| Tag | Bedeutung |
|---|---|
| <p> | Absatz |
| <a> | Link |
thead/tbody = semantische Trennung von Kopf und Körper
Klicke auf jede Aussage, um aufzudecken, ob sie stimmt.
Sortiere: zuerst Text-Tags, dann Medien-Tags, dann Struktur-Tags.
<ul> — Ungeordnete Liste<img> — Bild<p> — Absatz<table> — Tabelle<a> — Link<strong> — HervorhebungDie Seite soll enthalten: eine Überschrift mit deinem Namen, einen Absatz über dich, ein Bild (mit alt-Text) und eine Liste deiner Hobbys. Schreibe den Code direkt ins Textfeld.
7 Fragen — teste, ob du die HTML-Bausteine drauf hast.
Klicke auf eine Karte, um die Definition zu sehen.
<a href="..."> erstellt.
src="bild.jpg"
„Warum ist Barrierefreiheit im Web so wichtig? Überlegt: Welche alltäglichen Webseiten wären für blinde Menschen unbenutzbar, wenn Entwickler auf alt-Texte und semantische Tags verzichten?"
Diskutiert in Dreiergruppen (4 Minuten). Nennt jeweils ein konkretes Beispiel.