Schritt für Schritt HTML lernen · CSS kommt in einem eigenen Kurs
Erledigte Missionen0 / 0
📚 Einfach erklärt
🪜 Schritt für Schritt
🧩 HTML-Bausteine
Klicke auf einen Baustein, um seine Aufgabe kennenzulernen.
🎯 Deine Missionen
Die Aufgaben sind am Anfang noch nicht erledigt. Ändere den Quellcode oder führe echte Terminalbefehle aus. Klicke dann auf „Missionen überprüfen“ – erst danach erscheinen Häkchen.
Bildordner: bilder/ · wie ein Unterzimmer in der Datei-WG
Beispielbilder sind bereits vorhanden. Du kannst eigene Bilder hinzufügen. Einfügen geht z. B. so: <img src="bilder/internet.svg" alt="Das Internet">
🧪 Netzwerk-Simulator – keine echten Verbindungen: Alle IP-Adressen und Serverantworten sind erfunden. Wir verwenden dafür reservierte Beispieladressen wie www.schule.example.org und 203.0.113.42. Du kannst gefahrlos experimentieren.
Klicke auf einen Baustein der Webadresse. Was ist die Subdomain, was die eigentliche Domain und was die Top-Level-Domain?
🗺️ Zwei unterschiedliche Wege: DNS-Nachfrage und Webseiten-Anfrage
Beide Wege in Bewegung: Lila = DNS-Frage und DNS-Antwort; Blau = Anfrage an den Webserver; Grün = HTML-Antwort zurück. Die Animation ist ein vereinfachtes Modell, keine echte Netzwerkmessung.
Starte mit nslookup www.schule.example.org. Danach erkundest du den Router und die Webserverroute.
📨 Eine HTTP-Anfrage und ihre Antwort
Der Browser sendet eine Anfrage an den Webserver. Die Antwort besteht aus Statuszeile, Headern und gegebenenfalls einem HTML-Dokument.
1 · Anfrage
GET /index.html HTTP/1.1
Host: www.schule.example.org
2 · Antwortkopf
HTTP/1.1 200 OK
Content-Type: text/html
3 · HTML-Inhalt
<h1>Hallo!</h1>
<p>Willkommen!</p>
Probiere anschließend curl -i aus. Für eine fehlende Datei erscheint 404 Not Found statt 200 OK.
Merke:nslookup fragt die IP beim DNS an. traceroute (Windows: tracert) untersucht mögliche Router-Zwischenstationen zum Ziel. curl fordert eine Webressource an und zeigt HTTP-Header oder HTML-Quelltext. Eine echte Routenverfolgung kann anders aussehen; nicht jeder Router antwortet.
⌨️ Übungs-TerminalLinux-Kommandos und Windows-Alternativen · ausschließlich Simulation
🏠 Linux-WG · Datei-Explorer/home/wg
🏡 Unsere WG als Grundriss: Wohnung = Hauptordner, Zimmer = Ordner, Nebenzimmer = Unterordner
Klick auf ein Zimmer oder NebenzimmerIm Terminal wechselst du mit cdGelb = Unterordner · Lila = Webseitenordner🔵 DU = aktueller Terminalstandort · gestrichelt = letzter Weg
Klicke auf ein Zimmer oder Nebenzimmer, um den vollständigen Pfad zu sehen. Im Terminal bewegst du dich mit cd.
🧠 Merke:/ am Anfang bedeutet: Beginne beim Wurzelverzeichnis (absoluter Dateipfad). Ohne / beginnst du dort, wo du gerade bist (relativer Dateipfad). .. bedeutet: ein Verzeichnis nach oben. Linux-Befehle:dir und ls zeigen Inhalte, cd wechselt das Verzeichnis, cp kopiert und mv verschiebt eine Datei. Mit cat DATEI.txt liest du ihren Textinhalt. Wichtig: Dieses Terminal verändert ausschließlich eine erfundene WG im Browser, keine echten Serverdateien.
wg-schulserver · nur Simulation, keine echte Linux-Verbindung
🌐 Die Reise deiner Webseite
Die Grafik zeigt, was zwischen dem Eingeben der Adresse und der Darstellung im Browser passiert. Schau dir die Schritte an oder starte den automatischen Ablauf.
⌨ index.htmleditierbar
1
✦ Klicke im Code auf einen HTML-Tag. Hier wird er erklärt.
👁 Live-Vorschau● LIVE
https://meine-webseite.de/index.html (Simulation)
Browser-Tab
ℹ️ Interne Links zu deinen HTML-Dateien funktionieren direkt in dieser Vorschau. Externe Websites werden hier nicht geöffnet – in deiner exportierten Webseite funktionieren die Links normal.
📚 HTML-Nachschlagewerk · 21 A4-Seiten
In eingebetteten Lernseiten kann der Browser das Drucken im iframe blockieren. Öffne dann die Druckversion in einem eigenen Tab oder lade sie herunter.
HTML-WEBWERKSTATT · NACHSCHLAGEWERK · SEITE 1/21
HTML verstehen und nachschlagen
Ein Begleitheft über Internetadressen, Netzwerke und deine ersten Webseiten – ohne CSS-Unterricht.
Was findest du in diesem Nachschlagewerk?
Du musst nicht jeden HTML-Tag auswendig lernen. Dieses Heft erklärt, welches Element du für welche Aufgabe brauchst. Viele Beispiele zeigen dir erst den Quelltext und danach seine Wirkung.
HTML = Struktur und Bedeutung HTML beschreibt: Das ist eine Überschrift. Das ist eine Liste. Hier steht ein Link. Diese Bilddatei gehört hierhin.
Der Browser = Übersetzer Er liest die .html-Datei und baut daraus eine Webseite. Das Design mit CSS lernst du erst später.
1. Denke zuerst an den Inhalt, nicht an Farben. 2. Rücke verschachtelten Code ein, damit du die Struktur siehst. 3. Öffne die HTML-Datei regelmäßig im Browser und prüfe dein Ergebnis.
Merke: Ein HTML-Tag hat eine Aufgabe. Ein Element kann andere Elemente enthalten – so entsteht ein Baum aus ineinander verschachtelten Bausteinen.
HTML nachschlagen · verstehen · anwenden · Seite 1/21
HTML-WEBWERKSTATT · NACHSCHLAGEWERK · SEITE 2/21
Domains, Subdomains und Internetadressen
Eine URL ist mehr als nur ein Name – so setzt sich die Adresse zusammen.
Der angesprochene Name im Internet; die DNS-Abfrage betrifft diesen Namen
Subdomains
www.schule
Zusätzliche Namensebenen links von der registrierbaren Domain
Registrierbare Domain
example.org
Beispiel einer registrierbaren Domain; example ist der Name vor der TLD
Top-Level-Domain
.org
Rechte Namensebene; auch .de, .com, .net
Pfad
/projekte/index.html
Welche Ressource die Website liefern soll
Query / Abfrage
?klasse=8
Zusätzliche Parameter, können an den Server geschickt werden
Fragment
#bilder
Sprungmarke im Dokument; wird normalerweise nicht an den Server übertragen
2 · Domain und IP-Adresse sind nicht dasselbe
Menschen merken sich Namen wie www.schule.example.org. Netzwerkgeräte kommunizieren über IP-Adressen, zum Beispiel 203.0.113.42. Der DNS-Dienst hilft bei der Zuordnung. Mehrere Namen können zur gleichen IP führen, und eine Domain kann auch mehrere IP-Adressen besitzen.
Merke: Der Pfad /projekte/index.html steht hinter der Domain. .html ist eine Dateiendung und keine Top-Level-Domain.
3 · Warum verwenden wir example.org?
example.org ist für Erklärungen reserviert. Auch alle hier gezeigten öffentlichen IP-Adressen aus den Netzen 192.0.2.x, 198.51.100.x und 203.0.113.x sind reine Dokumentationsbeispiele. Sie beschreiben keinen echten Schulserver.
HTML nachschlagen · verstehen · anwenden · Seite 2/21
HTML-WEBWERKSTATT · NACHSCHLAGEWERK · SEITE 3/21
DNS, IP-Adressen und Heimrouter
Mit nslookup und dig herausfinden, welcher Server zur Domain gehört.
1 · Was passiert bei einer DNS-Abfrage?
Wenn du eine Domain eingibst, wird zunächst geprüft, ob die passende IP-Adresse bereits zwischengespeichert ist. Sonst fragt dein Gerät über das Netzwerk einen DNS-Resolver an. Der Resolver kann die Adresse aus seinem Cache kennen oder weitere DNS-Server befragen. Das Ergebnis ist beispielsweise ein A-Record für IPv4.
Standardroute, z. B. über den Heimrouter 192.168.1.1
nslookup DOMAIN
Anfrage an einen DNS-Resolver: Domain zu IP
dig DOMAIN
Details einer DNS-Antwort, z. B. A-Record und TTL
ping DOMAIN
Erreichbarkeit prüfen; sagt nicht, ob eine Webseite funktioniert
3 · Lokale und öffentliche IP-Adressen
192.168.1.25 kann eine private IP des eigenen PCs sein, 192.168.1.1 die Adresse des Heimrouters (Standardgateway). Außerhalb des Heimnetzes werden andere Adressen verwendet. Router können Adressen übersetzen (NAT). IPv6 ist ein weiteres Adressformat.
TTL: Ein DNS-Eintrag darf nur für eine begrenzte Zeit zwischengespeichert werden. Das heißt nicht, dass sich die IP danach zwingend ändert.
4 · DNS ist nicht die eigentliche HTTP-Antwort
DNS liefert normalerweise keine HTML-Seite. Die Anfrage nach dem HTML-Inhalt erfolgt erst anschließend zum Webserver. Die IP des DNS-Resolvers und die IP des Webservers sind in unserem Beispiel unterschiedlich.
HTML nachschlagen · verstehen · anwenden · Seite 3/21
HTML-WEBWERKSTATT · NACHSCHLAGEWERK · SEITE 4/21
Routen prüfen und HTML abrufen
Mit tracert, traceroute und curl die Reise der Webanfrage untersuchen.
1 · Dein Datenweg zum Webserver
Dein PC (192.168.1.25)
↓
Heimrouter (192.168.1.1)
↓
Provider / weitere Router
↓
Webserver (203.0.113.42)
Der DNS-Resolver ist nicht automatisch eine Station dieser Route. Die DNS-Abfrage ist ein gesonderter Vorgang. Router antworten bei einer realen Routenverfolgung nicht immer – es können Sternchen * auftreten.
2 · traceroute und tracert
traceroute www.schule.example.org # Linux
tracert www.schule.example.org # Windows
1 192.168.1.1 Heimrouter
2 10.13.0.1 Provider
3 198.51.100.1 Zwischenrouter
4 203.0.113.42 Webserver
Zum Vergleich kannst du die Route zum DNS-Resolver gesondert untersuchen: traceroute 192.0.2.53. Sie muss anders verlaufen als die Route zum Webserver.
Hop bedeutet Station eines Netzwerkpfads. Die angegebenen Zeiten und Adressen sind simulierte Beispiele, kein echter Internet-Routentest.
-I zeigt nur den Header, -i Header plus Inhalt. Der Browser interpretiert die HTML-Tags und stellt sie als Webseite dar. Der HTML-Code selbst ist reiner Text.
4 · Fehler verstehen und sicher übertragen
Status / Thema
Bedeutung
200 OK
Ressource erfolgreich geliefert
404 Not Found
Angeforderter Pfad nicht gefunden; Internet kann trotzdem funktionieren
301 / 302
Weiterleitung zu einer anderen Adresse
500
Interner Serverfehler
HTTPS
TLS schützt die Übertragung, garantiert aber nicht, dass der Inhalt seriös ist
Mehrere Anfragen: Für Bilder, HTML-Unterseiten und andere Dateien schickt der Browser gewöhnlich zusätzliche HTTP-Anfragen. Ein <img>-Tag enthält nur einen Verweis auf die Bilddatei.
HTML nachschlagen · verstehen · anwenden · Seite 4/21
HTML-WEBWERKSTATT · NACHSCHLAGEWERK · SEITE 5/21
Der Grundbauplan jeder Webseite
Diese Grundstruktur kannst du als Vorlage für jede neue HTML-Datei verwenden.
1 · Vollständiger HTML-Code
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Meine erste Webseite</title>
</head>
<body>
<h1>Hallo Welt!</h1>
<p>Das ist meine erste selbst geschriebene HTML-Seite.</p>
</body>
</html>
2 · Was bedeuten die Bestandteile?
Code
Bedeutung
<!DOCTYPE html>
Teilt dem Browser mit: Es handelt sich um ein modernes HTML-Dokument. Kein normales Element.
<html lang="de">
Wurzelelement des Dokuments. lang="de" kennzeichnet die Seitensprache Deutsch.
<head>
Enthält Informationen über die Seite, zum Beispiel den Tab-Titel.
<meta charset="UTF-8">
Legt die Zeichenkodierung fest; Umlaute wie ä, ö, ü werden korrekt verarbeitet.
<meta name="viewport" ...>
Hilft bei der Darstellung auf unterschiedlich großen Bildschirmen.
<title>
Seitenname im Browsertab; nicht die große Überschrift im Seiteninhalt.
<body>
Enthält den eigentlichen Inhalt: Texte, Links, Bilder, Listen, Tabellen usw.
<h1>
Die Hauptüberschrift der sichtbaren Webseite.
3 · Head und Body unterscheiden
<head> = hinter den Kulissen Metadaten, Tab-Titel und technische Informationen. Der Text im title erscheint nicht als Überschrift im Dokument.
<body> = auf der Bühne Alles, was die Besucherinnen und Besucher normalerweise sehen und verwenden, kommt in den body.
Dateiname: Die Startseite eines Projekts heißt häufig index.html. Speichere als UTF-8 und achte auf die Endung .html, nicht .txt.
HTML nachschlagen · verstehen · anwenden · Seite 5/21
HTML-WEBWERKSTATT · NACHSCHLAGEWERK · SEITE 6/21
Tags, Elemente und Attribute
So setzt sich HTML zusammen – und so vermeidest du typische Schreibfehler.
1 · Anfangs-Tag, Inhalt und End-Tag
<p class="hinweis">Hier steht ein Satz.</p>
Anfangs-Tag:<p class="hinweis"> Eröffnet das Element; kann Attribute enthalten.
End-Tag:</p> Beendet das Element. Dazwischen steht der Inhalt.
Der ganze Ausdruck ist ein HTML-Element. Das Attributclass="hinweis" ist eine zusätzliche Angabe im öffnenden Tag.
Sie können keinen inneren Inhalt haben und besitzen kein End-Tag.
Wichtig: „Inline-Element“ und „leeres Element“ sind keine Gegensätze. Inline/Block sagt etwas über die übliche Darstellung; leer/nicht leer über den HTML-Aufbau.
Die zuletzt geöffnete Hülle schließt du zuerst wieder. Vermeide überkreuzte Tags wie <strong><em>Text</strong></em>.
4 · Häufige Attribute
Attribut
Wirkung
href="kontakt.html"
Ziel eines Links
src="bilder/foto.jpg"
Dateipfad einer eingebundenen Ressource
alt="Katze auf dem Sofa"
Alternative Bildbeschreibung
id="kontakt"
Eindeutiger Bezeichner innerhalb einer Seite
class="box"
Name für Gruppen gleichartiger Elemente; Gestaltung folgt später
lang="de"
Sprache des Textes oder Dokuments
title="Hinweis"
Zusätzliche Information; nicht als Ersatz für sichtbare Beschriftung verwenden
HTML nachschlagen · verstehen · anwenden · Seite 6/21
HTML-WEBWERKSTATT · NACHSCHLAGEWERK · SEITE 7/21
Inline, Block und Hervorhebung
Zwei unterschiedliche Fragen: Wie ordnet der Browser etwas an? Und welche Bedeutung hat es?
1 · Blockelemente und Inline-Elemente
Typisches Blockelement <p>, <h2>, <ul>, <section> Beginnt im Browser üblicherweise in einer neuen Zeile und bildet einen eigenen Bereich.
Typisches Inline-Element <strong>, <em>, <a>, <span> Steht innerhalb einer Textzeile, ohne von sich aus einen neuen Absatz zu erzeugen.
<p>Ein Absatz mit <strong>wichtigen</strong> Wörtern.</p>
<p>Ein zweiter Absatz beginnt auf einer neuen Zeile.</p>
So erscheint es im Browser (vereinfacht):
Ein Absatz mit wichtigen Wörtern.
Ein zweiter Absatz beginnt auf einer neuen Zeile.
2 · strong, em, b und i unterscheiden
Element
Bedeutung
Übliche Darstellung
<strong>
Starke Wichtigkeit, Ernst oder Dringlichkeit
oft fett
<em>
Betonung beim Sprechen; kann die Aussage verändern
oft kursiv
<b>
Lenkt Aufmerksamkeit auf eine Stelle, ohne zusätzliche Wichtigkeit
oft fett
<i>
Text, der sich in seiner Art unterscheidet, z. B. fremdsprachlicher Ausdruck
oft kursiv
<mark>
Im Kontext besonders relevante oder markierte Textstelle
oft markiert
<small>
Nebenbemerkung oder Kleingedrucktes
oft kleiner
3 · Bedeutung statt Aussehen
<p><strong>Achtung:</strong> Die Datei wird gelöscht.</p>
<p>Ich habe <em>nicht</em> gesagt, dass sie kaputt ist.</p>
<p>Suche nach dem Wort <mark>Internet</mark>.</p>
So erscheint es im Browser (vereinfacht):
Achtung: Die Datei wird gelöscht.
Ich habe nicht gesagt, dass sie kaputt ist.
Suche nach dem Wort Internet.
Schreibregel: Nutze <strong> für Bedeutung, nicht nur, weil etwas fett aussehen soll. <em> kennzeichnet Betonung – nicht einfach irgendeinen kursiv gewünschten Text.
HTML nachschlagen · verstehen · anwenden · Seite 7/21
HTML-WEBWERKSTATT · NACHSCHLAGEWERK · SEITE 8/21
Überschriften, Text und Zitate
So gliederst du eine Webseite in verständliche, gut lesbare Abschnitte.
h1 ist die wichtigste Überschrift der Seite, h2 eine Ebene darunter, h3 ein Unterthema. Überspringe Ebenen möglichst nicht nur wegen der Schriftgröße.
2 · Absätze, Zeilenwechsel und thematische Trennung
<p>Dieser Satz steht in einem Absatz.</p>
<p>Dieser Absatz ist ein neuer Textblock.</p>
<p>Adresse:<br>Schulstraße 1<br>12345 Musterstadt</p>
<hr>
<p>Hier beginnt ein anderes Thema.</p>
Tag
Zweck
<p>
Ein vollständiger Textabsatz. Für normale Texte verwenden.
<br>
Zeilenumbruch innerhalb desselben Absatzes, z. B. in einer Adresse oder einem Gedicht.
<hr>
Thematischer Wechsel zwischen Textabschnitten; häufig als Linie dargestellt.
3 · Zitate und Quellcode
<p>Sie sagte: <q>Ich lerne HTML.</q></p>
<blockquote cite="https://beispiel.de/quelle">
<p>Dies ist ein längeres Zitat.</p>
</blockquote>
<p>Drücke <kbd>Strg</kbd> + <kbd>S</kbd>.</p>
<p>Ein HTML-Absatz heißt <code><p></code>.</p>
<pre><code>Zeile 1
Zeile 2 mit Einrückung</code></pre>
q = kurzes Zitat im Satz; blockquote = längeres Zitat als Block; kbd = Tastatureingabe; code = Quellcode; pre bewahrt Leerzeichen und Zeilenumbrüche.
4 · Sonderzeichen sichtbar schreiben
Im HTML-Quellcode
Im Browser
<
<
>
>
&
&
"
"
geschütztes Leerzeichen
Für ein wörtlich sichtbares<p> brauchst du im Text <p>. Das ist etwas anderes als ein echter HTML-Tag.
HTML nachschlagen · verstehen · anwenden · Seite 8/21
HTML-WEBWERKSTATT · NACHSCHLAGEWERK · SEITE 9/21
Listen: ul, ol, li und dl
Listen sind keine Folge von Zeilenumbrüchen: Sie besitzen eine echte HTML-Struktur.
1 · Ungeordnete Liste mit ul und li
<h2>Was gehört in die Schultasche?</h2>
<ul>
<li>Heft</li>
<li>Stift</li>
<li>Lineal</li>
</ul>
So erscheint es im Browser (vereinfacht):
Was gehört in die Schultasche?
Heft
Stift
Lineal
ul heißt „unordered list“ (ohne Rangfolge). Jeder Eintrag steht in einem eigenen li („list item“). Ein li gehört in der Regel in ein ul oder ol.
Das semantische Element nav kennzeichnet einen Bereich mit wichtigen Navigationslinks. Auf jeder Unterseite solltest du einen Rückweg anbieten.
4 · Sprungmarke und neuer Tab
<a href="#impressum">Zum Impressum springen</a>
<!-- ... weiter unten auf derselben Seite ... -->
<h2 id="impressum">Impressum</h2>
<a href="https://www.example.org/" target="_blank" rel="noopener noreferrer">Neue Registerkarte</a>
Tipp: Verwende sprechende Linktexte („Projektbeschreibung öffnen“) statt „Hier klicken“. Bei target="_blank" solltest du den neuen Tab ankündigen und rel="noopener noreferrer" berücksichtigen.
HTML nachschlagen · verstehen · anwenden · Seite 10/21
HTML-WEBWERKSTATT · NACHSCHLAGEWERK · SEITE 11/21
Bilder richtig einbinden
Ein Bild ist eine eigene Datei. HTML verweist auf diese Datei, statt sie im Code zu speichern.
1 · img, src und alt
<img src="bilder/wald.jpg" alt="Sonnenlicht fällt durch einen Wald">
Teil
Aufgabe
<img>
Leeres Element – kein </img>!
src="bilder/wald.jpg"
Dateipfad vom Ordner der aktuellen HTML-Datei aus
alt="..."
Alternative Beschreibung für Screenreader oder bei fehlendem Bild
Der Alternativtext beschreibt bei informativen Bildern den Inhalt bzw. Zweck – nicht „Bild von ...“ als leere Floskel. Reine Dekoration kann alt="" erhalten.
2 · Bild und Bildunterschrift verbinden
<figure>
<img src="bilder/planet.jpg" alt="Erde aus dem Weltall">
<figcaption>Unsere Erde aus großer Entfernung.</figcaption>
</figure>
figure gruppiert einen eigenständigen Inhalt mit optionaler figcaption, z. B. ein Foto, Diagramm oder Schaubild.
Vektorzeichnungen, Logos und Symbole – bleibt scharf beim Vergrößern
WebP
Fotos oder Grafiken mit effizienter Komprimierung
width und height geben die Bildmaße in CSS-Pixeln an. Wähle passende Proportionen, damit nichts verzerrt wirkt. Die Gestaltung selbst folgt später mit CSS.
Wenn ein Bild nicht erscheint: Existiert die Datei wirklich? Stimmt die Endung .jpg oder .png? Ist Bilder vielleicht anders geschrieben als bilder? Sind alle Unterordner mit hochgeladen?
HTML nachschlagen · verstehen · anwenden · Seite 11/21
HTML-WEBWERKSTATT · NACHSCHLAGEWERK · SEITE 12/21
Semantische HTML-Elemente
Semantik heißt: Der Tag verrät, welche Aufgabe ein Inhalt hat – nicht nur, wie er aussieht.
1 · Diese Elemente solltest du kennen
Element
Bedeutung
Typische Verwendung
<header>
Kopfbereich
Seitentitel, Logo, Einleitung zu einer Seite oder einem Artikel
<nav>
Navigation
Hauptmenü oder wichtige Linkgruppen
<main>
Hauptinhalt
Zentraler Inhalt der aktuellen Seite; normalerweise einmal pro Seite
<section>
Thematischer Abschnitt
Zusammengehörender Inhalt, meist mit Überschrift
<article>
Eigenständig verständlicher Beitrag
Nachricht, Blogbeitrag, Rezept, Forenbeitrag
<aside>
Ergänzender Inhalt
Hinweisbox, verwandte Links, Randinformation
<footer>
Fußbereich
Autor, Urheberrechtsinformation, weitere Hinweise
<figure>
Eigenständige Abbildung
Foto, Grafik oder Beispiel mit optionaler Beschriftung
<figcaption>
Beschriftung einer figure
Bildunterschrift oder Erläuterung
<time>
Datum oder Uhrzeit
Maschinenlesbare Zeitangabe mit datetime-Attribut
<address>
Kontaktinformation
Kontaktdaten der verantwortlichen Person/Organisation
2 · Ein Beispiel aus dem Schulalltag
<article>
<header>
<h2>Unser Ausflug</h2>
<p>Veröffentlicht am <time datetime="2026-10-28">28. Oktober 2026</time></p>
</header>
<p>Wir haben ein Museum besucht.</p>
<aside>Hinweis: Fotos findest du in der Galerie.</aside>
</article>
article ist in sich abgeschlossen. header enthält die Überschrift des Beitrags; aside ist eine ergänzende Randinformation.
3 · section, article und div sind nicht dasselbe
section = Themenabschnitt Ein Bereich über „Unsere Projekte“ oder „Schulregeln“; sinnvoll mit Überschrift.
article = eigener Beitrag Ein einzelner Artikel, der auch unabhängig von der restlichen Seite verständlich ist.
div hat keine eigene inhaltliche Bedeutung. Nutze div als neutralen Container nur dann, wenn kein semantisches Element passt. So verstehen Menschen, Browser und Hilfsmittel die Seite besser.
HTML nachschlagen · verstehen · anwenden · Seite 12/21
HTML-WEBWERKSTATT · NACHSCHLAGEWERK · SEITE 13/21
So wird daraus eine echte Webseite
Ein Beispiel mit header, nav, main, section, article, aside und footer – ohne CSS.
1 · Kompletter semantischer HTML-Aufbau
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Unsere Schulzeitung</title>
</head>
<body>
<header>
<h1>Unsere Schulzeitung</h1>
<p>Nachrichten aus der Schule</p>
</header>
<nav aria-label="Hauptnavigation">
<a href="index.html">Start</a>
<a href="kontakt.html">Kontakt</a>
</nav>
<main>
<section>
<h2>Aktuelle Nachrichten</h2>
<article>
<h3>Unsere Projektwoche</h3>
<p>Wir haben Roboter gebaut.</p>
<figure>
<img src="bilder/roboter.jpg" alt="Unser selbst gebauter Roboter">
<figcaption>Das Ergebnis unserer Gruppe</figcaption>
</figure>
</article>
</section>
<aside>
<h2>Gut zu wissen</h2>
<p>Der nächste Projekttag ist am Freitag.</p>
</aside>
</main>
<footer>
<p>Schulzeitung der Klasse 9a</p>
</footer>
</body>
</html>
2 · Welche Teile sind sichtbar?
Oberer Bereich header enthält Titel und Einleitung; nav führt zu den anderen Seiten.
Inhalt und Abschluss main bündelt den Hauptinhalt, section Themen, article Beiträge; aside ergänzt, footer beendet.
Du kannst auch eine einfache Seite nur mit h1, p und a schreiben. Semantische Elemente helfen besonders, wenn die Webseite wächst.
HTML nachschlagen · verstehen · anwenden · Seite 13/21
HTML-WEBWERKSTATT · NACHSCHLAGEWERK · SEITE 14/21
Tabellen für echte Daten
Tabellen sind gut für Stundenpläne oder Messwerte – nicht für das Seitenlayout.
1 · Die Bausteine einer HTML-Tabelle
Tag
Aufgabe
<table>
Umhüllt die gesamte Tabelle
<caption>
Sprechende Tabellenüberschrift
<thead>
Gruppiert die Kopfzeilen
<tbody>
Gruppiert die eigentlichen Datenzeilen
<tr>
Eine Tabellenzeile
<th>
Eine Überschriftszelle; scope="col" oder scope="row" hilft der Zuordnung
colspan="2" lässt eine Zelle zwei Spalten überspannen. rowspan="2" verbindet Zellen über zwei Zeilen. Verwende solche Angaben sparsam und prüfe, ob die Tabelle noch verständlich bleibt.
HTML nachschlagen · verstehen · anwenden · Seite 14/21
HTML-WEBWERKSTATT · NACHSCHLAGEWERK · SEITE 15/21
Formulare und Eingabefelder
HTML-Formulare erfassen Informationen. Für eine echte Verarbeitung brauchst du später einen Serverdienst.
1 · Die wichtigsten Formularelemente
Tag
Funktion
<form>
Umrahmt das Formular; action = Ziel, method = Übertragungsverfahren
<label>
Beschriftet ein Feld, verbunden über for und id
<input>
Eingabefeld ohne End-Tag; type bestimmt die Art
<textarea>
Mehrzeiliges Textfeld mit End-Tag
<select> + <option>
Auswahlliste und ihre Einträge
<button>
Schaltfläche, z. B. type="submit"
<fieldset> + <legend>
Gruppiert zusammengehörige Felder und benennt die Gruppe
required bedeutet: Das Feld muss ausgefüllt werden. name ist die Kennung des Feldwerts bei der Übertragung. action="/anmeldung" ist hier nur ein Beispiel – die Adresse braucht einen echten Server-Endpunkt.
3 · Häufige input-Typen
text, email, number, date Text, E-Mail, Zahl und Datum.
Datenschutz: Eine HTML-Datei allein verschickt keine sichere E-Mail und speichert nichts auf einem Server. Die Prüfung im Browser ersetzt niemals die Prüfung auf dem Server. Keine echten Passwörter oder personenbezogenen Daten in Unterrichtsbeispielen sammeln.
4 · checkbox und radio in der Praxis
<fieldset>
<legend>Wie reist du zur Schule?</legend>
<label><input type="radio" name="weg" value="bus"> Bus</label>
<label><input type="radio" name="weg" value="rad"> Fahrrad</label>
</fieldset>
<label><input type="checkbox" name="info">
Ich möchte weitere Informationen.</label>
radio: Gleicher name bedeutet eine gemeinsame Auswahlgruppe; nur eine Option ist wählbar. checkbox: Einzelne Optionen können unabhängig voneinander angekreuzt werden. fieldset und legend benennen die Gruppe.
HTML nachschlagen · verstehen · anwenden · Seite 15/21
HTML-WEBWERKSTATT · NACHSCHLAGEWERK · SEITE 16/21
Weitere nützliche HTML-Elemente
Diese Elemente brauchst du nicht ständig, aber sie lösen häufige Probleme sehr elegant.
1 · Aufklappbare Zusatzinformationen
<details>
<summary>Was ist HTML?</summary>
<p>HTML beschreibt Inhalte und Struktur einer Webseite.</p>
</details>
So erscheint es im Browser (vereinfacht):
Was ist HTML?
HTML beschreibt Inhalte und Struktur einer Webseite.
Mit details und summary erhältst du einen aufklappbaren Bereich – ganz ohne JavaScript.
2 · Abkürzungen, Datum und Orientierung
<p><abbr title="HyperText Markup Language">HTML</abbr>
ist eine Auszeichnungssprache.</p>
<p>Termin: <time datetime="2026-11-03">3. November 2026</time></p>
<p>Wasser: H<sub>2</sub>O; Fläche: m<sup>2</sup>.</p>
abbr kennzeichnet eine Abkürzung. time kann ein Datum maschinenlesbar angeben. sub und sup setzen Zeichen tief bzw. hoch.
3 · Video, Audio und Quellen
<audio controls>
<source src="audio/interview.mp3" type="audio/mpeg">
Dein Browser unterstützt dieses Audio nicht.
</audio>
<video controls width="360">
<source src="videos/film.mp4" type="video/mp4">
Dein Browser unterstützt dieses Video nicht.
</video>
audio und video binden Medien ein. controls blendet Bedienelemente ein, source nennt die Mediendatei und ihren Typ. Auch hier müssen die relativen Pfade stimmen.
4 · Neutrale Container und Kommentare
<div>
<h2>Eine Gruppe</h2>
<p>Dieser Container besitzt keine eigene Bedeutung.</p>
</div>
<p>Ein <span lang="en">English term</span> im Satz.</p>
<!-- Dieser Kommentar erscheint nicht als Seitentext. -->
div ist ein neutraler Blockcontainer; span ein neutraler Inlinecontainer. Nutze zuerst sprechende Elemente wie nav oder section, wenn sie inhaltlich passen.
HTML nachschlagen · verstehen · anwenden · Seite 16/21
HTML-WEBWERKSTATT · NACHSCHLAGEWERK · SEITE 17/21
Ordner, Dateinamen und Pfadarten
Das Prinzip der Internet-WG gilt auch für reale Webseiten: Zimmer sind Ordner, Gegenstände sind Dateien.
Vom Wurzelpfad der Website im Browser, nicht vom Linux-System
Absolute Webadresse (URL)
https://www.example.org/bilder/logo.png
Vollständige Internetadresse mit Protokoll und Hostnamen
3 · Linux-Dateisystem und Webadresse nicht verwechseln
Auf dem Server /var/www/html/index.html kann der Dateispeicherort sein.
Im Browser https://schule.example.org/index.html kann auf diese Datei verweisen.
Wichtig:/bilder/logo.png ist im HTML eine URL relativ zur Website-Wurzel. Beim lokalen Öffnen mit file:// kann das schiefgehen. Im Schulprojekt sind Pfade wie bilder/logo.png oft einfacher.
4 · Gute Dateinamen
Verwende möglichst einfache Namen ohne Leerzeichen: meine-schule.html, klassenfoto.jpg. Bleibe bei Kleinbuchstaben, Zahlen, Bindestrichen und Unterstrichen. Auf vielen Servern sind Logo.png und logo.pngunterschiedliche Dateien.
HTML nachschlagen · verstehen · anwenden · Seite 17/21
HTML-WEBWERKSTATT · NACHSCHLAGEWERK · SEITE 18/21
Relative Wege wirklich verstehen
Stell dir vor, du stehst in einem Zimmer der WG und suchst einen anderen Raum oder eine Datei.
1 · So liest du Pfade
Zeichen / Beispiel
Bedeutung
.
Der aktuelle Ordner
..
Der übergeordnete Ordner – eine Ebene nach oben
../..
Zwei Ebenen nach oben
/
Trennzeichen zwischen Ordnernamen; am Anfang je nach Kontext System- oder Website-Wurzel
pwd # aktueller Ordner
ls # Inhalt auflisten
dir # Inhalt auflisten
cd markus # in den Ordner markus
cd bad # von Markus in den Unterordner bad
cd .. # eine Ebene zurück
cat brief.txt # Textdatei lesen
cp quelle.txt ziel.txt # Datei kopieren
mv quelle.txt ziel.txt # Datei verschieben
tree # Verzeichnisbaum anzeigen
pwd, cd, ls, dir, cp, mv, tree und cat lernst du in der simulierten WG. Im echten Terminal kann zusätzlich viel mehr passieren: Dort müssen Befehle sorgfältig geprüft werden.
HTML nachschlagen · verstehen · anwenden · Seite 18/21
HTML-WEBWERKSTATT · NACHSCHLAGEWERK · SEITE 19/21
Ein kleines Projekt mit drei HTML-Seiten
Diese Dateien liegen nebeneinander. Dadurch können alle drei Seiten mit einfachen relativen Links verbunden werden.
In FileZilla siehst du typischerweise links die lokale Seite (Schulrechner) und rechts die entfernte Seite (Webserver). Hochladen bedeutet: Dateien von links nach rechts übertragen.
2 · Schritt für Schritt zum Ergebnis
Projekt fertigstellen.index.html, weitere HTML-Dateien und der Ordner bilder müssen vollständig vorhanden sein.
FileZilla Client starten. Über den Servermanager eine Verbindung einrichten oder eine gespeicherte Schulverbindung wählen.
Sicheres Protokoll wählen. Nach Vorgabe der Lehrkraft vorzugsweise SFTP oder FTP über TLS (FTPS). Nicht unverschlüsseltes FTP verwenden.
Verbindungsdaten eintragen. Servername, Benutzername, Zugangsdaten und Port stammen von der Schule. Häufig SFTP-Port 22; es gilt die Vorgabe des Servers.
Serveridentität überprüfen. Den angezeigten Server-Schlüssel oder das Zertifikat vor dem Bestätigen mit den Vorgaben der Lehrkraft vergleichen.
Richtiges Ziel öffnen. Rechts das zugewiesene Webverzeichnis wählen. Es könnte public_html, www oder anders heißen.
Dateien übertragen. Links die Inhalte des Projektordners auswählen und nach rechts hochladen. Auch Unterordner und Bilder übertragen.
Übertragung kontrollieren. Die Liste „Fehlgeschlagene Übertragungen“ prüfen und eventuell erneut senden.
Im Browser testen. Die vorgegebene https://-Adresse öffnen; Links, Bilder und weitere HTML-Seiten testen.
Wichtig: Das gezeigte Webverzeichnis ist nur ein Beispiel. Eine zusätzliche Ordnerebene wie /public_html/mein-projekt/index.html kann dazu führen, dass die Startseite unter der erwarteten Adresse nicht erscheint.
HTML nachschlagen · verstehen · anwenden · Seite 20/21
HTML-WEBWERKSTATT · NACHSCHLAGEWERK · SEITE 21/21
Fehlersuche und Tag-Register
Die wichtigsten Kontrollen vor der Abgabe – und eine Übersicht zum schnellen Wiederfinden.
1 · Diese Fehlermeldungen begegnen dir oft
Problem
Ursache / Lösung
404 – nicht gefunden
Die Datei ist nicht an der angegebenen Adresse. href, Namen, Pfad und Zielordner prüfen.
Bild fehlt
src falsch oder Bild/Unterordner fehlt beim Upload. Dateiendung und Groß-/Kleinschreibung prüfen.
Seite zeigt HTML-Code
Datei evtl. falsch als .txt gespeichert oder falsch ausgeliefert.
Umlaute fehlerhaft
<meta charset="UTF-8"> und UTF-8-Dateikodierung prüfen.
Falscher Browsertitel
Inhalt von title im head korrigieren.
Startseite fehlt
index.html auf Server im falschen Ordner oder anders benannt.
Navigation im Kreis
Links auf jeder HTML-Seite prüfen; Rückweg zur index.html ergänzen.
FileZilla verbindet nicht
Protokoll, Server, Port, Konto und Schlüssel/Zertifikat mit Schulvorgaben prüfen.
2 · Kleine HTML-Tag-Übersicht
Grundbau / Struktur
Text / Medien
Listen / Daten / Eingabe
html head body meta title
h1–h6 p br hr strong em
ul ol li dl dt dd
header nav main section article
a img figure figcaption
table caption tr th td
aside footer div span
mark small q blockquote
form label input textarea
details summary time address
pre code kbd abbr
select option button fieldset
!DOCTYPE <!-- Kommentar -->
audio video source
legend thead tbody
3 · Kontrollliste vor der Abgabe
4 · Verlässliche Nachschlagequelle
Wenn du mehr wissen willst, bietet MDN Web Docs eine ausführliche HTML-Elementreferenz auf Deutsch: developer.mozilla.org/de/docs/Web/HTML/Reference/Elements.
Merksatz: HTML sagt was ein Inhalt bedeutet und wie die Seite gegliedert ist. Der Browser macht daraus die sichtbare Webseite.
HTML nachschlagen · verstehen · anwenden · Seite 21/21