Dopo la parentesi dedicata all’elemento Canvas, oggi voglio riprendere il percorso di approfondimento nel mondo di HTML5 soffermandomi principalmente sulle novità che questo linguaggio ci offre in ambito semantico per lo sviluppo di siti internet.
HTML5 ci offre diversi elementi che aiutano il programmatore ad identificare alcune sezioni delle pagine web così da poter suddividere, a livello semantico, le varie parti del sito internet.
Se prendessimo in considerazione un insieme di 50 siti internet aventi struttura grafica simile, noteremmo che ogni sito web possiede la propria struttura di DIV e la propria serie di classi e identificatori CSS. Purtroppo, capiamo subito che si tratta di un problema di visualizzazione del codice e di pulizia nella programmazione che rischia di rendere complesso il mantenimento del codice.
HTML5, però, ci mette a disposizione alcuni elementi, come header, footer, e navbar che ci possono tornare utili per combattere l’abitudine descritta sopra. Per capire meglio analizziamo il seguente frammento di codice HTML4:
[html]
<body>
<div id="header"></div>
<div id="navbar"></div>
<div class="left_menu"></div>
<div id="content">
<div class="contentBox">
<div class="boxHeader"></div>
<p>Il contenuto del box</p>
<div class="boxFooter"></div>
</div>
<div class="contentBox">
<div class="boxHeader"></div>
<p>Un altro box</p>
<div class="boxFooter"></div>
</div>
</div>
<div id="footer"></div>
</body>
[/html]
Chiaramente notiamo che nel codice che abbiamo creato ci sono tanti nomi e identificatori degli elementi per un piccolo frammento di codice. Inoltre, sicuramente, chiunque stia leggendo avrebbe potuto utilizzare altri nomi.
Effettivamente non è un problema gravissimo, però è una mancanza di uniformità che rende scomodo il nostro lavoro.
HTML5, invece, facilita il nostro lavoro…
[html]
<body>
<header></header>
<nav></nav>
<aside></aside>
<div id="content">
<section>
<header></header>
<p>Il contenuto del box</p>
<footer></footer>
</section>
<section>
<header></header>
<p>Un altro box</p>
<footer></footer>
</section>
</div>
<footer></footer>
</body>
[/html]
Quasi tutti i div sono scomparsi e al loro posto troviamo alcuni tag che hanno un nome chiaro, intuitivo e che mantiene il codice molto più leggibile.
Inoltre, può capitare, sviluppando codice web, di dimenticare di inserire il codice di chiusura di un DIV (</div>). Quando ci accorgiamo che manca la chiusura di un div, per capire di quale si tratta è necessario navigare nell’albero della pagina web e controllare man mano tutti gli elementi.
Usare, invece, l’uniformità offerta da HTML5 ci aiuta anche in questo senso: identificare gli elementi non chiusi è più semplice e anche i tag di chiusura sono più esplicativi rispetto ad un generico (</div>).
Devo ammettere che queste novità nello sviluppo di strutture web (pur non costituendo un cambiamento radicale nella vita del programmatore) mi rende curioso di sperimentare e di capire a che livello, nelle strutture più complesse, possa costituire un vantaggio. Sarebbe interessante analizzare la percentuale di miglioramento delle strutture web in base alla complessità del codice per capire se effettivamente queste novità possano aiutare veramente chi lavora con internet.
Certamente, anche a livello di abitudini di sviluppo, il passaggio al nuovo metodo di programmazione web non sarà veloce. Abbiamo, quindi, tutto il tempo per sperimentare il codice con tranquillità, così che, settimana prossima potremo approfondire insieme i vari elementi utilizzati oggi.
