MB Dev .tech
Registrieren Login

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.