HTML — Struktur von Webseiten (neu)

Lernziele

Sie wissen, was HTML-Tags sind und können verschachtelte Tags erstellen.

Sie können fehlerhafte Verschachtelungen erkennen — z.B. <p><i>Text</p></i>.

Sie kennen die wichtigsten Tags für Inhalt, Listen, Bilder und Links.

Sie können einfache Formulare mit <input>, <select>, <textarea> und <button> aufbauen.

Am Anfang von Webseiten steht oft https://. Das steht für "Hypertext Transfer Protocol Secure". Da wird also ein Hyper-text übermittelt, was so viel bedeutet wie Übertext — also etwas, das mehr als nur reiner Text ist. Konkret handelt es sich um Text mit Formatierungen (fett, kursiv, etc.) und Extrafunktionen wie z.B. Hyperlinks, die man anklicken kann. (Stellen Sie sich mal schreibmaschinenschreibende Babyboomer vor, dann realisieren Sie, was das für eine Revolution war!)

HTML — die Sprache für Hypertext

HTML ist die mit Abstand verbreiteteste Variante von Hypertext. Die Buchstaben stehen für "Hypertext Markup Language". HTML gibt die Struktur und damit auch das rudimentäre Aussehen von Webseiten vor.

Achtung

HTML ist keine Programmiersprache, weil es keine Logik oder Funktionen beinhaltet, die Dinge berechnen oder Entscheidungen treffen können. Es ist eine Markup-Sprache, die dazu dient, Inhalt, Struktur und Format einer Webseite zu beschreiben.

HTML-Tags

HTML-Dokumente bestehen aus sogenannten Tags. Ein Tag ist eine Textmarke mit eckigen Klammern, die Inhalte auf bestimmte Weise kennzeichnet. Die meisten Tags werden paarweise verwendet: ein öffnender Tag <p> und ein schliessender Tag mit einem /-Slash </p> umschliessen den Inhalt.

Probieren Sie es gleich aus. Links sehen Sie den Editor, rechts wird die Webseite live gerendert. Ändern Sie den Code und beobachten Sie, was sich ändert.

Es gibt auch Tags, die keinen Textinhalt umschliessen müssen und deswegen kein schliessendes Tag brauchen — z.B. ein Bild mit <img> oder ein Zeilenumbruch <br>.

Übrigens... ein bisschen Detailwissen

In einigen verwandten Sprachen (XML, XHTML, JSX) schliesst man diese Tags direkt (<img />), in HTML würde der Slash einfach ignoriert.

Die Struktur eines HTML-Dokuments

Ein vollständiges HTML-Dokument hat eine klare Baumstruktur. So sieht das Grundgerüst aus:

In diesem Beispiel ist <html> das Wurzel-Element des Baums. Es hat zwei Kinder: <head> und <body>.

Tag	Beschreibung
`<!DOCTYPE html>`	Definiert den Dokumenttyp und die HTML-Version.
`<html>`	Wurzelelement eines HTML-Dokuments.
`<head>`	Enthält Metainformationen wie den Titel, Verweise auf Stylesheets, etc.
`<title>`	Titel des Dokuments, der in der Tab-Leiste des Browsers angezeigt wird.
`<body>`	Hauptinhalt des HTML-Dokuments.
`<h1>` bis `<h6>`	Überschriften. `<h1>` ist die höchste, `<h6>` die niedrigste Ebene.
`<p>`	Ein Absatz.

In Eduskript brauchen Sie das Grundgerüst nicht

Damit die Beispiele kurz bleiben, verzichten wir im Folgenden auf <!DOCTYPE html>, <html>, <head> und <body>. Der Editor ergänzt diese Teile automatisch im Hintergrund. Im echten Leben — wenn Sie eine .html-Datei selbst schreiben — gehören sie aber dazu.

Tags für Inhalt

Hier eine Übersicht der wichtigsten Tags für textuelle Inhalte. Die Tabelle ist als Nachschlagewerk gedacht — versuchen Sie nicht, sie auswendig zu lernen.

Tag	Beschreibung
`<h1>` bis `<h6>`	Überschriften.
`<p>`	Absatz.
`<br>`	Zeilenumbruch (selbstschliessend).
`<hr>`	Horizontale Trennlinie.
`<a href="url">`	Hyperlink.
`<img src="url">`	Bild.
`<ul>`	Ungeordnete (Aufzählungs-)Liste.
`<ol>`	Geordnete (nummerierte) Liste.
`<li>`	Einzelnes Element einer Liste.
`<div>`	Block-Abschnitt — wird oft genutzt, um Boxen zu gruppieren.
`<span>`	Inline-Abschnitt — wird oft genutzt, um einen Teil eines Texts hervorzuheben.
`<table>`, `<tr>`, `<td>`, `<th>`	Tabellen, Zeilen, Zellen, Überschriftszellen.
`<iframe src="url">`	Bettet eine andere Webseite ein, z.B. ein YouTube-Video.

