Commenti HTML, a capo e spazi, con risultati dal vivo | We.Inc
Come scrivere commenti HTML e CSS, andare a capo, aggiungere spazi extra ed evitare che gli spazi si comprimano. Ogni esempio è modificabile con il risultato visualizzato accanto.
Commenti HTML, a capo e spazi
Scrivi un commento HTML come <!-- note -->; i browser ignorano tutto ciò che sta tra i delimitatori. Forza un a capo all'interno del testo con <br> e inizia un nuovo paragrafo con <p>. I browser riducono le sequenze di spazi a uno solo, quindi usa per un singolo spazio fisso, oppure la proprietà CSS white-space per mantenere la spaziatura che hai digitato.
Riferimento rapido
Ti serve
Usa
Note
Una nota in HTML
<!-- note -->
Visibile nel sorgente della pagina, mai sullo schermo
Una nota in CSS
L'unica forma di commento che CSS conosce
Un a capo in una riga di testo
<br>
Indirizzi, poesie, testi di canzoni
Un nuovo blocco di testo
Dà una spaziatura che puoi stilizzare
Uno spazio che non si comprime e non va mai a capo
Tra un numero e la sua unità
Mantenere ogni spazio e ogni a capo
white-space: pre-wrap
Manda comunque a capo le righe lunghe
Ogni caso in questa pagina mostra il codice e ciò che il browser disegna davvero. Modifica qualsiasi esempio e il risultato si aggiorna, così puoi capire perché uno spazio è sparito o un a capo non ha fatto nulla prima di cambiare la tua pagina.
Trova nelle sezioni qui sotto il caso che corrisponde al tuo problema: commenti, a capo, spazi o la proprietà white-space.
Modifica il codice a sinistra. Il risultato a destra è un vero rendering del browser in un frame isolato, con gli script disattivati.
Copia nella tua pagina la versione che fa ciò che ti serve.
Se la spaziatura sembra ancora sbagliata, controlla i dieci errori verso la fine della pagina; la maggior parte dei problemi di spazi compressi è uno di questi.
Usa i commenti per spiegare perché il markup è fatto così, non cosa è. Un commento che dice <!-- nav --> sopra un elemento nav non aggiunge nulla.
Rimuovi i commenti dall'HTML di produzione se contengono note interne, perché chiunque può leggerli con Visualizza sorgente.
Prima di una pila di tag <br>, usa margin o gap in CSS. La spaziatura in CSS può cambiare in base alla dimensione dello schermo; una fila di a capo no.
Metti tra valori che devono restare sulla stessa riga, come 10 km o Mr. Khan, invece di usarlo per l'indentazione.
Domande frequenti
Come commento più righe di HTML?
Metti <!-- prima della prima riga e --> dopo l'ultima. Tutto ciò che sta in mezzo, su qualsiasi numero di righe, viene ignorato. Non puoi annidare un commento dentro un altro, perché il primo --> chiude l'intero commento e il resto compare come testo.
Perché il mio HTML ignora gli spazi extra?
L'HTML tratta qualsiasi sequenza di spazi, tabulazioni e a capo nel testo normale come un singolo spazio. Questo ti permette di indentare liberamente il sorgente senza cambiare la pagina. Per mantenere più spazi, usa le entità oppure imposta white-space: pre-wrap sull'elemento in CSS.
Si scrive <br>, <br/> o <br />?
In HTML funzionano tutte e tre. <br> è la forma HTML semplice. La barra è facoltativa e il parser HTML la ignora, ma JSX in React richiede la forma autochiudente <br />.
Posso usare commenti // in CSS?
No. CSS capisce solo /* */. Una riga che inizia con // non è un commento: il parser la tratta come codice non valido e scarta la dichiarazione, o persino l'intera regola che segue, ed è per questo che il bug può sembrare casuale.
I commenti condizionali funzionano ancora?
No. I commenti condizionali come <!--[if IE]> venivano letti solo dalle vecchie versioni di Internet Explorer e sono stati abbandonati in Internet Explorer 10. Tutti i browser attuali li trattano come commenti normali, quindi il markup al loro interno non compare mai.
Quando l'a capo è lo strumento giusto
Un <br> va usato dove l'a capo fa parte del contenuto stesso: le righe di un indirizzo postale, il verso di una poesia, un blocco di firma. In quei casi chi copiasse il testo a mano manterrebbe l'a capo.
In tutti gli altri casi l'a capo è layout, e il layout appartiene al CSS. Due paragrafi separati da <br><br> sembrano a posto finché il design non richiede più spazio su desktop e meno su telefono. Due elementi <p> con un margin possono cambiare a qualsiasi breakpoint, e gli screen reader li annunciano come paragrafi separati.
Perché gli spazi si comprimono, e i quattro modi per evitarlo
Il valore predefinito del browser per il testo normale è white-space: normal, che unisce ogni sequenza di spazi bianchi in un solo spazio e va a capo dove serve. Ecco perché l'indentazione del sorgente non compare mai sullo schermo.
Per mantenere gli spazi puoi usare le entità ( e le più larghe   ed  ), un elemento <pre>, oppure uno dei valori di white-space pre, pre-wrap, pre-line e break-spaces. Le entità vanno bene per uno o due spazi fissi; i valori CSS vanno bene per interi blocchi di testo come codice, poesie o note inserite dagli utenti.
I commenti sono pubblici
I commenti HTML arrivano a ogni visitatore. Non compaiono nella pagina, ma sono nel sorgente, nelle copie salvate e in ciò che scaricano i motori di ricerca. Non lasciare mai in un commento password, indirizzi interni, nomi di clienti o note TODO su falle di sicurezza.
La maggior parte degli strumenti di build può rimuovere i commenti al posto tuo. Vite e bundler simili eliminano con la minificazione i commenti di JavaScript e CSS; per i commenti HTML nel tuo file index potrebbe servire un passaggio con un minificatore HTML, se vuoi che spariscano.
Commenti HTML
Un commento inizia con <!-- e finisce con -->. Può stare tra gli elementi o racchiudere interi blocchi per disattivarli mentre fai le prove.
Commenti su una riga e su più righe
Vengono disegnati solo i due paragrafi. I commenti, compreso quello che racchiude un intero paragrafo, non lasciano traccia sullo schermo.
Perché i commenti non possono essere annidati
Il primo --> chiude in anticipo il commento esterno, quindi il testo rimasto e il --> finale compaiono nella pagina.
I vecchi commenti condizionali oggi non fanno nulla
Solo Internet Explorer 9 e precedenti li leggono. I browser attuali saltano del tutto l'avviso, quindi puoi eliminare tranquillamente il vecchio trucco.
A capo: <br>, <p> o margin CSS
Quale usare
Elemento
Significato
Usalo per
<br>
Un a capo dentro un unico blocco di testo
Indirizzi, poesie, testi di canzoni
Un paragrafo separato
Ogni nuovo concetto o blocco di testo
margin o gap CSS
Spazio tra i blocchi
Spaziatura di layout che cambia in base allo schermo
<hr>
Un cambio di argomento
Una separazione tematica tra sezioni
Un indirizzo con <br>
Gli a capo fanno parte dell'indirizzo, quindi qui <br> è la scelta corretta.
Tag <br> in serie contro paragrafi con un margin
Sembrano simili, ma la seconda versione ha veri paragrafi e uno spazio che puoi cambiare in un solo punto.
Aggiungere spazi: le entità
Entità di spazio
Entità
Carattere
Larghezza
Uso tipico
U+00A0 spazio unificatore
Spazio normale, non va mai a capo
10 kg, page 3
 
