HTML-Kommentare, Zeilenumbrüche und Leerzeichen, mit Live-Ergebnis | We.Inc
So schreibst du HTML- und CSS-Kommentare, fügst Zeilenumbrüche und zusätzliche Leerzeichen ein und verhinderst, dass Leerzeichen zusammenfallen. Jedes Beispiel ist bearbeitbar, mit dem gerenderten Ergebnis daneben.
HTML-Kommentare, Zeilenumbrüche und Leerzeichen
Einen HTML-Kommentar schreibst du als <!-- note -->; Browser überspringen alles zwischen den Markierungen. Einen Zeilenumbruch innerhalb von Text erzwingst du mit <br>, einen neuen Absatz beginnst du mit <p>. Browser fassen mehrere Leerzeichen zu einem zusammen. Nutze daher für ein einzelnes festes Leerzeichen oder die CSS-Eigenschaft white-space, um die Abstände so zu behalten, wie du sie getippt hast.
Kurzreferenz
Du willst
Verwende
Hinweise
Eine Notiz in HTML
<!-- note -->
Im Seitenquelltext sichtbar, nie auf dem Bildschirm
Eine Notiz in CSS
Die einzige Kommentarform, die CSS kennt
Einen Umbruch in einer Textzeile
<br>
Adressen, Gedichte, Liedtexte
Einen neuen Textblock
Liefert Abstand, den du gestalten kannst
Ein Leerzeichen, das nie zusammenfällt oder umbricht
Zwischen einer Zahl und ihrer Einheit
Jedes Leerzeichen und jeden Zeilenumbruch behalten
white-space: pre-wrap
Bricht lange Zeilen trotzdem um
Jeder Fall auf dieser Seite zeigt den Code und das, was der Browser tatsächlich darstellt. Bearbeite ein Beispiel und das Ergebnis aktualisiert sich. So siehst du, warum ein Leerzeichen verschwunden ist oder ein Umbruch nichts bewirkt hat, bevor du deine eigene Seite änderst.
Suche in den Abschnitten unten den Fall, der zu deinem Problem passt: Kommentare, Umbrüche, Leerzeichen oder die Eigenschaft white-space.
Bearbeite den Code links. Das Ergebnis rechts ist eine echte Browser-Darstellung in einem abgeschotteten Frame, mit deaktivierten Skripten.
Kopiere die Version, die tut, was du brauchst, in deine Seite.
Wenn die Abstände immer noch falsch aussehen, prüfe die zehn Fehler am Ende der Seite; die meisten Probleme mit verschwundenen Leerzeichen sind einer davon.
Nutze Kommentare, um zu erklären, warum das Markup so ist, nicht was es ist. Ein Kommentar wie <!-- nav --> über einem nav-Element bringt nichts.
Entferne Kommentare aus dem Produktions-HTML, wenn sie interne Notizen enthalten, denn jeder kann sie über den Seitenquelltext lesen.
Greife zu CSS-margin oder gap, bevor du <br>-Tags stapelst. Abstände in CSS können sich je nach Bildschirmgröße ändern, eine Reihe von Umbrüchen nicht.
Setze zwischen Werte, die in einer Zeile bleiben müssen, etwa 10 km oder Mr. Khan, statt es zum Einrücken zu verwenden.
Häufige Fragen
Wie kommentiere ich mehrere Zeilen HTML aus?
Setze <!-- vor die erste Zeile und --> hinter die letzte. Alles dazwischen wird ignoriert, egal über wie viele Zeilen. Kommentare lassen sich nicht ineinander verschachteln, denn das erste --> beendet den ganzen Kommentar und der Rest erscheint als Text.
Warum ignoriert mein HTML zusätzliche Leerzeichen?
HTML behandelt jede Folge von Leerzeichen, Tabs und Zeilenumbrüchen in normalem Text als ein einziges Leerzeichen. So kannst du deinen Quelltext frei einrücken, ohne die Seite zu verändern. Um mehrere Leerzeichen zu behalten, nutze -Entities oder setze in CSS white-space: pre-wrap auf das Element.
Heißt es <br>, <br/> oder <br />?
Alle drei funktionieren in HTML. <br> ist die einfache HTML-Form. Der Schrägstrich ist optional und wird vom HTML-Parser ignoriert, aber JSX in React verlangt das selbstschließende <br />.
Kann ich //-Kommentare in CSS verwenden?
Nein. CSS versteht nur /* */. Eine Zeile, die mit // beginnt, ist kein Kommentar: Der Parser behandelt sie als fehlerhaften Code und verwirft die folgende Deklaration oder sogar die ganze folgende Regel. Deshalb wirkt der Fehler oft zufällig.
Funktionieren bedingte Kommentare noch?
Nein. Bedingte Kommentare wie <!--[if IE]> wurden nur von alten Versionen des Internet Explorer gelesen und in Internet Explorer 10 abgeschafft. Alle aktuellen Browser behandeln sie als normale Kommentare, daher erscheint Markup darin nie.
Wann ein Zeilenumbruch das richtige Werkzeug ist
Ein <br> gehört dorthin, wo der Umbruch Teil des Inhalts selbst ist: die Zeilen einer Postanschrift, die Strophe eines Gedichts, ein Signaturblock. An solchen Stellen würde ein Leser den Umbruch behalten, wenn er den Text von Hand abschreibt.
Überall sonst ist der Umbruch Layout, und Layout gehört in CSS. Zwei Absätze, getrennt durch <br><br>, sehen gut aus, bis das Design auf dem Desktop mehr Abstand und auf dem Handy weniger braucht. Zwei <p>-Elemente mit einem margin lassen sich an jedem Breakpoint ändern, und Screenreader sagen sie als getrennte Absätze an.
Warum Leerzeichen zusammenfallen, und die vier Auswege
Der Standard des Browsers für normalen Text ist white-space: normal. Dabei wird jede Folge von Leerraum zu einem Leerzeichen zusammengeführt und Zeilen werden umbrochen, wo es nötig ist. Deshalb erscheint die Einrückung aus deinem Quelltext nie auf dem Bildschirm.
Um Leerzeichen zu behalten, kannst du Entities verwenden ( und die breiteren   und  ), ein <pre>-Element oder einen der white-space-Werte pre, pre-wrap, pre-line und break-spaces. Entities eignen sich für ein oder zwei feste Lücken; die CSS-Werte eignen sich für ganze Textblöcke wie Code, Gedichte oder von Nutzern eingegebene Notizen.
Kommentare sind öffentlich
HTML-Kommentare werden an jeden Besucher ausgeliefert. Sie erscheinen nicht auf der Seite, stehen aber im Quelltext, in gespeicherten Kopien und in dem, was Suchmaschinen herunterladen. Lass niemals Passwörter, interne Adressen, Kundennamen oder TODO-Notizen zu Sicherheitslücken in einem Kommentar stehen.
Die meisten Build-Tools können Kommentare für dich entfernen. Vite und ähnliche Bundler minifizieren JavaScript- und CSS-Kommentare weg; HTML-Kommentare in deiner index-Datei brauchen eventuell einen eigenen HTML-Minifier-Schritt, wenn sie verschwinden sollen.
HTML-Kommentare
Ein Kommentar beginnt mit <!-- und endet mit -->. Er kann zwischen Elementen stehen oder ganze Blöcke umschließen, um sie beim Testen abzuschalten.
Einzeilige und mehrzeilige Kommentare
Nur die beiden Absätze werden dargestellt. Die Kommentare, auch der, der einen ganzen Absatz umschließt, hinterlassen keine Spur auf dem Bildschirm.
Warum Kommentare nicht verschachtelt werden können
Das erste --> schließt den äußeren Kommentar vorzeitig, daher erscheinen der übrige Text und das letzte --> auf der Seite.
Alte bedingte Kommentare bewirken heute nichts mehr
Nur Internet Explorer 9 und älter lesen diese. Aktuelle Browser überspringen die Warnung komplett, du kannst den alten Trick also bedenkenlos löschen.
Zeilenumbrüche: <br>, <p> oder CSS-margin
Was du verwenden solltest
Element
Bedeutung
Verwende es für
<br>
Ein Umbruch innerhalb eines Textblocks
Adressen, Gedichte, Liedtexte
Ein eigener Absatz
Jeden neuen Gedanken oder Textblock
CSS-margin oder gap
Abstand zwischen Blöcken
Layout-Abstände, die sich je nach Bildschirmgröße ändern
<hr>
Ein Themenwechsel
Eine thematische Trennung zwischen Abschnitten
Eine Adresse mit <br>
Die Umbrüche sind Teil der Adresse, daher ist <br> hier die richtige Wahl.
Gestapelte <br>-Tags im Vergleich zu Absätzen mit margin
Beide sehen ähnlich aus, aber die zweite Version hat echte Absätze und einen Abstand, den du an einer Stelle ändern kannst.
Leerzeichen einfügen: Entities
Leerzeichen-Entities
Entity
Zeichen
Breite
Typische Verwendung
U+00A0 geschütztes Leerzeichen
Normales Leerzeichen, bricht nie um
10 kg, page 3
 
