Se ti è capitato di domandarti, nel programmare in HTML, "perché dovrei indentare il mio codice HTML, se alla fine funziona?” sei nel posto giusto: non solo ti spiegheremo perché dovresti, ma anche come farlo al meglio! Innanzitutto, se il termine indentare ti suona poco familiare, ripassiamo in breve che cosa significa e cosa comporta a livello pratico.
Indentare significa inserire dello spazio vuoto all’interno del codice per renderlo più comprensibile e chiaro a chiunque lo legga.
Estremizziamo un attimo il concetto a fini esplicativi: prendiamo in considerazione, come esempio, la descrizione del corso Hackademy. Cosa succederebbe se la vedessi scritta in questo modo?
È stato difficile leggere tutto vero? Ecco, questo perché nonostante il testo sia stato scritto in maniera corretta dal punto di vista grammaticale e lessicale, non abbiamo impostato una interlinea corretta e per questo lo vediamo così confuso e con le righe tutte attaccate. Correggendo l’interlinea, il risultato sarebbe questo:
Come funziona il corso Hackademy?
Hackademy è un corso online full-time 4 giorni alla settimana, all'interno di un'aula virtuale, con lezioni teoriche al mattino ed esercitazioni pratiche al pomeriggio con tutor dedicati. All'interno dell'aula virtuale è possibile confrontarsi con i docenti ed interagire con i compagni di corso in qualunque momento. Tutti i materiali sono disponibili on-demand per dare la possibilità di recuperare lezioni perse o approfondire argomenti. Si impara a programmare scrivendo codice in diretta, collaborando in team con il costante supporto dei docenti ed utilizzando i metodi di lavoro più richiestidalle aziende.Al termine del corso riceverai un diploma Accredible che certifica il completamento del corso e le competenze acquisite.
Decisamente meglio, vero?
Adesso il testo, che comunque resta il medesimo di prima, risulta sicuramente più comprensibile all’utente. Nonostante abbiamo esasperato un po’ l’esempio, questo potrebbe essere paragonato alla differenza tra leggere un codice indentato male e uno indentato adeguatamente. Vediamolo meglio con un esempio in programmazione.
Come programmare in HTML nel modo corretto
<html>
<body>
<h2>Lista non ordinata</h2>
<ul>
<li>Caffè</li>
<li>Cioccolata</li>
<li>Latte</li>
</ul>
<h2>An Ordered HTML List</h2>
<ol>
<li>Caffè</li>
<li>Cioccolata</li>
<li>Latte</li>
</ol>
</body>
</html>
Per quanto questo pezzo di codice sia semplice, diventa di difficile lettura se indentato male, specie se consideriamo anche tante altre righe di codice scritto in questo modo. Vediamo come sarebbe se fosse indentato meglio.
<html>
<body>
<h2>Lista non ordinata</h2>
<ul>
<li>Caffè</li>
<li>Cioccolata</li>
<li>Latte</li>
</ul>
<h2>An Ordered HTML List</h2>
<ol>
<li>Caffè</li>
<li>Cioccolata</li>
<li>Latte</li>
</ol>
</body>
</html>
Così va meglio! Anche solo ad un primo sguardo il nostro codice risulta già più pulito e ordinato rispetto a prima.
Che strumenti posso utilizzare per indentare?
Per ottimizzare la lettura del tuo codice hai a disposizione, molto banalmente, il magico potere della barra spaziatrice. Con essa puoi spaziare e distanziare ogni riga di quanto ritieni necessario. Tuttavia per utilizzare degli standard di indentazione viene usato solitamente il tasto TAB, che distanzia il codice più che con la barra spaziatrice e in maniera più veloce. Non appena riterrai che il codice sia chiaro a sufficienza, magari sottoponendolo alla revisione di un tuo collega che riesca facilmente a capirlo, allora puoi ritenerti soddisfatto!
Perché dedicare del tempo a tutto questo?
Bene, per rispondere a questa domanda, possiamo tornare agli esempi precedenti. Se avessi davanti a te due testi, di cui non sai il contenuto, da una prima occhiata, quale saresti più invogliato a leggere? Quello con le scritte tutte attaccate tra loro o quello con le scritte ben spaziate?
Sicuramente quello più ordinato è la scelta migliore; è difficile capire cosa ci sia scritto tra quelle righe così confuse. Nell'ambito della programmazione informatica il discorso è lo stesso.
Se una persona che deve controllare il tuo codice si trova davanti l’equivalente del testo disordinato di cui parlavamo prima, sicuramente farà molta fatica a capire cosa tu abbia scritto e se lo hai scritto bene. Tutto questo si traduce in una perdita di tempo nel capire la funzionalità del codice e una probabilità di errore più alta nello scovare eventuali difetti durante la scrittura; se invece passiamo a leggere un codice ben indentato e ordinato, verranno drasticamente ridotti i tempi di comprensione in quanto tutto sarà più chiaro e sarà più facile scovare errori in esso.