U+2002 spazio en
Mezzo em
Spazi in elenchi o menu
 
U+2003 spazio em
Un em
Indentare una singola riga
 
U+2009 spazio sottile
Stretto
Tra gruppi di cifre in alcuni stili
Tenere insieme un valore e la sua unità
Nel riquadro stretto, la prima riga può andare a capo tra 50 e km. Lo spazio unificatore tiene insieme la seconda coppia.
Spazi compressi contro entità
Cinque spazi digitati diventano uno. Ogni entità mantiene la propria larghezza.
Mantenere spazi e a capo con CSS white-space
Valori di white-space
Valore
Spazi
A capo
Manda a capo le righe lunghe
Compressi
Compressi
Sì
Compressi
Compressi
No
Mantenuti
Mantenuti
No
Mantenuti
Mantenuti
Sì
Compressi
Mantenuti
Sì
Mantenuti, e possono andare a capo
Mantenuti
Sì
pre, pre-wrap e pre-line a confronto
Lo stesso testo in tre riquadri. pre mantiene tutto ma esce dal bordo, pre-wrap mantiene tutto e va a capo, pre-line mantiene solo gli a capo.
Mostrare il testo che qualcuno ha digitato in un modulo
Le note di una textarea mantengono i loro a capo se mostrate con pre-line, senza il rischio di trasformare il loro testo in HTML.
Commenti CSS, e perché // rompe il CSS
Il colore commentato viene ignorato e si applica quello verde.
Cosa fa // alla regola successiva
La riga // viene letta come parte di un selettore, quindi l'intera regola .warning viene scartata e il testo resta nero.
10 errori comuni
Errori e soluzioni
Errore
Cosa succede
Soluzione
Digitare più spazi tra le parole
Si comprimono in uno solo
o white-space: pre-wrap
Usare <br><br> per spaziare i paragrafi
La spaziatura non si adatta allo schermo
Elementi <p> separati e un margin
Annidare i commenti
Il testo dopo il --> interno finisce nella pagina
Usa un solo commento, o elimina il blocco
Scrivere commenti // in CSS
La regola successiva viene ignorata
Usa /* */
Scrivere <!-- --> in un file JavaScript
Errore di sintassi o comportamento strano
Usa // o /* */ in JS
Lasciare note private nei commenti HTML
Chiunque può leggerle con Visualizza sorgente
Rimuovile o elimina i commenti nella build
Indentare il testo con file di
Si rompe sugli schermi piccoli
padding-left o text-indent
Due trattini dentro un commento
I validatori più vecchi lo segnalano; si legge male
Evita -- nel testo dei commenti
Scrivere <br> senza barra in JSX
Il compilatore JSX segnala un errore
Scrivi <br /> in React
Aspettarsi che gli a capo di una textarea si vedano