HTML & Webseiten
- Wie lässt sich „HTML und Webseiten“ mit einem Modell erklären?
- Ist die Bedeutung auch ohne Farbe, Maus und großes Display verständlich?
- Wie kann ich meine Lösung testen und verständlich dokumentieren?
Themen in diesem Bereich
HTML
Hypertext Markup Language, oder kurz HTML, wird dazu verwendet Inhalte auf Webseiten darzustellen. HTML dient dazu, die Webseiten zu strukturieren. Für das Design werden meistens andere Sprachen wie CSS verwendet. Die aktuelle Version ist HTML5.
Grundstruktur von HTML
HTML verwendet Tags. Das bedeutet, dass die Befehle immer nach dem gleichen Schema aufgebaut sind:
\(\text{
\(\text{}\)
Anhand des DOCTYPE erkennt der Browser, um welchen Typ von Dokument es sich handelt. Ohne DOCTYPE kann es zu Fehlern kommen.
\(\color{#cc0000}{\text{}}\) Hier beginnt das HTML Dokument.
\(\qquad \color{#006400}{\text{
}}\) Hier beginnt der Kopfbereich (head).Der Browser erhält Metadaten, also Informationen, über den Inhalt der
Webseite.
\(\qquad \qquad \color{#660099}{\text{
\(\qquad \color{#006400}{\text{}}\) Hier endet der Kopfbereich.
\(\qquad \color{#ff6600}{\text{
}}\) Im Körper (body) des HTML Dokuments ist der eigentliche Inhalt der Seitesowie die HTML-Tags.
\(\qquad \qquad \color{#009999}{\text{
}}\) HTML-Tag für einen Textabsatz.
\(\qquad \qquad \qquad \text{Inhalt der Webseite}\)
\(\qquad \qquad \color{#009999}{\text{
}}\) Hier endet der Textabsatz.\(\qquad \color{#ff6600}{\text{}}\) Hier endet der Körper.
\(\color{#cc0000}{\text{}}\) Hier endet das HTML Dokument.
Häufig verwendete Tags
Übungen
Schreibe eine Webseite mit mindestens einem Titel, einer Überschrift, einem Link und einem Bild.
Erklärung von Serlo Education e. V., lizenziert unter CC BY-SA 4.0 – Original bei Serlo, CC BY-SA 4.0, übernommen am 2026-09-03.
Schlau Fassung
HTML und Webseiten HTML beschreibt Bedeutung und Struktur von Webinhalten. CSS gestaltet die Darstellung; Browser erzeugen aus Dateien ein zugängliches Dokument.
HTML und Webseiten ist in der Informatik kein isolierter Merksatz. Entscheidend ist, welche Daten oder Zustände am Anfang vorliegen, nach welcher Regel sie verarbeitet werden und wie sich das Ergebnis überprüfen lässt. Eine Überschrift wird als h1 ausgezeichnet und nicht nur optisch groß gemacht, damit Suchmaschine und Screenreader ihre Bedeutung erkennen.
Beim Bearbeiten trennst du deshalb Beobachtung und Vermutung: Zuerst beschreibst du, was tatsächlich eingegeben, gespeichert, übertragen oder ausgegeben wird. Danach begründest du mit Fachbegriffen, warum der Ablauf so funktioniert.
Drei Bausteine, die du sicher können musst
Elemente beschreiben Bedeutung statt nur Aussehen.
Mehrere CSS-Regeln werden nach festen Vorrangregeln kombiniert.
Inhalte bleiben mit verschiedenen Fähigkeiten und Geräten nutzbar.
Ausgearbeitetes Beispiel
Ausgangslage: Eine Überschrift wird als h1 ausgezeichnet und nicht nur optisch groß gemacht, damit Suchmaschine und Screenreader ihre Bedeutung erkennen.
- Modell festlegen: Benenne Eingaben, gespeicherte Werte und die gewünschte Ausgabe.
- Regel anwenden: Formuliere die Verarbeitung so genau, dass eine andere Person jeden Schritt wiederholen kann.
- Ergebnis prüfen: Vergleiche die beobachtete Wirkung mit einer vorher notierten Erwartung und untersuche mindestens einen Randfall.
Begründung: HTML beschreibt Bedeutung und Struktur von Webinhalten. CSS gestaltet die Darstellung; Browser erzeugen aus Dateien ein zugängliches Dokument. Dadurch wird nicht nur das Ergebnis, sondern auch sein Zustandekommen nachvollziehbar.
So gehst du informatisch vor
Fachbegriffe in eigenen Worten
- Semantik
- Elemente beschreiben Bedeutung statt nur Aussehen.
- Kaskade
- Mehrere CSS-Regeln werden nach festen Vorrangregeln kombiniert.
- Barrierefreiheit
- Inhalte bleiben mit verschiedenen Fähigkeiten und Geräten nutzbar.
Aufgaben
- StartBegriffe sichern: Erkläre „HTML und Webseiten“ in mindestens vier Sätzen und verwende zwei Begriffe aus dem Glossar.
Musterlösung
HTML beschreibt Bedeutung und Struktur von Webinhalten. CSS gestaltet die Darstellung; Browser erzeugen aus Dateien ein zugängliches Dokument. Eine Überschrift wird als h1 ausgezeichnet und nicht nur optisch groß gemacht, damit Suchmaschine und Screenreader ihre Bedeutung erkennen. Eine vollständige Antwort benennt zusätzlich Eingabe oder Ausgangszustand, Verarbeitung und überprüfbares Ergebnis. - OrdnenModell bilden: Zerlege das Beispiel der Seite in Ausgangslage, Regel, Ergebnis und Test.
Musterlösung
Ausgangslage: die im Beispiel genannten Daten oder Geräte. Regel: der beschriebene Verarbeitungsschritt. Ergebnis: die sichtbare Wirkung. Test: ein normaler Fall und ein bewusst veränderter Randfall. - AnwendenSelbst lösen: Entwirf die semantische Struktur einer Projektseite mit Navigation, Hauptinhalt, zwei Abschnitten und Fußbereich.
Musterlösung
Eine mögliche Struktur nutzt header und nav, genau ein main, darin section oder article und am Ende footer; Überschriften bilden eine nachvollziehbare Hierarchie. - FehlersucheDiagnose: Verändere im Beispiel genau eine Voraussetzung. Sage vorher, welche Wirkung du erwartest, und begründe sie.
Lösungshinweis
Eine gute Lösung benennt die veränderte Voraussetzung, den betroffenen Verarbeitungsschritt und eine beobachtbare Ausgabe. Mehrere Dinge gleichzeitig zu ändern erlaubt keine eindeutige Ursache. - TransferNeuer Zusammenhang: Finde ein zweites Beispiel aus Schule oder Alltag und erkläre Gemeinsamkeit sowie Unterschied.
Lösungshinweis
Nutze dieselben Fachbegriffe, aber übertrage sie auf andere Daten, Geräte oder Regeln. Der Unterschied muss fachlich relevant sein und darf nicht nur den Namen betreffen. - ProfiVertiefung: Prüfe eine Seite nur mit Tastatur und 200 Prozent Zoom und protokolliere drei Beobachtungen.
Lösungshinweis
Fokus muss sichtbar bleiben, Inhalte dürfen nicht abgeschnitten werden und die Bedienreihenfolge muss der Lesereihenfolge folgen.
Weiterführende Aufgaben
Abgabe in fünf Teilen
- Ziel: Ein Satz, der messbar sagt, was funktionieren soll.
- Plan: Skizze, Ablaufplan, Tabelle oder Pseudocode.
- Produkt: Programm, Modell, Untersuchung oder dokumentierter Versuch.
- Tests: Normalfall, Randfall und mindestens ein absichtlich provozierter Fehler.
- Reflexion: Gefundener Fehler, vorgenommene Verbesserung und nächster sinnvoller Schritt.
Bewertungsraster für Partnerfeedback
- Fachlich richtig und mit passenden Begriffen erklärt
- Plan und Ergebnis stimmen sichtbar überein
- Tests sind reproduzierbar dokumentiert
- Quellen, Bilder und fremde Hilfen sind angegeben