HTML-Kurs / HTML-Syntax: Tags, Attribute und Verschachtelung

Die HTML-Syntax legt fest, wie Elemente, Tags, Attribute, Text und Kommentare in einem HTML-Dokument geschrieben werden. Die meisten Elemente verwenden ein Anfangstag und ein Endtag, die Attribute befinden sich im Anfangstag, und verschachtelte Elemente müssen in der umgekehrten Reihenfolge geschlossen werden, in der sie geöffnet wurden.

Grundsyntax der HTML-Elemente und -Tags

Ein HTML-Element wird normalerweise mit einem Start-Tag, einem Inhalt und einem End-Tag geschrieben.

<tagname>Inhalt</tagname>

• <tagname> ist das Start-Tag, das den Punkt markiert, an dem das Element beginnt.
• Inhalt ist der Text oder anderer Inhalt, der vom Element enthalten wird.
• </tagname> ist das End-Tag, das den Punkt markiert, an dem das Element endet.

Der folgende Code erstellt ein p-Element. Das Start-Tag ist <p>, der Inhalt ist HTML-Syntax und das End-Tag ist </p>.

<p>HTML-Syntax</p>

Die Tag-Namen in der HTML-Syntax sind ASCII-case-insensitiv. Allerdings ist die Verwendung von Kleinbuchstaben die übliche Konvention, da sie das Markup konsistent und leicht lesbar macht.

Leere Elemente haben keine End-Tags

Nicht alle HTML-Elemente verwenden ein End-Tag. Ein leeres Element kann keinen Inhalt enthalten und darf kein End-Tag haben.

<br>

<img src="image.webp" alt="Sonnenaufgang über einem blauen Ozean">

<input type="text" name="username">

<meta charset="utf-8">

br, img, input und meta sind gängige leere Elemente. Schreiben Sie keine nicht existierenden End-Tags wie </br> oder </img>.

Ein abschließender Schrägstrich, wie in <br />, ist in einem HTML-Start-Tag für ein leeres Element erlaubt, hat aber keine Auto-Schließfunktion in HTML und ist unnötig.

Wie man HTML-Attribute schreibt

Attribute konfigurieren ein Element oder liefern zusätzliche Informationen. Sie werden innerhalb des Start-Tags geschrieben, wobei der Attributname und sein Wert durch ein Gleichheitszeichen getrennt sind (=). Für eine praktische Verwendung von Attributen vergleichen Sie die Attribute for, id und name in Label korrekt mit input verbinden.

<tagname attribute="value">Inhalt</tagname>

Zum Beispiel gibt dieser Code einem Element blockquote ein Attribut id mit dem Wert quote-01.

<blockquote id="quote-01">

  Zitierter Text

</blockquote>

HTML unterstützt Attributwerte in doppelten Anführungszeichen, einfachen Anführungszeichen und — in eingeschränkten Fällen — auch ohne Anführungszeichen. Die konsequente Verwendung von doppelten Anführungszeichen ist eine praktische Konvention, da Leerzeichen und mehrere Sonderzeichen in nicht zitierten Werten nicht erlaubt sind.

<p style="color: red;">Roter Text</p>

Im folgenden falschen Beispiel beendet das Leerzeichen den nicht zitierten Wert style nach color:. Der Browser interpretiert das Attribut daher nicht wie beabsichtigt.

<p style=color: red;>Roter Text</p>

Boolesche Attribute wie disabled, checked und required sind wahr, wenn sie vorhanden sind. Sie können geschrieben werden, indem nur der Attributname verwendet wird.

<input type="text" disabled>

Verschachtelte Elemente in der richtigen Reihenfolge schließen

Wenn ein Element innerhalb eines anderen platziert wird, schließen Sie das innere Element, bevor Sie das äußere Element schließen. Das folgende Markup ist korrekt verschachtelt, da das Element strong vollständig im Element p enthalten ist.

<p>Dieser Satz enthält <strong>wichtigen Text</strong>.</p>

Das folgende Beispiel ist falsch verschachtelt, da die Bereiche der beiden Elemente sich überlappen.

<p>Dieser Satz enthält <strong>wichtigen Text</p></strong>

Ein Browser kann fehlerhaftes Markup beim Parsen korrigieren, aber das resultierende Document Object Model (DOM, Dokumentobjektmodell) kann von der Struktur abweichen, die Sie erwartet haben. Verlassen Sie sich nicht auf die Fehlerbehebung des Browsers als Ersatz für gültiges Markup.

Wie man HTML-Kommentare schreibt

