Was ist HTML?

HTML ist die Grundlage jeder Webseite. Egal ob du Google, YouTube oder deinen Lieblings-Blog oeffnest — alles, was du im Browser siehst, basiert auf HTML. Es ist die Sprache, mit der du dem Browser sagst, was auf einer Seite angezeigt werden soll.

Die Geschichte in 30 Sekunden

HTML steht fuer HyperText Markup Language und wurde 1991 von Tim Berners-Lee am CERN erfunden. Die Idee war simpel: Wissenschaftler sollten Dokumente ueber das Internet verlinken und teilen koennen.

Heute ist HTML:

Der Standard fuer alle Webseiten weltweit
In der Version HTML5 angekommen (seit 2014 offiziell)
Die Basis fuer Milliarden von Webseiten
Zusammen mit CSS und JavaScript eine der drei Kerntechnologien des Webs

Was genau macht HTML?

HTML ist eine Auszeichnungssprache (Markup Language) — keine Programmiersprache. Das bedeutet: Du programmierst keine Logik, sondern beschreibst die Struktur von Inhalten.

Die Analogie: Ein Haus bauen

Stell dir eine Webseite wie ein Haus vor:

HTML  = Die Mauern, Raeume und Struktur (Was gibt es?)
CSS   = Die Farbe, Moebel und Dekoration (Wie sieht es aus?)
JS    = Elektrik, Wasser, smarte Geraete (Was passiert?)

Ohne HTML gibt es keine Webseite — genauso wie es ohne Mauern kein Haus gibt.

HTML-Tags: Die Bausteine

HTML besteht aus Tags — das sind spezielle Markierungen, die dem Browser sagen, was ein Element ist.

Aufbau eines Tags

<tagname>Inhalt hier</tagname>

Ein Tag besteht aus:

Oeffnendes Tag: <tagname>
Inhalt: Der Text oder andere Elemente dazwischen
Schliessendes Tag: </tagname> (mit Schraegstrich)

Dein allererstes HTML

<h1>Hallo Welt!</h1>
<p>Das ist mein erster Absatz in HTML.</p>

Das erzeugt eine grosse Ueberschrift und einen Textabsatz. So einfach ist der Einstieg!

Wichtige Grundregeln

Regel	Richtig	Falsch
Tags schliessen	`<p>Text</p>`	`<p>Text`
Richtige Verschachtelung	`<b><i>Text</i></b>`	`<b><i>Text</b></i>`
Kleinschreibung	`<div>`	`<DIV>`
Attribute in Anfuehrungszeichen	`href="url"`	`href=url`

Die wichtigsten HTML-Tags im Ueberblick

Hier sind die Tags, die du am haeufigsten verwenden wirst:

Ueberschriften

<h1>Hauptueberschrift (nur einmal pro Seite)</h1>
<h2>Unterueberschrift</h2>
<h3>Kleinere Ueberschrift</h3>
<h4>Noch kleinere Ueberschrift</h4>
<h5>Kleine Ueberschrift</h5>
<h6>Kleinste Ueberschrift</h6>

Text und Formatierung

<p>Ein normaler Textabsatz.</p>
<strong>Fetter, wichtiger Text</strong>
<em>Kursiver, betonter Text</em>
<br> <!-- Zeilenumbruch -->
<hr> <!-- Horizontale Linie -->

Links und Bilder

<a href="https://example.com">Ein Link</a>
<img src="foto.jpg" alt="Beschreibung des Bildes">

Container

<div>Ein Block-Container (nimmt die volle Breite ein)</div>
<span>Ein Inline-Container (nur so breit wie der Inhalt)</span>

Selbstschliessende Tags

Einige Tags haben keinen Inhalt und brauchen daher kein schliessendes Tag:

<img src="bild.jpg" alt="Beschreibung">
<br>
<hr>
<input type="text">
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">

Diese nennt man Void-Elemente oder selbstschliessende Tags.

Attribute: Tags konfigurieren

Tags koennen Attribute haben, die zusaetzliche Informationen liefern:

<!-- href ist ein Attribut von <a> -->
<a href="https://example.com" target="_blank">Link in neuem Tab</a>

<!-- src und alt sind Attribute von <img> -->
<img src="katze.jpg" alt="Eine suesse Katze" width="300">

<!-- id und class sind universelle Attribute -->
<div id="header" class="container">
    <p>Inhalt hier</p>
</div>

Haeufig verwendete Attribute

Attribut	Verwendung	Beispiel
`id`	Eindeutige Kennung	`<div id="menu">`
`class`	CSS-Klasse(n)	`<p class="highlight">`
`href`	Link-Ziel	`<a href="seite.html">`
`src`	Quelldatei	`<img src="bild.jpg">`
`alt`	Alternativtext	`<img alt="Beschreibung">`
`style`	Inline-CSS	`<p style="color: red;">`

HTML im Browser ausprobieren

Du kannst HTML sofort ausprobieren — ohne etwas zu installieren! Erstelle einfach eine Textdatei mit der Endung .html:

Schritt 1: Datei erstellen

Oeffne einen beliebigen Texteditor (Notepad, VS Code, etc.) und schreibe:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Mein erster Test</title>
</head>
<body>
    <h1>Hallo Welt!</h1>
    <p>Ich lerne gerade HTML. Das ist <strong>fantastisch</strong>!</p>
    <a href="https://www.google.com">Zu Google</a>
</body>
</html>

Schritt 2: Im Browser oeffnen

Speichere die Datei als index.html und oeffne sie mit einem Doppelklick im Browser. Du siehst deine erste Webseite!

Warum sollte ich HTML lernen?

HTML zu lernen ist der erste Schritt in die Webentwicklung. Hier sind die wichtigsten Gruende:

Grundlage fuer alles: Jede Web-Technologie baut auf HTML auf
Einfacher Einstieg: HTML ist logisch und schnell erlernbar
Sofortige Ergebnisse: Du siehst dein Ergebnis direkt im Browser
Gefragte Faehigkeit: Webentwickler sind auf dem Arbeitsmarkt sehr gefragt
Kreative Freiheit: Baue deine eigenen Webseiten und Projekte

Uebungen

Uebung 1: Erste Tags ausprobieren

Erstelle eine HTML-Datei und fuege folgende Elemente ein:

Eine Ueberschrift mit <h1>
Zwei Absaetze mit <p>
Einen Link mit <a> zu deiner Lieblingswebseite
Ein fett gedrucktes Wort mit <strong>

Uebung 2: Tag-Quiz

Welcher Tag ist richtig? Beantworte ohne nachzuschauen:

Wie erstellt man einen Absatz?
Wie macht man Text fett?
Wie fuegt man ein Bild ein?
Wie erstellt man einen Link?

Was kommt als Naechstes?

Im naechsten Kapitel wirst du deine erste vollstaendige Webseite erstellen. Du lernst:

Die komplette HTML-Grundstruktur
Wie <head> und <body> zusammenarbeiten
Wie du deine Seite richtig aufbaust

Zusammenfassung

HTML steht fuer HyperText Markup Language und beschreibt die Struktur von Webseiten
HTML verwendet Tags wie <h1>, <p> und <a>, um Inhalte zu markieren
Tags koennen Attribute haben, die zusaetzliche Informationen liefern
HTML ist keine Programmiersprache, sondern eine Auszeichnungssprache
Jede Webseite im Internet basiert auf HTML

Pro-Tipp: Nutze die Entwicklertools deines Browsers (F12), um den HTML-Code jeder Webseite anzuschauen. Klicke mit der rechten Maustaste auf ein beliebiges Element und waehle “Element untersuchen”. So lernst du von den Profis!