Jetzt sind Sie dran!

Bauen Sie im Editor unten Ihre erste eigene kleine Webseite. Sie soll mindestens enthalten:

drei Überschriften (z.B. <h1>, <h2>, <h2>)

fünf Paragraphen

ein Bild

eine Liste (<ul> oder <ol> mit mehreren <li>)

einen Hyperlink

Attribute in HTML-Tags

Tags können zusätzliche Informationen in Form von Attributen enthalten. Attribute erscheinen immer im Start-Tag, und ihre Werte sind in Anführungszeichen eingeschlossen.

Häufig verwendete Attribute:

src="..." — Quelle eines eingebetteten Inhalts (Bild, Skript, iframe).
href="..." — Ziel eines Links.
alt="..." — Alternativtext für Bilder. Wichtig für Barrierefreiheit.
class="..." — Eine oder mehrere Klassen, an die sich CSS oder JavaScript "anhängen" können.
id="..." — Eine eindeutige ID des Elements.
style="..." — Inline-CSS direkt am Element.

In den nächsten Lektionen werden Sie speziell class und id häufig brauchen.

Verschachtelung — wo Tags Fehler machen

Tags werden hierarchisch verschachtelt. Wichtig: Wenn Sie ein Tag öffnen, müssen Sie es schliessen, bevor Sie ein darüberstehendes schliessen. Das ist wie bei mathematischen Klammern.

✅ Korrekt:   <p>Ein Text mit <i>kursivem Wort</i> drin.</p>
❌ Falsch:    <p>Ein Text mit <i>kursivem Wort</p></i>

Browser sind tolerant und reparieren solche Fehler oft im Hintergrund. Aber das führt zu unerwartetem Verhalten und Sie sollten sich angewöhnen, Tags sauber zu schliessen.

Sie sind dran!

Im folgenden Beispiel sind drei Verschachtelungsfehler. Finden und korrigieren Sie sie.

Lösung
<h1>Meine fehlerhafte Seite</h1>

<p>Dies ist ein <strong>wichtiger Absatz</strong> mit Inhalt.</p>

<ul>
  <li>Erstes Element</li>
  <li>Zweites Element</li>
</ul>
Die drei Fehler waren:

<h1> mit </h2> geschlossen.

</p> und </strong> in falscher Reihenfolge.

Das erste <li> wurde nie geschlossen.

Formulare — Daten von Nutzern annehmen

Bisher waren unsere Webseiten reine "Anzeigen". Mit Formular-Tags können Webseiten auch Eingaben von Nutzer:innen entgegennehmen. Das ist die Grundlage für alle interaktiven Webseiten — von der Login-Maske bis zum Online-Shop.

Die wichtigsten Tags:

Tag	Was es macht
`<input type="text">`	Einzeiliges Textfeld
`<input type="number">`	Zahleneingabe
`<input type="checkbox">`	Häkchen zum An- und Abklicken
`<input type="radio" name="gruppe">`	Auswahl aus mehreren Optionen (gleiches `name`)
`<input type="range" min="0" max="100">`	Schieberegler
`<input type="color">`	Farbwähler
`<textarea>`	Mehrzeiliges Textfeld
`<select>` mit `<option>`	Dropdown-Menü
`<button>`	Klick-Knopf
`<label>`	Beschriftung für ein Eingabefeld

Beispiel:

Sie sehen: Diese Formulare sind aktuell noch "Attrappen" — sie nehmen Eingaben entgegen, aber es passiert nichts mit den Daten. Damit etwas passiert, brauchen wir JavaScript. Das schauen wir uns in einer späteren Lektion an.

Jetzt sind Sie dran!

Bauen Sie ein Formular für eine Pizzabestellung. Es soll enthalten:

ein Textfeld für den Namen

ein Dropdown für die Pizzasorte (mindestens vier Optionen)

drei Checkboxen für Extras (z.B. extra Käse, scharf, ohne Zwiebeln)

ein Zahlenfeld für die Anzahl

einen Bestellknopf

Aussicht: HTML, CSS und JavaScript zusammen

Eine moderne Webseite besteht selten aus reinem HTML. Meist arbeiten drei Sprachen zusammen:

HTML — die Struktur (Was steht da?)
CSS — das Aussehen (Wie sieht es aus?)
JavaScript — das Verhalten (Was passiert, wenn ich klicke?)

Hier ein Vorgeschmack:

In der nächsten Lektion schauen wir uns CSS genauer an.