Quando aggiungi del testo al codice HTML per una pagina Web, ad esempio in un elemento paragrafo, hai poco o nessun controllo sul punto in cui queste righe di testo si interromperanno o sulla spaziatura che verrà utilizzata. Questo perché il browser scorrerà il testo in base alle esigenze in base all'area che lo contiene. Questo include siti web reattivi che avranno un layout molto fluido che cambia in base alla dimensione dello schermo utilizzato per visualizzare la pagina. Il testo HTML interromperà una linea dove è necessario una volta raggiunta la fine dell'area di contenimento. Alla fine, il browser ha un ruolo più importante nel determinare in che modo il testo si interrompe.
In termini di aggiunta di spaziature per creare un determinato formato o layout, HTML non riconosce la spaziatura che viene aggiunta al codice, inclusi i ritorni a barra spaziatrice, a tabulazione o a capo. Se metti venti spazi tra una parola e la parola che viene dopo, il browser renderà solo un singolo spazio lì. Questo è noto come collasso dello spazio bianco ed è in realtà uno dei concetti di HTML che molte persone nuove del settore sono in prima linea in difficoltà. Si aspettano che lo spazio bianco HTML funzioni come in un programma come Microsoft Word, ma non è così che funziona lo spazio bianco 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 volere più controllo su esattamente come il testo si spazia e dove si rompono le linee. Questo è noto come testo pre-formattato (in altre parole, è necessario dettare il formato). Puoi aggiungere testo preformattato alle tue pagine web usando l'HTML
Usando il Etichetta
Molti anni fa, era normale vedere pagine Web con blocchi di testo preformattato. Usando il
pre tag per definire sezioni della pagina come formattate dalla tipizzazione stessa era un modo semplice e veloce per i web designer di mostrare il testo come volevano. Questo era prima del sorgere del CSS per il layout, quando i web designer erano davvero bloccati nel tentativo di forzare il layout usando tabelle e altri metodi solo HTML. Questo (kinda) 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 è usato tanto perché il CSS ci permette di dettare gli stili visivi in modo molto più efficiente rispetto al tentativo di forzare l'aspetto nel nostro HTML e perché gli standard Web dettano una netta 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 generale del contenuto.
Ecco un modo per utilizzare l'HTML
etichetta:
Twas brillig e le fitte di slithey
Gira e dona
nel
il
Wabe
HTML tipico comprime lo spazio bianco nel documento. Ciò significa che il carrello ritorna, spazi e caratteri di tabulazione usati in questo testo sarebbero tutti compressi in uno spazio. Se hai digitato la citazione sopra in un tipico tag HTML come il tag p (paragrafo), ti ritroverai con una riga di testo, come questa: Twas brillig e le sue fitte tese Il tag pre lascia i caratteri dello spazio bianco così come sono. Quindi le interruzioni di linea, gli spazi e le schede sono tutti mantenuti nel rendering del browser di quel contenuto. Mettendo la citazione dentro a pre tag per quello stesso testo risulterebbe in questa visualizzazione: Twas brillig e le fitte di slithey Gira e dona nel il Wabe Il pre il tag non si limita a mantenere gli spazi e le interruzioni per il testo che scrivi. Nella maggior parte dei browser, è scritto in un font monospace. Ciò rende i caratteri nel testo tutti uguali in larghezza. In altre parole, la lettera prende tutto lo spazio della lettera w. Se preferisci utilizzare un altro font al posto di quello monospace predefinito visualizzato dal browser, puoi comunque modificarlo con i fogli di stile e selezionare qualsiasi altro font in cui desideri venga eseguito il rendering del testo. Una cosa da tenere presente è che, in HTML5, l'attributo "width" non è più supportato per Modificato da Jeremy Girard il 2/2/17 Per quanto riguarda i caratteri
HTML5
elemento. In HTML 4.01, la larghezza specificava il numero di caratteri che una riga conterrebbe, ma questo è stato eliminato per HTML5 e oltre.
