In HTML-Kommentare in deinen HTML-Code einfügen

In diesem Tutorial lernst du, was HTML-Kommentare sind, wofür man sie braucht und wie du sie in deinen HTML-Code einfügen kannst.Tags: | | | | | |
Noch nicht sicher genug im Webdesign? Lass dir in unseren Programmier-Kursen in Kirchdorf oder unserer Wichtel-Webdesign-Agentur in Pettenbach weiterhelfen!

Worum geht´s?

Kommentare sind ein sehr hilfreiches Werkzeug in jeder Programmiersprache. Aber was sind HTML-Kommentare überhaupt? Und wie kannst du sie sinnvoll einsetzen?

1. Was ist ein HTML-Kommentar?

Ein Kommentar in HTML ist wie in jeder Programmiersprache ein Teil im Quellcode, der vom verarbeitendem Programm (dem Compiler oder in diesem Fall dem Browser) ignoriert wird. In HTML wird unser HTML-Kommentar beispielsweise nicht auf der eigentlichen Webseite angezeigt.

Was aber nützt es uns, wenn wir „sinnlosen“ Text in unseren HTML-Code schreiben?

HTML-Kommentare (oder Kommentare in Programmiersprachen allgemein) haben vor allem drei Vorteile:

  • Mehr Übersicht durch erklärende HTML-Kommentare
  • Mehr Struktur durch strukturierende HTML-Kommentare
  • Leichteres Fehlerfinden durch Auskommentieren

1.1 Mehr Übersicht durch erklärende HTML-Kommentare

erklärender HTML-Kommentar

Wenn du später an einer größeren Webseite arbeitest, wird dein Quellcode irgendwann deutlich mehr als 100 Zeilen haben – eher so gegen 10.000 oder mehr. Möglicherweise hast du auch über einen längeren Zeitraum von Wochen oder Monaten immer wieder an verschiedenen Dateien gearbeitet.

Kannst du sicher sagen, dass du auch zwei Monate später noch weißt, was du dir damals gedacht hast?

Wenn du aber innerhalb deines HTML-Codes immer weider HTML-Kommentare eingefügt hast, die erklären, was du dir zum damaligen Zeitpunkt gedacht hast, brauchst du dir Erinnerungs-Hilfen.

Dazu kommt noch, dass du ja womöglich nicht nur alleine an einer Webseite arbeitest, sondern gemeinsam mit anderen.

Wenn alle ihren Code mit Kommentaren erklären, kennen sich andere Team-Mitglieder besser aus und können leichter zusammenarbeiten.

1.2 Mehr Struktur durch strukturierende HTML-Kommentare

strukturierender HTML-Kommentar

HTML-Kommentare (oder Kommentare im Allgemeinen, egal welche Programmiersprache) werden in Entwicklungsumgebungen wie Visual Studio Code meist in einer deutlich anderen Farbe dargestellt werden als der restliche Code (z.B. in grün).

Das kann man nutzen, um bestimmte Bereiche unseres Quellcodes deutlich von anderen abzugrenzen. Ähnlich wie Kapitel in einem Buch.

Wenn du die Visual Studio Code Extension „Better Comments“ benutzt, kannst du diese Funktion von HTML-Kommentaren noch deutlicher nutzen, weil dir dann noch mehr verschiedene Farben für Kommentare zur Verfügung stehen.

1.3 Leichteres Fehlerfinden durch Auskommentieren

HTML auskommentieren

Eine weitere hilfreiche Funktion von Kommentaren ist das sogenannte „Auskommentieren“, das bei der Fehlersuche helfen kann.

Wenn du z.B. einige Hundert Zeilen Quellcode hast und nicht weißt, wo genau ein Fehler liegt, kannst du immer nur einen Teil davon auskommentieren (= zu einem Kommentar machen), und schauen, ob der Fehler verschwindet. Falls ja, liegt der Fehler vermutlich im auskommentierten Bereich (im Bild oben z.B. alles ab der <h1>-Überschrift bis hin zum Ende vom <body>)

Dann kannst du immer mehr vom auskommentierten Bereich wieder aus dem HTML-Kommentar „herausnehmen“, um den fehlerhaften Bereich noch weiter einzugrenzen.

In vielen Programmiersprachen gibt es zusätzlich einen sogenannten „Debugger“, mit dem die Fehlersuche noch leichter wird. In der Web-Programmierung müssen wir leider oft ohne einen solchen Debugger auskommen.

Umso wichtiger ist es, die Fehlersuche mit dem Auskommentieren zu lernen.

In der reinen HTML-Programmierung ist das Auskommentieren noch nicht so hilfreich, aber sobald CSS und vor allem JavaScript und PHP dazukommen, wird es sehr schnell wichtig.

2. Einen HTML-Kommentar einfügen

Ein HTML-Kommentar ist ein eigenes HTML-Tag, das etwas seltsam aussieht. Nämlich so:

Normaler Text und HTML-Code
<!-- Alles hier ist ein HTML-Kommentar!!! 
     Er kann auch mehrere Zeilen umfassen -->
Weiterer HTML-Code hier

Der HTML-Kommentar beginnt also mit einem <!– und endet mit einem –>. Du kannst so viele HTML-Kommentare in deinen HTML-Code einfügen wie du willst.

Eine kleine Vorschau: In fast allen Programmiersprachen (auch CSS, PHP und JavaScript) funktionieren Kommentare auf zwei Arten:

// alles was rechts nach den beiden Schrägstrichen kommt ist ein ein-zeiliger Kommentar

/* alles zwischen dem Schrägstrich und dem Stern bis zum nächsten Stern und Schrägstrich
   ist ein Kommentar (auch mehrzeilig) */

Das war es auch schon wieder was HTML-Kommentare betrifft.

Am besten gewöhnst du dir gleich von Beginn an, bei komplexeren Projekten (> 100 Zeilen) immer wieder mal Kommentare einzusetzen.

Du wirst mit der Zeit merken, dass diese durchaus Sinn machen.

Diskussion zum Tutorial

Du bist aus Oberösterreich? Dann nütze doch auch unsere flexiblen Programmier-Kurse in Kirchdorf - oder gib deine Website gerne in die guten Hände unserer erfahrenen Wichtel-Webdesign-Agentur.