HTML auskommentieren


HTML gibt Dir die Möglichkeit Deinen Code an beliebigen Stellen zu kommentieren. Kommentierter Code wird von den Browsern nicht dargestellt(gerendert), sie sind also für den normalen Webseiten-Besucher nicht sichtbar.

Ein Kommentar öffnest Du mit einem „kleiner als, Ausrufezeichen und zwei aufeinanderfolgende Bindestriche“

<!--

Und schließt es wieder mit „zwei aufeinanderfolgenden Bindestrichen und dem größer als-Zeichen“ als Gegenstück zur Eröffnung.

-->

So sieht es dann aus, wenn Du eine Zeile auskommentierst

<!-- Dies ist ein Kommentar für eine Zeile -->

Und so sieht es aus, wenn Du mehrere Zeilen auskommentierst

<!--
Dies ist ein Kommentar
den Du ruhig über mehrere
Zeilen schreiben kannst
das hier ist dann die letzte Zeile des Kommentar
-->

Wenn wir uns die Kommentare dann in HTML-Dateien ansehen, kann das so aussehen

<!-- Start der Hero-Sektion -->
<div class="hero">
 <h1>Hallo Nerd-Lifer</h1>
 <p>Cool, wie Du HTML auskommentierst, oder?</p>
</div>

<!-- Start der Über uns Sektion -->
<div>
 <h2>Hoffe Dir hilft dieser Beitrag</h2>
 <p>damit Du künftig HTML besser und leichter verstehst</p>
</div>

Wie Du Deinen Code auskommentierst und die Dinge beschreibst, bleibt Dir überlassen. Versuche aber auf Namenskonventionen zu achten, so gewöhnst Du Dir einen Standard an.

Jede HTML-Datei wird dann in ähnlich lesbarer Struktur von Dir auskommentiert. Damit erleichterst Du Dir selbst und jedem anderen, die Zusammenarbeit.

Achte darauf, dass Du in Deinen Kommentaren keine Bindestriche mehr verwenden kannst.
Wir haben den Kommentar mit "--" eingeleitet und mit "-->" beendet.
Zwei Bindestriche reichen also aus um den Kommentar zu beenden.
Also nimm den Asterix (*) oder ähnliche Sonderzeichen.

Conditional Comments

Falls Du heute noch solche Kommentare vorfindest, handelt es sich um conditional Comments. Also um Kommentare die nur unter bestimmten Voraussetzungen angezeigt werden.

<!--[if IE]> <style>@import url(ie.css)</style><![endif]-->
<!--[if IE 6]> <style>@import url(ie6.css);</style><![endif]-->
<!--[if lte IE 8]> <style>@import url(ie6-7-8.css);</style><![endif]-->

HTML-Kommentare richtig verwenden

Mithilfe der HTML-Kommentare kannst Du Deinen Code übersichtlicher, lesbarer und auch wartbarer machen.

Und Du kannst einen Code-Block auskommentieren und dann etwas testen. Der auskommentierte Code wird nicht von Deinem Browser angezeigt, sondern ist nur im Sourcecode(Seitenquelltext) sichtbar.

Nach Deinem Test entfernst Du einfach wieder Deinen Kommentar und die geschriebenen Zeilen Code, sind wieder aktiviert.

Syntax-Übersicht

SyntaxBeispiel
<!– abc –><!– Mein Kommentar hier –>
[if IE] Alle Internet Explorer Versionen ab 5.0 bis einschl. 9
[if IE 6]Alle Internet Explorer mit der Version 6.0
[if lt IE 8]

Alle Versionen vor IE 8
(lt = less-than also kleiner als)
[if lte IE 8]Alle Version bis Internet Explorer 8 (less-than or equal = kleiner oder gleich Internet Explorer Version 8)
[if gte IE 5.5] Alle Version ab 5.5
(gte = greater than or equal)
Also größer gleich der Internet Explorer Version 5.5
[endif] Schließt das conditional Comment

Tastenkombinationen / Shortcodes

Um Code-Zeilen in Deinem Quelltext auszukommentieren, kannst Du die folgenden Tastenkombinationen verwenden. Es gibt in der Regel immer zwei Möglichkeiten um dies zu tun. Entweder du markierst den kompletten Code und nutzt die Tastenkombination oder Du gehst mit Deinem Cursor in die Zeile und drückst dann den Shortcode.

HTML-EditorTastenkombination
Visual Studio Code – Eine Zeile auskommentierenStrg + #
Visual Studio Code – Mehrere Zeilen auskommentierenShift + Alt + A