HTML-Kommentar: So geht das Auskommentieren im HTML-Code

Das Hinzufügen von Kommentaren in HTML kann Ihnen beim Schreiben und Organisieren des Backends Ihrer Website helfen. Das Auskommentieren im HTML-Code ist so nützlich, dass die Verwendung von Kommentaren als bewährte Praxis gilt.

Sie können Kommentare hinzufügen, um Ihren Code zu erklären, was die zukünftige Bearbeitung oder die Zusammenarbeit mit anderen Entwickelnden erleichtert. Sie können auch Kommentare verwenden, um Ihre Debugging-Bemühungen zu vereinfachen, indem Sie Codezeilen auskommentieren, ohne sie zu löschen.

In diesem Beitrag werden wir uns genauer ansehen, was ein Kommentar in HTML ist, und:

• wie man HTML-Kommentare einfügt,
• wie man mehrzeilige HTML-Kommentare schreibt,
• wie man Inline-HTML-Kommentare erstellt und
• wie man in HTML auskommentiert.

Mit dem Kommentar-Tag können Sie beispielsweise Notizen in einer HTML-Datei hinterlassen, um sich daran zu erinnern, wo Sie im Erstellungsprozess aufgehört haben. Sie könnten aber auch einer anderen Person aus dem Team (oder sich selbst) die beabsichtigte Funktionalität eines Codeabschnitts im Quellcode erklären, ihr mithilfe eines Kommentars eine Aufgabe zuweisen oder sie auf einen Fehler hinweisen.

Kurz gesagt, HTML-Kommentare helfen Ihnen, beim Erstellen oder Debuggen einer Website intelligenter vorzugehen. In diesem Video wird der Prozess näher erläutert (auf Englisch):

Sehen wir uns nun verschiedene Anwendungsbeispiele und Szenarien an.

(Einzeilige) Kommentare in HTML einfügen

Um einen Kommentar in HTML zu hinterlassen, setzen Sie ein Kleiner-als-Zeichen, ein Ausrufezeichen und zwei Bindestriche (<!--) vor den Code bzw. den Inhalt des Kommentars und zwei Bindestriche und ein Größer-als-Zeichen (-->) nach dem Code bzw. den Inhalt, den Sie ausblenden möchten. Diese Tags sagen den Browsern, dass sie den Text dazwischen ignorieren sollen.

Der Kommentar selbst kann mit beliebig vielen Zeichen gefüllt und dürfen an fast jeder beliebigen Stelle eines HTML-Dokuments platziert werden. Zudem werden HTML-Kommentare meistens farblich anders hervorgehoben, um diese vom restlichen Code abzuheben.

Nehmen wir zum Beispiel an, Sie bauen mit einem Entwicklungsteam eine Website auf. Sie möchten eine Notiz hinterlassen, die sie daran erinnert, dass alle Schaltflächen die gleiche Farbe haben sollten.

Hier sehen Sie, wie Ihr HTML-Code aussehen könnte und wie das Ergebnis im Frontend aussieht:

Siehe das Pen-Kommentarbeispiel von HubSpot (@hubspot) auf CodePen

Wie Sie sehen können, wird der Kommentar im Frontend nicht gerendert.

Sie können eine Codezeile auch schnell mit dem Tastaturkürzel Strg + / auf dem PC oder Befehl + / kommentieren. Diese Methode geht viel schneller als die manuelle Eingabe der Tags.

Mehrzeilige Kommentare in HTML schreiben

Um einen HTML-Kommentar über mehrere Zeilen zu erstellen, können Sie dieselbe Methode verwenden – schließen Sie Ihren Zieltext einfach in folgende Tags ein:

<!-- KOMMENTAR -->.

Siehe das Pen-Kommentarbeispiel: mehrzeilige Kommentare von HubSpot (@hubspot) auf CodePen

Inline-Kommentare in HTML erstellen

Es ist auch möglich, Inline-Kommentare zwischen aktiven Abschnitten des HTML-Codes zu hinterlassen. Das sieht dann wie folgt aus:

Siehe das Pen-Kommentarbeispiel: Inline-Kommentare von HubSpot (@hubspot) auf CodePen

In HTML auskommentieren

Neben dem Hinterlassen von Notizen im Quelltext für andere Personen sind HTML-Kommentare auch sehr nützlich, um Codeabschnitte auszukommentieren. Beim Auskommentieren wird ein Teil des funktionierenden Codes vorübergehend durch einen Kommentar „deaktiviert“.

Das Auskommentieren von Code wird hauptsächlich aus zwei Gründen vorgenommen. Zum einen dient es dem Debuggen: Wenn Sie einen Fehler entdecken, können Sie verschiedene Teile Ihres Codes mit Kommentaren „deaktivieren“, prüfen, ob der Fehler immer noch auftritt, und den Vorgang wiederholen, bis der fehlerhafte Code gefunden ist.

So würde das Auskommentieren einer Schaltfläche aus dem letzten Beispiel aussehen:

Siehe das Pen-Kommentarbeispiel: Auskommentieren von HubSpot (@hubspot) auf CodePen

Zum anderen können hiermit alte Versionen Ihres Codes gespeichert werden. Da das Auskommentieren bedeutet, dass der Code im Backend sichtbar bleibt, kann es eine Möglichkeit sein, alte Codeabschnitte für Entwickler und Entwicklerinnen beizubehalten, die gerade erst beigetreten sind oder das Webprojekt geerbt haben.

Angenommen, Sie führen einige A/B-Tests durch und stellen fest, dass die Schaltfläche nicht angeklickt wird und Sie sie entfernen möchten. In diesem Fall könnten Sie sie auskommentieren und einen Hinweis darauf geben, dass eine CTA-Schaltfläche am Ende der Seite nicht konvertiert. Die nächste Person, die versucht, die Konversionsrate auf der Seite zu optimieren, wird dann wissen, dass sie mit einer anderen Schaltflächenplatzierung beginnen muss.

Kommentare in HTML hinterlassen

Kommentare sind eine gute Möglichkeit, wie Sie in Ihrem Code mit anderen „sprechen“ bzw. „kommunizieren“ können. Sie können erläuternde Notizen für andere Mitarbeitende eines Webprojekts hinzufügen oder sich selbst Notizen hinterlassen, die Sie daran erinnern, bei der nächsten Überarbeitung auf einen Abschnitt zurückzukommen oder ihm Priorität einzuräumen.

Und das Beste: Kommentare erscheinen nicht im Frontend Ihrer Website und sind einfach zu beherrschen, selbst wenn Sie gerade erst mit HTML anfangen.

Titelbild: MoMo Productions / iStock / Getty Images Plus