Una spiegazione di cosa sia il testo preformattato in HTML

Quando aggiungi del testo al codice HTML per una pagina Web, ad esempio in un elemento di paragrafo, hai poco o nessun controllo su dove si interromperanno quelle righe di testo o sulla spaziatura che verrà utilizzata. Questo perché il browser web scorrerà il testo secondo necessità in base all'area che lo contiene. Ciò comprende siti web reattivi che avrà un layout molto fluido che cambia in base al dimensione dello schermo utilizzato per visualizzare la pagina. Il testo HTML interromperà una riga dove è necessario una volta raggiunta la fine della sua area di contenimento. Alla fine, il browser gioca un ruolo più importante nel determinare come il testo si interrompe rispetto a te.

In termini di aggiunta di spaziatura per creare un determinato formato o layout, HTML non riconosce la spaziatura aggiunta al codice, inclusi barra spaziatrice, tabulazione o ritorni a capo. Se metti venti spazi tra una parola e la parola che segue, il browser visualizzerà un solo spazio lì. Questo è noto come collasso dello spazio bianco ed è in realtà uno dei concetti di HTML con cui molti nuovi del settore lottano all'inizio. Si aspettano che gli spazi HTML funzionino come in un programma come Microsoft Word, ma non è affatto così che funzionano gli spazi HTML.

Nella maggior parte dei casi, la normale gestione del testo in qualsiasi documento HTML è esattamente ciò di cui hai bisogno, ma in altri casi, potresti effettivamente volere un maggiore controllo su come il testo si spazia e dove si interrompe break Linee. Questo è noto come testo preformattato (in altre parole, sei tu a dettare il formato). Puoi aggiungere testo preformattato alle tue pagine web utilizzando l'HTML.

 Usando il 
 Etichetta 

Molti anni fa, era comune vedere pagine Web con blocchi di testo preformattato. Usando il 
 tag per definire le sezioni della pagina come formattate dalla digitazione stessa era un modo semplice e veloce per i web designer di visualizzare il testo come volevano. Questo era prima dell'ascesa dei CSS per il layout, quando i web designer erano davvero bloccati nel tentativo di forzare il layout utilizzando tabelle e altri metodi solo HTML. Questo (un po') ha funzionato perché il testo preformattato è definito come testo in cui la struttura è definita da convenzioni tipografiche piuttosto che dal rendering HTML. 

Oggi, questo tag non viene utilizzato tanto perché i CSS ci consentono di dettare stili visivi in ​​un modo molto più efficiente che provare per forzare l'aspetto nel nostro HTML e poiché gli standard Web impongono una chiara separazione tra struttura (HTML) e stili (CSS). Tuttavia, potrebbero esserci casi in cui il testo preformattato ha senso, come per un indirizzo postale in cui si desidera forzare le interruzioni di riga o per esempi di poesia in cui le interruzioni di riga sono essenziali per la lettura e il flusso complessivo del soddisfare. 

Ecco un modo per usare l'HTML 
 etichetta: 

L'HTML tipico comprime lo spazio bianco nel documento. Ciò significa che i ritorni a capo, gli spazi e i caratteri di tabulazione utilizzati in questo testo verranno tutti compressi in un unico spazio. Se hai digitato la citazione sopra in un tipico tag HTML come il tag p (paragrafo), ti ritroverai con una riga di testo, in questo modo: 

Era brillante e gli slithey toves Facevano gyre e gimble nel wabe. 

Il pre tag lascia i caratteri dello spazio bianco così come sono. Quindi le interruzioni di riga, gli spazi e le tabulazioni sono tutte mantenute nel rendering del browser di quel contenuto. Mettendo la citazione dentro a 
 tag per lo stesso testo comporterebbe questa visualizzazione: 
Era brillante e le slithey toves
Ha fatto gyre e gimble
nel
il
wabe
 Per quanto riguarda i caratteri 

Il 
 tag non si limita a mantenere gli spazi e le interruzioni per il testo che scrivi. Nella maggior parte dei browser, è scritto con un carattere a spaziatura fissa. Ciò rende i caratteri nel testo tutti uguali in larghezza. In altre parole, la lettera i occupa tanto spazio quanto la lettera w. 

Se preferisci utilizzare un altro carattere al posto di quello monospazio predefinito visualizzato dal browser, puoi comunque cambiarlo con fogli di stile e selezionane un altro font desideri che il testo venga visualizzato. 
 HTML5 

Una cosa da tenere presente è che, in HTML5, l'attributo "larghezza" non è più supportato per il 
 elemento. In HTML 4.01, la larghezza specificava il numero di caratteri che una riga avrebbe contenuto, ma questo è stato eliminato per HTML5 e oltre.