U+2002 Halbgeviert-Leerzeichen
Ein halbes em
Lücken in Listen oder Menüs
 
U+2003 Geviert-Leerzeichen
Ein em
Eine einzelne Zeile einrücken
 
U+2009 schmales Leerzeichen
Schmal
Zwischen Zifferngruppen in manchen Schreibweisen
Einen Wert und seine Einheit zusammenhalten
In der schmalen Box kann die erste Zeile zwischen 50 und km umbrechen. Das geschützte Leerzeichen hält das zweite Paar zusammen.
Zusammengefallene Leerzeichen im Vergleich zu Entities
Fünf getippte Leerzeichen werden zu einem. Jede Entity behält ihre eigene Breite.
Leerzeichen und Zeilenumbrüche mit CSS white-space behalten
Werte von white-space
Wert
Leerzeichen
Zeilenumbrüche
Bricht lange Zeilen um
Zusammengefasst
Zusammengefasst
Ja
Zusammengefasst
Zusammengefasst
Nein
Behalten
Behalten
Nein
Behalten
Behalten
Ja
Zusammengefasst
Behalten
Ja
Behalten, und können umbrechen
Behalten
Ja
pre, pre-wrap und pre-line nebeneinander
Derselbe Text in drei Boxen. pre behält alles, läuft aber über den Rand hinaus, pre-wrap behält alles und bricht um, pre-line behält nur die Zeilenumbrüche.
Text anzeigen, den jemand in ein Formular getippt hat
Notizen aus einer textarea behalten mit pre-line ihre Zeilenumbrüche, ohne dass ihr Text zu HTML werden kann.
CSS-Kommentare, und warum // CSS kaputt macht
Die auskommentierte Farbe wird ignoriert und die grüne gilt.
Was // mit der nächsten Regel macht
Die //-Zeile wird als Teil eines Selektors gelesen, daher wird die ganze .warning-Regel verworfen und der Text bleibt schwarz.
10 häufige Fehler
Fehler und Lösungen
Fehler
Was passiert
Lösung
Mehrere Leerzeichen zwischen Wörtern tippen
Sie fallen zu einem zusammen
oder white-space: pre-wrap
<br><br> für Absatzabstände verwenden
Der Abstand kann sich nicht an die Bildschirmgröße anpassen
Getrennte <p>-Elemente und ein margin
Kommentare verschachteln
Text nach dem inneren --> landet auf der Seite
Einen einzigen Kommentar verwenden oder den Block löschen
//-Kommentare in CSS schreiben
Die nächste Regel wird ignoriert
/* */ verwenden
<!-- --> in eine JavaScript-Datei schreiben
Syntaxfehler oder seltsames Verhalten
In JS // oder /* */ verwenden
Private Notizen in HTML-Kommentaren lassen
Jeder kann sie im Seitenquelltext lesen
Entfernen oder Kommentare im Build herausfiltern
Text mit Reihen von einrücken
Bricht auf kleinen Bildschirmen
padding-left oder text-indent
Zwei Bindestriche in einem Kommentar
Ältere Validatoren melden es; es liest sich schlecht
-- im Kommentartext vermeiden
<br> in JSX ohne Schrägstrich schreiben
Der JSX-Compiler meldet einen Fehler
In React <br /> schreiben
Erwarten, dass Zeilenumbrüche aus einer textarea angezeigt werden