HTML & CSS Wissen

Diese Seite ist Ihre Anlaufstelle für alles rund um HTML und CSS. Ob Sie gerade erst anfangen oder als erfahrener Entwickler eine schnelle Referenz brauchen – hier finden Sie die wichtigsten HTML-Befehle, CSS-Grundlagen, nützliche Tools und die besten Lernressourcen im Überblick.

Nutzen Sie das Inhaltsverzeichnis oben, um direkt zum gewünschten Thema zu springen. Wenn Sie HTML von Grund auf lernen möchten, empfehlen wir Ihnen unser Schritt-für-Schritt-Tutorial.

HTML-Befehle Übersicht

Die folgende Tabelle zeigt die wichtigsten HTML-Tags, kategorisiert nach Verwendungszweck. Jedes HTML-Element besteht aus einem öffnenden Tag (z.B. <p>) und einem schließenden Tag (z.B. </p>).

Grundstruktur

Text & Überschriften

Links, Bilder & Medien

Listen & Tabellen

Formulare

Semantische Elemente (HTML5)

Wichtige HTML-Elemente erklärt

Links erstellen (<a>)

Der <a>-Tag (Anchor) erstellt Hyperlinks – die Grundlage des World Wide Web. Das wichtigste Attribut ist href (Hypertext Reference), das die Ziel-URL enthält.

<!-- Externer Link -->
<a href="https://example.com">Zur Website</a>

<!-- Link in neuem Tab öffnen -->
<a href="https://example.com" target="_blank" rel="noopener">Neuer Tab</a>

<!-- E-Mail-Link -->
<a href="mailto:info@example.com">E-Mail schreiben</a>

<!-- Anker-Link (Sprungmarke) -->
<a href="#abschnitt">Zum Abschnitt springen</a>

Bilder einbinden (<img>)

Mit dem <img>-Tag binden Sie Bilder ein. Das alt-Attribut ist Pflicht – es beschreibt das Bild für Screenreader und wird angezeigt, wenn das Bild nicht laden kann.

<img src="foto.jpg"
     alt="Beschreibung des Bildes"
     width="800"
     height="600">

Buttons (<button>)

Der <button>-Tag erstellt klickbare Schaltflächen. In Formularen nutzen Sie type="submit", für JavaScript-Aktionen type="button".

<!-- Formular absenden -->
<button type="submit">Absenden</button>

<!-- Aktion per JavaScript -->
<button type="button" onclick="alert('Klick!')">Klick mich</button>

HTML-Farben Referenz

In HTML und CSS können Farben auf verschiedene Arten definiert werden: als Farbname, Hex-Code oder RGB-Wert. Hier die 16 Standard-Webfarben:

/* Farbe als Name */
color: red;

/* Farbe als Hex-Code */
color: #FF0000;

/* Farbe als RGB */
color: rgb(255, 0, 0);

/* Farbe mit Transparenz (RGBA) */
color: rgba(255, 0, 0, 0.5);

CSS-Grundlagen und Referenz

CSS Flexbox erklärt

CSS Flexbox ist ein Layout-System für eindimensionale Anordnungen – entweder als Reihe oder als Spalte. Flexbox eignet sich perfekt für Navigationsleisten, Kartenreihen und das vertikale/horizontale Zentrieren von Elementen.

CSS Grid erklärt

CSS Grid ist ein Layout-System für zweidimensionale Anordnungen – Reihen und Spalten gleichzeitig. Grid eignet sich für komplexe Seitenlayouts, Bildergalerien und Dashboard-Designs.

Wichtige CSS-Befehle

HTML & CSS lernen – Die besten Ressourcen

Sie möchten HTML und CSS lernen? Diese kostenlosen Ressourcen bieten strukturierte Lernpfade für Einsteiger und Fortgeschrittene:

Nützliche Tools für Webentwickler

HTML-Validatoren

Ein HTML-Validator prüft Ihren Code auf Syntaxfehler, fehlende Pflichtattribute und ungültige Verschachtelungen. Validieren Sie Ihre Seiten regelmäßig – besonders vor dem Livegang.

Code-Editoren

Der richtige Editor macht den Unterschied. In unserem HTML-Editoren Vergleich finden Sie den passenden Editor, und auf unserer Download-Seite die besten kostenlosen Editoren.

Browser Developer Tools

Jeder moderne Browser hat integrierte Entwicklertools (F12 oder Rechtsklick → „Untersuchen"). Damit können Sie HTML und CSS live inspizieren und bearbeiten, JavaScript debuggen, die Netzwerkaktivität analysieren und die Performance messen.

Templates & Vorlagen

HTML-Templates geben Ihnen ein fertiges Grundgerüst. Kostenlose Vorlagen finden Sie bei HTML5 UP, Free CSS und Start Bootstrap.

Offizielle Dokumentationen