Web Grundlagen · HTML Grundlagen

← Zurück zu Web Grundlagen

HTML ist das Grundgerüst jeder Webseite. Es beschreibt was auf einer Seite steht – nicht wie schön es aussieht und nicht wie es sich verhält.

Merke

HTML = Struktur, nicht Design

Farben, Abstände und Layout kommen später mit CSS. Interaktion kommt mit JavaScript. HTML ist die Basis für alles.

1) Das HTML-Grundgerüst

Jede HTML-Seite folgt grob demselben Aufbau. Auch wenn du ihn nicht auswendig lernst, solltest du ihn erkennen können:

HTML-Grundstruktur

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Meine Seite</title>
</head>
<body>

    <h1>Hallo Welt</h1>
    <p>Das ist ein Absatz.</p>

</body>
</html>

<!doctype html> → sagt dem Browser: modernes HTML
<html> → der komplette HTML-Inhalt
<head> → Infos über die Seite (nicht sichtbar)
<body> → sichtbarer Inhalt

Tipp

HTML immer eingerückt schreiben

Einrückungen machen sofort sichtbar, was zusammengehört. Das hilft enorm beim Lesen und Verstehen.

2) Tags: Überschriften, Absätze & Listen

HTML besteht aus Tags. Die häufigsten brauchst du schon ganz am Anfang:

Typische HTML-Tags

<h1>Überschrift</h1>
<p>Ein Absatz mit Text.</p>

<ul>
    <li>Punkt A</li>
    <li>Punkt B</li>
</ul>

<h1> bis <h6> → Überschriften
<p> → Absatz
<ul> / <li> → Liste

Achtung

Überschriften nicht für „großen Text“ missbrauchen

Überschriften sind für Struktur gedacht, nicht für Styling. Größe und Farbe regelt CSS.

3) Attribute: zusätzliche Informationen

Tags können Attribute haben. Sie liefern Zusatzinformationen zum Element.

Attribute

<a href="https://example.test">Link öffnen</a>

<img src="bild.jpg" alt="Beschreibung des Bildes">

href → Ziel eines Links
src → Quelle (z.B. Bild)
alt → Alternativtext (wichtig!)

Merke

Attribute stehen immer im öffnenden Tag

Attribute gehören nie zwischen den Text, sondern direkt in den Tag selbst.

Kleine Aufgaben (HTML)

Denk kurz nach – dann Lösung einblenden.

Aufgabe 1 anzeigen

Welche Tags erzeugen sichtbaren Inhalt?

Aufgabe

<head>
    <title>Titel</title>
</head>
<body>
    <p>Text</p>
</body>

Lösung einblenden

Lösung

Nur der Inhalt im <body>

Der Text im <body> ist sichtbar. Inhalte im <head> sind für den Browser gedacht.