Se vi è mai capitato di aprire un file HTML scritto da qualcun altro e di sentirvi completamente persi in un labirinto di tag, capirete subito perché l'indentazione è importante. Imparare a usare l'indentazione in HTML è una delle prime abitudini che distingue uno sviluppatore che scrive codice da uno che scrive codice leggibile.
Questa guida illustra sia come strutturare il documento HTML con una corretta indentazione a livello di codice, sia come indentare visivamente il testo sulla pagina web utilizzando le proprietà CSS.
In breve: come indentare in HTML
- L'indentazione HTML funziona a due livelli: la struttura del codice nel tuo editor e l'indentazione visiva del testo nella pagina renderizzata
- Utilizzare due spazi per ogni livello di annidamento per l'indentazione a livello di codice e mantenere la coerenza in tutto il file
- Per la rientranza visiva del testo, utilizzare `text-indent` solo per la prima riga, `margin-left` per spostare un intero blocco e `padding-left` per rientrare all'interno di contenitori stilizzati
- Non usare mai o<blockquote> solo per creare un rientro visivo
- Utilizza il formattatore integrato di VS Code o Prettier per automatizzare la formattazione del codice per tutto il tuo team
Perché una corretta indentazione in HTML è importante?
Immaginate di leggere un libro senza capitoli, senza paragrafi e senza spazi tra le frasi. Ecco, l'HTML appare esattamente così a qualsiasi sviluppatore che si trovi a doverci lavorare.
Una corretta indentazione rende immediatamente evidenti le relazioni padre-figlio tra gli elementi. Inoltre, velocizza il debug perché permette di individuare a colpo d'occhio un tag di chiusura mancante.
Inoltre, rende la collaborazione molto meno problematica, perché un nuovo sviluppatore che si unisce al team non deve passare un'ora a decifrare la struttura del codice prima di poter dare il suo contributo.
Oltre alla leggibilità, dei motori di ricerca analizzano il tuo codice HTML per comprenderne la struttura. Un codice HTML pulito e ben strutturato aiuta i crawler a interpretare correttamente la gerarchia dei contenuti, il che può indirettamente supportare le tue prestazioni SEO.
Un codice pulito crea siti web migliori
Dall'HTML semantico allo sviluppo WordPress scalabile, realizziamo siti web puliti, veloci e facili da gestire, che si adattano alla crescita della tua attività.
Due tipi di indentazione HTML che devi conoscere
Prima di addentrarci nelle tecniche, è opportuno chiarire un equivoco che spesso confonde i principianti. Quando si parla di "rientro in HTML", si intendono due cose distinte
- L'indentazione a livello di codice si riferisce al modo in cui i tag HTML sono disposti all'interno dell'editor di codice. Non influisce su ciò che gli utenti vedono sul sito web. Il suo unico scopo è quello di rendere il codice leggibile rappresentando visivamente la gerarchia di annidamento degli elementi.
- L'indentazione visiva del testo si riferisce all'indentazione del contenuto nella pagina web renderizzata, in modo che gli utenti vedano un'effettiva indentazione sulla pagina. Questo è controllato tramite proprietà CSS. Confondere i due concetti porta gli sviluppatori a utilizzare in modo improprio elementi come
l'indentazione visiva, esclusivamente per effetto visivo, creando seri problemi di accessibilità.
Come indentare il codice HTML nell'editor?
Il tuo editor di codice è il punto di partenza per acquisire buone abitudini di indentazione. Impostare correttamente fin dall'inizio ti farà risparmiare ore di debug e riformattazione in seguito.
Comprendere la struttura genitore-figlio
HTML è un linguaggio gerarchico. Quando un elemento si trova all'interno di un altro, diventa figlio di quest'ultimo. L'elemento figlio deve sempre essere indentato di un livello rispetto al suo genitore per rendere visibile questa relazione nel codice.
Ecco un esempio di codice HTML senza rientro che funziona, ma è difficile da leggere:
<div><h1>Titolo della pagina</h1><p> Questo è un paragrafo.</p><ul><li> Articolo uno</li><li> Articolo due</li></ul></div>Ecco lo stesso codice HTML con la corretta indentazione:
<div><h1>Titolo della pagina</h1><p> Questo è un paragrafo.</p><ul><li> Articolo uno</li><li> Articolo due</li></ul></div>La struttura è immediatamente chiara.<h1> ,<p> , E<ul> sono tutti figli del<div> . IL<li> gli elementi si trovano un livello più in profondità perché sono figli del<ul> Ogni livello di annidamento viene rientrato della stessa quantità in modo costante.
Due spazi, quattro spazi o tabulazioni?
La scelta specifica è molto meno importante della coerenza. La maggior parte delle guide di stile HTML utilizza di default due spazi per livello di indentazione perché l'HTML si annida in profondità e quattro spazi possono facilmente spostare il codice molto a destra.
La cosa più importante è scegliere uno stile e utilizzarlo per tutto il progetto. Mescolare due spazi in alcuni file e quattro spazi in altri crea differenze disordinate nel controllo di versione e attriti negli ambienti di lavoro di squadra.
Utilizzo di VS Code per automatizzare l'indentazione
VS Code gestisce l'indentazione in modo eccellente fin da subito. Quando scrivi codice HTML e premi Invio dopo un tag di apertura, VS Code indenta automaticamente la riga successiva. Se apri un file esistente con un'indentazione incoerente, puoi correggere l'intero documento in una sola volta.
- Su Windows, premi Maiusc + Alt + F per formattare l'intero documento.
- Su Mac, premi Maiusc + Opzione + F.
Per i team, l'estensione Prettier impone regole di indentazione in tutti gli editor degli sviluppatori tramite un file di configurazione condiviso .prettierrc. Questo elimina completamente i conflitti di merge legati all'indentazione e le difficoltà durante la revisione del codice.
Come si applica la rientranza al testo in HTML utilizzando i CSS?
Ora passiamo alla parte che influisce su ciò che gli utenti vedono effettivamente: la formattazione visiva del testo sulla pagina web. Ci sono tre proprietà CSS principali che utilizzerete, e ognuna si comporta in modo diverso.
La proprietà CSS text-indent
La proprietà `text-indent` applica un rientro solo alla prima riga di un blocco di testo. Funziona su elementi a livello di blocco come paragrafi e titoli. Tutte le righe successive dello stesso elemento mantengono il margine normale.
p { text-indent: 30px; }Questo crea un rientro di 30 pixel per la prima riga di ogni paragrafo. È possibile utilizzare unità di misura diverse a seconda del layout. I pixel forniscono un rientro assoluto fisso.
L'utilizzo di em o rem lega il rientro alla dimensione del carattere, garantendo una migliore scalabilità su schermi di diverse dimensioni . I valori percentuali, invece, rendono il rientro relativo alla larghezza del blocco contenitore.
p { text-indent: 2em; }È possibile utilizzare anche valori negativi per creare un effetto di rientro sporgente, in cui la prima riga sporge a sinistra mentre le righe successive sono rientrate:
p { text-indent: -2em; padding-left: 2em; }La compatibilità del modulo text-indent con tutti i browser moderni è eccellente. Non sono necessari prefissi specifici del fornitore.
La proprietà del margine sinistro
La proprietà margin-left rientra un intero blocco di contenuto spostando l'intero elemento verso destra. Questo è utile quando si desidera rientrare un intero paragrafo, sezione o contenitore, anziché solo la sua riga iniziale.
.indented-section { margin-left: 40px; }La proprietà margin-left funziona su quasi tutti gli elementi HTML.
Un aspetto da tenere presente: i margini creano spazio all'esterno del riquadro dell'elemento, spostando quindi l'elemento stesso anziché solo il testo al suo interno. Questo è importante nei layout flexbox o a griglia, dove la spaziatura è già gestita dal sistema di layout.
La proprietà padding-left
La proprietà padding-left crea spazio all'interno del riquadro del contenuto di un elemento, tra il bordo e il contenuto stesso. Questa è la differenza fondamentale rispetto a margin-left.
.callout-box { padding-left: 24px; background-color: #f5f5f5; border-left: 4px solid #0057ff; }Se qui si usasse `margin-left` invece di `padding-left`, il testo apparirebbe rientrato, ma il colore e il bordo inizierebbero dal bordo sinistro originale, creando un effetto di interruzione.
La proprietà padding-left mantiene intatto il contenitore stilizzato mentre sposta il testo verso l'interno. Utilizzala ogni volta che devi rientrare il testo all'interno di un contenitore con uno sfondo, un bordo o un box model definito.
Rientro di elenchi HTML ed elementi annidati
Gli elenchi HTML hanno un rientro predefinito applicato dai browser, ma la quantità esatta varia tra Chrome, Firefox e Safari. Per risultati coerenti e controllati, definiscilo esplicitamente nel CSS:
ul, ol { padding-left: 24px; }Per gli elenchi annidati, applica un rientro aggiuntivo all'elemento annidato per creare un secondo livello ben definito:
<ul><li>Articolo principale<ul><li> Elemento annidato A</li><li> Elemento annidato B</li></ul></li></ul>Controllando il padding-left tramite CSS a ogni livello, si ottiene un elenco rientrato a due livelli, pulito e dall'aspetto uniforme su tutti i browser.
Elementi HTML che gestiscono nativamente la rientranza
Alcuni elementi HTML hanno un comportamento di indentazione predefinito nei browser. Sapere quando usarli correttamente e quando no rende il codice accessibile e semanticamente corretto.
- L'elemento blockquote viene visualizzato rientrato per impostazione predefinita nella maggior parte dei browser. Molti sviluppatori lo utilizzano impropriamente solo per questo effetto visivo. Questo è un errore.
IL<blockquote> L'elemento `<script>` serve a contrassegnare i contenuti citati da una fonte esterna. Gli screen reader lo annunciano come una citazione, quindi utilizzarlo su contenuti non citati può trarre in inganno gli utenti che si affidano a tecnologie assistive. Usalo solo per le citazioni effettive e per tutto il resto usa i CSS.
- L'elemento <pre> preserva tutti gli spazi bianchi, le interruzioni di riga e le rientranze esattamente come appaiono nel file HTML. Questo lo rende essenziale per visualizzare frammenti di codice e testo preformattato, dove la spaziatura ha un significato preciso.
- Gli spazi unificatori ( ) sono un'abitudine comune tra i principianti per creare rapidamente rientri. La risposta definitiva è di non usarli mai per questo scopo. Non sono scalabili; si interrompono a seconda della larghezza dello schermo e causano interruzioni di riga imprevedibili sugli schermi più piccoli. Utilizzate sempre i CSS.
Errori comuni da evitare nella creazione di indentazioni
Mescolare tabulazioni e spazi nello stesso file è l'errore più comune a livello di team. In un editor il risultato è corretto, mentre in un altro è completamente errato. Configura il tuo editor per convertire automaticamente le tabulazioni in spazi oppure utilizza Prettier per imporre uno stile coerente.
Utilizzare stili inline su ogni singolo elemento anziché una classe CSS riutilizzabile crea un incubo in termini di manutenzione.
Aggiornare lo stile="margin-left: 40px" su venti diversi tag di paragrafo nel tuo codice HTML è un lavoro noioso che una singola classe CSS avrebbe eliminato completamente.
Un rientro così profondo da causare l'a capo automatico delle righe nell'editor è un segnale che la struttura HTML stessa necessita di essere semplificata, non solo riformattata. Se il codice raggiunge regolarmente dieci o dodici livelli di profondità, vale la pena rivedere la struttura stessa.
Accessibilità e rientro
Questo è un aspetto che la maggior parte delle guide tralascia. Una corretta indentazione a livello di codice influisce direttamente sulla precisione con cui le tecnologie assistive analizzano la pagina.
- Quando gli elementi sono annidati correttamente e la gerarchia HTML è chiara, i lettori di schermo possono identificare con precisione punti di riferimento, intestazioni e aree di contenuto.
- Quando gli elementi vengono utilizzati in modo improprio per i loro effetti visivi collaterali, i lettori di schermo comunicano agli utenti un contesto errato.
Una corretta indentazione rende inoltre molto più semplice verificare la correttezza semantica del codice HTML utilizzando strumenti come WAVE e axe DevTools .
Considerazioni finali
Una corretta indentazione dell'HTML è una di quelle abitudini che ripaga molto più di quanto costi.
Il tempo che dedichi alla corretta formattazione di un progetto ti viene restituito ogni volta che lo debugghi, ogni volta che un nuovo sviluppatore apre il file e ogni volta che rivedi il tuo codice mesi dopo e lo comprendi ancora immediatamente.
Noi di Seahawk Media realizziamo e verifichiamo siti web in cui la qualità del codice influisce direttamente su prestazioni, manutenibilità ed esperienza utente.
Se il tuo sito web necessita di un'analisi del codice, di una valutazione delle prestazioni o di uno sviluppo completo, contattaci e creeremo insieme qualcosa che funzioni alla perfezione sia a livello tecnico che visivo.
Domande frequenti
L'indentazione HTML influisce sull'aspetto di una pagina web per gli utenti?
L'indentazione a livello di codice nel file HTML non influisce minimamente sul risultato finale. Influisce solo su come il codice viene visualizzato nell'editor. L'indentazione visiva sulla pagina web è controllata da proprietà CSS come `text-indent`, `margin-left` e `padding-left`.
Qual è la differenza tra margin-left e padding-left per la rientranza?
La proprietà margin-left crea spazio all'esterno del riquadro dell'elemento, spostando l'intero elemento verso destra. La proprietà padding-left crea spazio all'interno del riquadro dell'elemento, allontanando il contenuto dal bordo sinistro dell'elemento.
Utilizza padding-left quando l'elemento ha un colore di sfondo o un bordo che deve rimanere allineato al suo bordo esterno.
Per l'indentazione HTML devo usare tabulazioni o spazi?
La maggior parte delle guide di stile HTML raccomanda l'uso di spazi, e due spazi rappresentano lo standard più comune per l'HTML in particolare. La cosa più importante è la coerenza in tutto il file e tra i membri del team. Usa Prettier per applicare automaticamente lo stile che hai scelto.
È corretto utilizzare spazi unificatori per l'indentazione in HTML?
No. Usare caratteri speciali per creare rientri è una cattiva pratica. Non si adatta alle diverse larghezze dello schermo, crea problemi di accessibilità e non funziona correttamente. Utilizza sempre le proprietà CSS per qualsiasi rientro che deve apparire nella pagina web renderizzata.
