HTML-commentaar, regeleinden en spaties, met live resultaat | We.Inc
Zo schrijft u HTML- en CSS-commentaar, voegt u regeleinden en extra spaties toe en voorkomt u dat spaties samenvallen. Elk voorbeeld is bewerkbaar, met het weergegeven resultaat ernaast.
HTML-commentaar, regeleinden en spaties
Schrijf HTML-commentaar als <!-- note -->; browsers slaan alles tussen de markeringen over. Forceer een regeleinde binnen tekst met <br>, en begin een nieuwe alinea met <p>. Browsers persen reeksen spaties samen tot één, dus gebruik voor één vaste spatie, of de CSS-eigenschap white-space om de spatiëring te behouden die u typte.
Snel overzicht
U wilt
Gebruik
Opmerkingen
Een notitie in HTML
<!-- note -->
Zichtbaar in de paginabron, nooit op het scherm
Een notitie in CSS
De enige commentaarvorm die CSS kent
Een regeleinde binnen een tekstregel
<br>
Adressen, gedichten, songteksten
Een nieuw tekstblok
Geeft ruimte die u kunt opmaken
Eén spatie die nooit samenvalt of afbreekt
Tussen een getal en de eenheid
Elke spatie en nieuwe regel behouden
white-space: pre-wrap
Breekt lange regels nog steeds af
Elk geval op deze pagina toont de code en wat de browser werkelijk tekent. Bewerk een voorbeeld en het resultaat wordt bijgewerkt, zodat u ziet waarom een spatie verdween of een regeleinde niets deed voordat u uw eigen pagina aanpast.
Zoek in de onderdelen hieronder het geval dat bij uw probleem past: commentaar, regeleinden, spaties of de eigenschap white-space.
Bewerk de code links. Het resultaat rechts is een echte browserweergave in een afgeschermd frame, met scripts uitgeschakeld.
Kopieer de versie die doet wat u nodig hebt naar uw pagina.
Ziet de spatiëring er nog steeds verkeerd uit, bekijk dan de tien fouten onderaan de pagina; de meeste problemen met samengevallen spaties zijn er één van.
Gebruik commentaar om uit te leggen waarom de markup zo is, niet wat het is. Commentaar als <!-- nav --> boven een nav-element voegt niets toe.
Verwijder commentaar uit productie-HTML als het interne notities bevat, want iedereen kan het lezen via Bron weergeven.
Grijp naar CSS margin of gap vóór een stapel <br>-tags. Ruimte in CSS kan per schermformaat veranderen; een rij regeleinden niet.
Zet tussen waarden die op één regel moeten blijven, zoals 10 km of Mr. Khan, in plaats van het voor inspringen te gebruiken.
Veelgestelde vragen
Hoe zet ik meerdere regels HTML in commentaar?
Zet <!-- vóór de eerste regel en --> na de laatste. Alles daartussen, over een willekeurig aantal regels, wordt genegeerd. U kunt commentaar niet in ander commentaar nesten, want de eerste --> beëindigt het hele commentaar en de rest verschijnt als tekst.
Waarom negeert mijn HTML extra spaties?
HTML behandelt elke reeks spaties, tabs en nieuwe regels in gewone tekst als één spatie. Zo kunt u uw broncode vrij inspringen zonder dat de pagina verandert. Om meerdere spaties te behouden gebruikt u -entiteiten of stelt u in CSS white-space: pre-wrap in op het element.
Is het <br>, <br/> of <br />?
Alle drie werken in HTML. <br> is de gewone HTML-vorm. De schuine streep is optioneel en wordt door de HTML-parser genegeerd, maar JSX in React vereist de zelfsluitende <br />.
Kan ik //-commentaar gebruiken in CSS?
Nee. CSS begrijpt alleen /* */. Een regel die met // begint is geen commentaar: de parser ziet het als kapotte code en gooit de declaratie of zelfs de hele regel die volgt weg, en daarom kan de bug willekeurig lijken.
Werken voorwaardelijke commentaren nog?
Nee. Voorwaardelijke commentaren zoals <!--[if IE]> werden alleen gelezen door oude versies van Internet Explorer en zijn in Internet Explorer 10 geschrapt. Elke huidige browser behandelt ze als gewoon commentaar, dus markup erin verschijnt nooit.
Wanneer een regeleinde het juiste gereedschap is
Een <br> hoort waar het regeleinde deel van de inhoud zelf is: de regels van een postadres, een couplet van een gedicht, een ondertekening. Op die plekken zou een lezer het regeleinde behouden als hij de tekst met de hand overschreef.
Overal elders is het regeleinde opmaak, en opmaak hoort in CSS. Twee alinea's gescheiden door <br><br> zien er prima uit tot het ontwerp meer ruimte op desktop en minder op een telefoon nodig heeft. Twee <p>-elementen met een margin kunnen bij elk breakpoint veranderen, en schermlezers kondigen ze aan als aparte alinea's.
Waarom spaties samenvallen, en de vier manieren om dat te omzeilen
De standaard van de browser voor gewone tekst is white-space: normal, dat elke reeks witruimte samenvoegt tot één spatie en regels afbreekt waar dat nodig is. Daarom is inspringing in uw broncode nooit op het scherm te zien.
Om spaties te behouden kunt u entiteiten gebruiken ( en de bredere   en  ), een <pre>-element, of een van de white-space-waarden pre, pre-wrap, pre-line en break-spaces. Entiteiten passen bij een of twee vaste tussenruimtes; de CSS-waarden passen bij hele tekstblokken zoals code, gedichten of notities die gebruikers invoeren.
Commentaar is openbaar
HTML-commentaar gaat mee naar elke bezoeker. Het verschijnt niet op de pagina, maar staat wel in de bron, in opgeslagen kopieën en in wat zoekmachines downloaden. Laat nooit wachtwoorden, interne adressen, klantnamen of TODO-notities over beveiligingslekken in commentaar staan.
De meeste buildtools kunnen commentaar voor u verwijderen. Vite en vergelijkbare bundlers minificeren commentaar in JavaScript en CSS weg; voor HTML-commentaar in uw indexbestand hebt u mogelijk een HTML-minifier-stap nodig als u het weg wilt hebben.
HTML-commentaar
Commentaar begint met <!-- en eindigt met -->. Het kan tussen elementen staan of hele blokken omsluiten om ze tijdens het testen uit te schakelen.
Commentaar op één regel en over meerdere regels
Alleen de twee alinea's worden getekend. Het commentaar, ook dat rond een hele alinea, laat geen spoor op het scherm na.
Waarom commentaar niet genest kan worden
De eerste --> sluit het buitenste commentaar te vroeg af, dus de overgebleven tekst en de laatste --> verschijnen op de pagina.
Oude voorwaardelijke commentaren doen nu niets meer
Alleen Internet Explorer 9 en ouder lezen deze. Huidige browsers slaan de waarschuwing volledig over, dus de oude truc kan veilig weg.
Regeleinden: <br>, <p> of CSS margin
Wat u gebruikt
Element
Betekenis
Gebruik het voor
<br>
Een regeleinde binnen één tekstblok
Adressen, gedichten, songteksten
Een aparte alinea
Elke nieuwe gedachte of elk nieuw tekstblok
CSS margin of gap
Ruimte tussen blokken
Ruimte in de opmaak die per schermformaat verandert
<hr>
Een wisseling van onderwerp
Een thematische scheiding tussen onderdelen
Een adres met <br>
De regeleinden horen bij het adres, dus <br> is hier de juiste keuze.
Gestapelde <br>-tags tegenover alinea's met een margin
Beide lijken op elkaar, maar de tweede versie heeft echte alinea's en een tussenruimte die u op één plek kunt aanpassen.
Spaties toevoegen: entiteiten
Spatie-entiteiten
Entiteit
Teken
Breedte
Typisch gebruik
U+00A0 vaste spatie
Normale spatie, breekt nooit af
10 kg, page 3
 
