DevPanicZone Logo DevPanicZone! Cheatsheets.

HTML Grundlagen

HTML ist das Fundament jeder Webseite. Lerne die Basics - von Tags über Attribute bis zu den wichtigsten Elementen.

Was ist HTML?

HTML steht für HyperText Markup Language und ist die Grundsprache des Webs. Mit HTML strukturierst du Inhalte - Texte, Bilder, Links - und sagst dem Browser, was auf einer Seite angezeigt werden soll.

HTML ist...
  • Eine Auszeichnungssprache (keine Programmiersprache)
  • Das Skelett jeder Webseite
  • Verantwortlich für Struktur, nicht für Design
Die Arbeitsteilung
  • HTML → Struktur & Inhalt
  • CSS → Design & Layout
  • JavaScript → Interaktivität

Die Tag-Syntax verstehen

HTML besteht aus Tags - das sind Anweisungen in spitzen Klammern, die dem Browser sagen, wie er Inhalte behandeln soll.

Öffnende und schließende Tags

Die meisten HTML-Elemente haben ein öffnendes und ein schließendes Tag:

HTML 
<tagname>Inhalt</tagname>

<!-- Beispiele -->
<p>Das ist ein Absatz.</p>
<h1>Das ist eine Überschrift.</h1>
<strong>Das ist fett.</strong>
Symbol Bedeutung
< > Spitze Klammern umschließen den Tag-Namen
</> Schrägstrich markiert das End-Tag

Selbstschließende Tags

Einige Elemente haben keinen Inhalt und brauchen kein End-Tag:

HTML 
<img src="bild.jpg" alt="Beschreibung">
<br>
<hr>
<input type="text">
<meta charset="UTF-8">
Merke

In HTML5 ist der Schrägstrich bei selbstschließenden Tags optional: <br> und <br /> sind beide korrekt.

HTML-Attribute

Attribute geben Elementen zusätzliche Informationen. Sie stehen immer im öffnenden Tag:

HTML 
<tag attribut="wert">Inhalt</tag>

<!-- Beispiele -->
<a href="https://example.com">Ein Link</a>
<img src="foto.jpg" alt="Mein Foto" width="300">
<p class="highlight" id="intro">Einleitung</p>

Die wichtigsten Attribute

Attribut Verwendung Beispiel
href Link-Ziel bei <a> href="seite.html"
src Quelle für Bilder, Videos, Scripts src="logo.png"
alt Alternativtext für Bilder (Pflicht!) alt="Firmenlogo"
class CSS-Klasse zuweisen class="button"
id Eindeutige ID (nur einmal pro Seite!) id="header"

Die Top 15 HTML-Tags

Mit diesen 15 Tags kannst du bereits 80% aller Webseiten verstehen und selbst bauen:

<html> - Root-Element
<head> - Metadaten
<body> - Sichtbarer Inhalt
<h1>-<h6> - Überschriften
<p> - Absatz
<a> - Link
<div> - Block-Container
<span> - Inline-Container
<img> - Bild
<ul> - Ungeordnete Liste
<ol> - Nummerierte Liste
<li> - Listenpunkt
<strong> - Wichtig (fett)
<em> - Betont (kursiv)
<br> - Zeilenumbruch
Tipp

Lerne diese 15 Tags auswendig - sie sind dein Grundwortschatz für HTML!

Richtig verschachteln

HTML-Elemente können ineinander verschachtelt werden. Dabei gilt: Was zuerst geöffnet wird, muss zuletzt geschlossen werden - wie bei Klammern.

Richtig 
<p>Text mit <strong>Betonung</strong></p>

<ul>
    <li>Erster Punkt</li>
    <li>Zweiter Punkt</li>
</ul>
Falsch 
<p>Text mit <strong>Betonung</p></strong>

<ul>
    <li>Punkt</ul>
</li>
Wichtig

Browser korrigieren fehlerhafte Verschachtelung oft automatisch - aber nicht immer richtig! Validiere deinen Code mit dem W3C Validator.

Best Practices

Gutes HTML ist sauber, logisch und wartbar. Hier die wichtigsten Regeln:

  • Semantische Tags nutzen: <header>, <nav>, <main> statt nur <div>
  • Einheitlich einrücken: Macht den Code lesbar
  • Tags klein schreiben: <p> statt <P>
  • Alt-Texte bei Bildern: Für Barrierefreiheit und SEO
  • Code validieren: Fehler früh finden
Warum das wichtig ist
  • SEO: Suchmaschinen bevorzugen strukturiertes HTML
  • Barrierefreiheit: Screenreader brauchen semantisches HTML
  • Wartbarkeit: Du verstehst deinen Code auch in 6 Monaten noch

Weiterlernen

Du kennst jetzt die Basics! In den folgenden Tutorials lernst du jedes Thema im Detail:

Struktur & Aufbau

Inhalte & Elemente

Mehr aus HTML

Tutorials werden geladen...