Ein HTML-Kommentar beginnt mit <!-- und endet mit -->. Kommentare werden nicht als Seiteninhalt angezeigt, sie können also den Zweck des Markups dokumentieren oder eine temporäre Anmerkung für Entwickler hinterlassen.

<!-- Dieser Kommentar wird auf der Seite nicht angezeigt. -->

Ein Kommentar kann sich über mehrere Zeilen erstrecken.

<!--

  Dies ist ein mehrzeiliger HTML-Kommentar.

-->

Verschachteln Sie keinen HTML-Kommentar innerhalb eines anderen. Verschachtelte Kommentarbegrenzungen können dazu führen, dass der Kommentar an einer anderen Stelle beendet wird, als Sie erwarten.

<!--

  &lt;!-- Keine Kommentare verschachteln. -->

-->

Grundstruktur eines HTML-Dokuments

Das folgende Beispiel zeigt eine minimale und praktische Struktur für ein HTML-Dokument auf Deutsch. Üben Sie, Fehler in Fehler finden und HTML-Dokumente validieren zu finden und erneut zu überprüfen.

<!doctype html>

<html lang="de-DE">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Dokumenttitel</title>

  </head>

  <body>

    <h1>Seitentitel</h1>

    <p>Der Seiteninhalt befindet sich hier.</p>

  </body>

</html>

• <!doctype html> wählt den standardorientierten Darstellungsmodus aus, der für moderne HTML-Dokumente verwendet wird.
• <html lang="de-DE"> ist das Dokumentelement, und lang="de-DE" kennzeichnet Deutsch als Hauptsprache.
• <head> enthält die Metadaten des Dokuments wie Zeichencodierung, Viewport-Einstellungen und den Dokumenttitel.
• <body> enthält die Überschriften, Absätze, Bilder, Links und andere Inhalte, die auf der Seite dargestellt werden.

Wie man die HTML-Syntax überprüft

Browser versuchen, ein Dokument anzuzeigen, selbst wenn dessen Markup Fehler enthält. Dass eine Seite auf dem Bildschirm erscheint, beweist daher nicht, dass ihre Syntax korrekt ist. Überprüfen Sie die Verschachtelung und die Attribute und verwenden Sie den Nu Html Checker, um Markup-Fehler und Warnungen zu identifizieren.

Für genaue Regeln zu Tags, Attributen, leeren Elementen und Kommentaren, siehe den Abschnitt über die HTML-Syntax der lebenden WHATWG-Norm.

Boolesche Attribute und Literalzeichen

Ein boolesches Attribut wird durch seine Anwesenheit bestimmt und nicht durch eine Zeichenkette wie "false". checked="false" ist immer vorhanden, daher ist es standardmäßig ausgewählt, und "false" ist kein gültiger Wert für ein boolesches Attribut. Entfernen Sie checked, um es standardmäßig nicht ausgewählt zu starten. Behandeln Sie boolesche Attribute nicht wie normale Attribute mit Zeichenkettenwert.

<label><input type="checkbox" name="news" value="yes" checked> Nachrichten</label>
<label><input type="checkbox" name="updates" value="yes"> Updates</label>

Nur die erste Steuerung sollte standardmäßig ausgewählt sein. Um das literal dargestellte Element <p> anzuzeigen, schreiben Sie seine Klammern als < und >. Verwenden Sie & für ein literal dargestelltes kaufmännisches Und, wenn ein Escape erforderlich ist. Unterscheiden Sie den als Text angezeigten Code vom Markup, das ein Element erstellt.

<p>&lt;p&gt; ist ein Absatz-Element. A &amp; B sind zwei Namen.</p>

Dieses Beispiel zeigt spitze Klammern und ein kaufmännisches Und-Zeichen statt einen verschachtelten Absatz zu erstellen. Siehe die HTML-Regeln für boolesche Attribute .

HTML-Syntax-Checkliste

• <!doctype html> am Anfang eines vollständigen HTML-Dokuments einfügen.
• Konsistent Kleinbuchstaben für Tag- und Attributnamen verwenden.
• Attributwerte in Anführungszeichen setzen, vorzugsweise doppelte Anführungszeichen zur Konsistenz.
• End-Tags für leere Elemente nicht hinzufügen.
• Verschachtelte Elemente von innen nach außen schließen.
• Verwenden Sie lang, um die Sprache des Dokuments zu identifizieren.
• Fügen Sie keine vertraulichen Daten in Kommentare und Quellcode der Seite ein.
• Validieren Sie das endgültige Dokument, anstatt sich nur auf sein visuelles Erscheinungsbild zu verlassen.