Das Grundgerüst einer Seite

Jede HTML-Datei hat dasselbe Grundgerüst:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mein erster Seitentitel</title>
</head>
<body>
  <h1>Willkommen</h1>
  <p>Hier steht der sichtbare Inhalt.</p>
</body>
</html>

Tags, Elemente und Attribute

<a href="https://example.org" target="_blank">Link</a>

• <a> ist das Start-Tag, </a> das End-Tag
• Start-Tag + Inhalt + End-Tag zusammen sind ein Element
• href und target sind Attribute: Sie stehen im Start-Tag als name="wert"
• Manche Elemente haben keinen Inhalt und kein End-Tag (leere Elemente): <br>, <img>, <hr>, <input>, <meta>

Verschachtelung

Elemente stehen ineinander, nie überkreuz. Die richtige Reihenfolge schließt zuletzt geöffnete Tags zuerst:

Falsch wäre <strong><em>Text</strong></em>: Die Tags überkreuzen sich.

Kommentare

Leerraum und Zeilenumbrüche

HTML fasst beliebig viele Leerzeichen und Zeilenumbrüche zu einem Leerzeichen zusammen:

Für Abstände benutzt du später CSS, nicht Leerzeichen oder leere Absätze.

Groß- und Kleinschreibung, Anführungszeichen

• Tags und Attribute dürfen groß geschrieben werden, üblich ist klein
• Attributwerte setzt man immer in "doppelte Anführungszeichen"
• Dateinamen und Pfade sind auf vielen Servern case-sensitiv: Bild.JPG ≠ bild.jpg

Typische Fehler

• <!DOCTYPE html> vergessen (der Browser fällt in den "Quirks-Modus")
• Umlaute kaputt, weil charset fehlt oder die Datei nicht als UTF-8 gespeichert ist
• End-Tag vergessen, dann "fließt" die Formatierung in den Rest der Seite
• Mehrere <h1> oder falsche Reihenfolge der Überschriften