U+2002 en-spatie
Een halve em
Ruimte in lijsten of menu's
 
U+2003 em-spatie
Eén em
Eén regel laten inspringen
 
U+2009 smalle spatie
Smal
Tussen cijfergroepen in sommige stijlen
Een waarde en de eenheid bij elkaar houden
In het smalle vak kan de eerste regel afbreken tussen 50 en km. De vaste spatie houdt het tweede paar bij elkaar.
Samengevallen spaties tegenover entiteiten
Vijf getypte spaties worden er één. Elke entiteit behoudt haar eigen breedte.
Spaties en nieuwe regels behouden met CSS white-space
white-space-waarden
Waarde
Spaties
Nieuwe regels
Breekt lange regels af
Samengevoegd
Samengevoegd
Ja
Samengevoegd
Samengevoegd
Nee
Behouden
Behouden
Nee
Behouden
Behouden
Ja
Samengevoegd
Behouden
Ja
Behouden, en kan afbreken
Behouden
Ja
pre, pre-wrap en pre-line naast elkaar
Dezelfde tekst in drie vakken. pre behoudt alles maar loopt over de rand, pre-wrap behoudt alles en breekt af, pre-line behoudt alleen de regeleinden.
Tekst tonen die iemand in een formulier typte
Notities uit een textarea behouden hun regeleinden als ze met pre-line worden getoond, zonder het risico dat hun tekst in HTML verandert.
CSS-commentaar, en waarom // CSS breekt
De uitgecommentarieerde kleur wordt genegeerd en de groene wordt toegepast.
Wat // met de volgende regel doet
De //-regel wordt gelezen als deel van een selector, dus de hele .warning-regel wordt weggegooid en de tekst blijft zwart.
10 veelgemaakte fouten
Fouten en oplossingen
Fout
Wat er gebeurt
Oplossing
Meerdere spaties tussen woorden typen
Ze vallen samen tot één
of white-space: pre-wrap
<br><br> gebruiken voor ruimte tussen alinea's
De ruimte past zich niet aan het schermformaat aan
Aparte <p>-elementen en een margin
Commentaar nesten
Tekst na de binnenste --> lekt op de pagina
Gebruik één commentaar, of verwijder het blok
//-commentaar schrijven in CSS
De volgende regel wordt genegeerd
Gebruik /* */
<!-- --> schrijven in een JavaScript-bestand
Syntaxfout of vreemd gedrag
Gebruik // of /* */ in JS
Privénotities in HTML-commentaar laten staan
Iedereen kan ze lezen via Bron weergeven
Verwijder ze of strip commentaar in de build
Tekst inspringen met rijen
Gaat mis op kleine schermen
padding-left of text-indent
Twee koppeltekens in commentaar
Oudere validators markeren het; het leest slecht
Vermijd -- in commentaartekst
<br> zonder schuine streep schrijven in JSX
De JSX-compiler meldt een fout
Schrijf <br /> in React
Verwachten dat nieuwe regels uit een textarea zichtbaar zijn