Lo spazio, con le sue vaste distese misteriose, ha sempre affascinato l’umanità. La conquista dello spazio è stata un sogno per generazioni, e ora, grazie a HTML e al design web, potete portare un tocco di esplorazione spaziale al vostro sito web. Ovviamente scherziamo. Affronteremo semplicemente il tema degli spazi in HTML!
L’uso dello spazio può sembrare estremamente semplice per un osservatore esterno. Si preme il tasto “spazio” come al solito e lo spazio atteso appare sullo schermo. Tuttavia, in realtà, la gestione degli spazi in HTML può rivelarsi complicata, e diversi metodi sono disponibili per farlo. La scelta del metodo appropriato è molto importante, poiché un uso scorretto può compromettere il layout sul browser dell’utente finale.
Una delle entità standard comunemente utilizzate in HTML è . In questo articolo, esamineremo cos’è questa entità, quando è opportuno usarla e quando è meglio evitarla. Inoltre, condivideremo alcuni trucchi interessanti per manipolare gli spazi in vari contesti di scrittura.
Le entità HTML chiave
Le entità HTML sono sequenze di caratteri speciali utilizzate per rappresentare vari simboli, valute e caratteri riservati nel linguaggio HTML. Sono essenziali per visualizzare correttamente questi elementi senza che vengano interpretati come codice HTML dal browser.
Se inserite direttamente una di queste entità nel vostro codice, il browser la riconoscerà come HTML e la visualizzerà di conseguenza. Per esempio, i simboli “<” o “>” verrebbero interpretati come l’inizio o la fine di un tag HTML, il che può provocare errori di visualizzazione indesiderati.
Per garantire che i caratteri speciali siano visualizzati correttamente, utilizziamo le entità HTML, che sono racchiuse tra una e commerciale (&) all’inizio e un punto e virgola (;) alla fine. Questo indica esplicitamente al browser cosa deve visualizzare.
Ecco alcuni esempi di entità HTML comunemente utilizzate:
| Nome | Entità HTML |
| Non-breaking space | |
| Minore di (<) | < |
| Maggiore di (>) | > |
| E commerciale (&) | & |
| Euro (€) | € |
| Sterlina (£) | £ |
| Virgolette doppie (“) | " |
Esistono numerose altre entità HTML. Questa lista dovrebbe essere un ottimo riferimento da salvare nei preferiti.
Cosa significa ?
è in realtà una delle entità HTML più frequentemente utilizzate. significa “spazio unificatore” (non-breaking space). È uno spazio che impedisce un’interruzione di riga automatica nella posizione in cui si trova.
Per esempio, potete utilizzare per mantenere insieme il nome e il cognome di una persona, o un importo monetario (come 100 €), assicurandovi che non vengano separati su due righe.
Esempio:
10 €Quando non usare
Dovete ammettere che il codice qui sopra non è molto leggibile. Allo stesso tempo, creare più spazi con spazi regolari non funzionerà neanche, poiché il browser ignora ogni spazio aggiuntivo oltre uno solo.
Per questo motivo, le spaziature e le larghezze sono quasi sempre gestite tramite i CSS piuttosto che con le entità HTML. L’uso di per l’indentazione o il layout in generale è una cattiva pratica. Al suo posto, dovreste utilizzare le proprietà CSS appropriate: text-indent per l’indentazione dei paragrafi, margin e padding per la spaziatura, gap per gli spazi tra gli elementi di layout.
Altri spazi disponibili in HTML
Quando separate parole o altri elementi, non siete limitati a un solo tipo di spazio. Oltre a , esistono altri tipi di spazi in HTML:
| Nome | Entità HTML |
| En space |   |
| Em space |   |
| Narrow no-break space |   |
| 3-per-em space |   |
| Figure space |   |
| Punctuation space |   |
| Thin space |   |
| Hair space |   |
In WordPress
L’editor Gutenberg di WordPress offre un modo facile per inserire spazi unificatori negli articoli. Invece di digitare manualmente, basta premere Shift + Spazio sulla tastiera.
Nel vecchio editor HTML, questo può essere più complicato. Potete provare a inserire direttamente nell’editor di testo.
Una soluzione più affidabile può essere un semplice shortcode definito nel file functions.php del vostro tema:
function nbsp_shortcode() {
return ' ';
}
add_shortcode( 'nbsp', 'nbsp_shortcode' );che potete poi richiamare ogni volta che avete bisogno di uno spazio unificatore con [nbsp].
In alternativa, potete utilizzare uno degli editor di testo popolari per WP che supportano la formattazione avanzata.
Spazi nelle e-mail HTML
La creazione di spazi nelle e-mail HTML è anche lontana dall’essere semplice. Ciò è dovuto al fatto che diversi client di posta supportano diverse parti dell’HTML.
Lo sviluppo di e-mail, in generale, è piuttosto diverso dallo sviluppo web. Tutti hanno uno schermo diverso, un dispositivo diverso e un client di posta diverso. È quindi essenziale testare la vostra e-mail in quanti più client possibili.
È sempre preferibile mantenere alcuni caratteri insieme. Potete eseguire questa operazione nelle e-mail HTML allo stesso modo che sul web, utilizzando .
Cellpadding
Il termine “cellpadding” è comunemente usato nel contesto della creazione di tabelle HTML, che è un caso d’uso frequente nelle e-mail HTML. Il cellpadding si riferisce allo spazio interno tra il contenuto di una cella e il suo bordo.
Il cellpadding può essere regolato utilizzando l’attributo HTML “cellpadding” nel tag <table> o con le proprietà CSS di padding.
Ecco un esempio di codice HTML con l’attributo cellpadding:
<table cellpadding="10">
<tr>
<td>Cella 1</td>
<td>Cella 2</td>
</tr>
<tr>
<td>Cella 3</td>
<td>Cella 4</td>
</tr>
</table>In questo esempio, ogni cella della tabella avrà uno spazio interno di 10 pixel tra il suo contenuto e il bordo della cella.
È importante notare che l’attributo “cellpadding” è considerato obsoleto in HTML5. Si raccomanda di utilizzare le proprietà CSS di padding per ottenere lo stesso risultato in modo più moderno e flessibile.
Padding
Nello sviluppo web, il “padding” è un concetto fondamentale che si riferisce allo spazio interno tra il contenuto di un elemento HTML e il suo bordo. Il padding è definito tramite la proprietà CSS padding.
Il padding è specificato utilizzando le proprietà CSS seguenti:
padding-top: controlla lo spazio interno sopra il contenutopadding-right: controlla lo spazio interno a destra del contenutopadding-bottom: controlla lo spazio interno sotto il contenutopadding-left: controlla lo spazio interno a sinistra del contenuto
Potete definire il valore del padding in pixel (px), em, rem, percentuale (%) o altre unità di misura CSS.
.elemento {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
/* oppure in forma abbreviata: */
padding: 10px 20px;
}
/* Padding uniforme */
.box {
padding: 15px;
}Il padding è comunemente utilizzato per creare spazio tra il contenuto e il bordo degli elementi, migliorando la leggibilità e l’estetica del layout.
Quando il padding è definito, si aggiunge alla larghezza e all’altezza dell’elemento, a meno che non utilizziate box-sizing: border-box, che include il padding nelle dimensioni definite.
In sintesi, il padding in CSS permette di definire lo spazio tra il contenuto di un elemento e il suo bordo, offrendo un controllo preciso sull’aspetto visivo dei vostri elementi HTML.
Margine
Nello sviluppo web, i margini (in inglese, “margin”) sono un concetto essenziale nella formattazione degli elementi HTML. I margini definiscono lo spazio esterno tra un elemento e gli elementi circostanti.
Ecco alcuni punti chiave da ricordare sui margini in CSS:
margin-top,margin-right,margin-bottom,margin-left: i margini possono essere definiti individualmente per ogni lato dell’elemento.- Valori dei margini: i margini possono essere definiti in pixel (px), em, rem, percentuale (%) o con il valore
auto. - Margini negativi: potete anche utilizzare margini negativi per sovrapporre gli elementi o regolare la spaziatura in modo preciso.
- Reimpostazione dei margini: per impostazione predefinita, i browser applicano margini a certi elementi. Un reset CSS può aiutare a partire da una base coerente.
- Collasso dei margini: se due elementi adiacenti hanno margini verticali, il margine effettivo sarà il più grande dei due, non la somma.
I margini sono comunemente utilizzati per controllare il layout e la spaziatura degli elementi HTML.
Tuttavia, nello sviluppo di e-mail, sono limitati a causa della mancanza di standardizzazione tra i client di posta.
È importante notare che i margini sono generalmente esterni agli elementi, mentre il padding è lo spazio interno tra il contenuto dell’elemento e il suo bordo.
Interruzione di riga
Il tag <br> è un modo popolare di creare spazi in HTML. Sebbene sia spesso considerato un tag di interruzione di riga, viene frequentemente utilizzato come strumento per creare spazi tra gli elementi.
Ecco perché il tag <br> è raccomandato solo per creare interruzioni di riga nel testo, non per la spaziatura generale tra gli elementi. Per la spaziatura tra gli elementi, le proprietà CSS come margin, padding e gap sono più appropriate.
Lo spazio tra le immagini
tra le immagini in HTML non è neanche la soluzione appropriata per separare visivamente le immagini.
Funziona solo con le parole e non avrà alcun effetto visibile quando viene posizionato tra due immagini. Utilizzate invece:
<br>è sempre un’opzione se desiderate separare le immagini, ma non è l’approccio migliore.- I padding e/o i margini sono quasi sempre un approccio migliore e più robusto per spaziare le immagini.
img {
display: block;
margin-bottom: 20px;
}Quando avete solo due immagini, un altro metodo consiste nel farle flottare conservando dello spazio tra di esse.
img.left {
float: left;
margin-right: 10px;
}Come rimuovere la spaziatura tra le immagini nelle e-mail HTML?
D’altra parte, potreste voler eliminare lo spazio aggiunto da alcuni client di posta tra le immagini.
Nella maggior parte dei casi, lo spazio appare perché le immagini non hanno un tag di stile appropriato. Dato che la maggior parte dei client di posta non supporta CSS, è essenziale utilizzare stili inline.
Per esempio: assicuratevi di aggiungerli in linea per ogni elemento visivo, poiché Gmail non supporta i fogli di stile interni né le classi CSS: style="display:block;border:0;outline:none;"
In alternativa, considerate di rimuovere i padding e i margini delle celle della tabella e di impostare border-spacing: 0 sulla tabella.
Conclusione
L’uso di in HTML è uno strumento potente quando viene utilizzato correttamente. La gestione degli spazi in HTML e nelle e-mail è un argomento più complesso di quanto sembri. Che si tratti di creare spazi, regolare i margini o controllare il padding nelle e-mail, ogni situazione richiede un approccio diverso. In questo articolo, abbiamo esplorato i diversi metodi e le entità HTML per gestire gli spazi, mettendo in luce le buone pratiche e le trappole da evitare. Tenete a mente che la chiarezza del codice e la compatibilità multi-browser sono essenziali per offrire un’esperienza utente ottimale.
Ecco fatto, ora potete brillare in società… almeno per quanto riguarda gli spazi HTML!
0 commenti