HTML è il linguaggio standard per realizzare pagine web ma non è facile da estendere e la manutenzione del codice spesso richiede molto tempo. Spesso c’è bisogno di altri linguaggi di livello superiore per generare dinamicamente le pagine HTML come ad esempio PHP. Talvolta però i progetti da realizzare sono talmente piccoli da non giustificare l’utilizzo di un linguaggio di scripting ed è sufficiente una funzione standard come includere file HTML in un altro per rendere il codice riutilizzabile e di facile manutenzione.
Vediamo allora come includere file HTML in un altro utilizzando la direttiva HTML Import, una nuova caratteristica molto attesa che con molta probabilità cambierà il modo di sviluppare pagine web nei prossimi anni. Questa caratteristica non è ancora implementata ufficialmente e ad oggi (luglio 2014) l’unico browser compatibile è Chrome dalla versione 36 in poi. Questa nuova caratteristica del browser è disabilitata di default e per attivarla devi aprire la pagina chrome://flags, abilitare l’opzione Enable HTML Imports e riavviare Chrome.
Includere un file HTML è quasi come includere un foglio di stile. Si utilizza il tag <link> ma al posto di utilizzare rel=stylesheet, si usa rel=import. Facciamo un esempio includendo un file che chiameremo template.html. Il codice di importazione è questo:
<link rel="import" href="template.html">
Se apriamo la pagina web con Chrome DevTools nella tab Network possiamo vedere che Chrome carica il file template.html.
Tieni presente che il contenuto del file HTML non viene inserito subito e appeso al codice HTML della pagina, quindi al momento non apparirà nulla a video.
Come includere file HTML – Riutilizzare i contenuti
Per appendere il contenuto in un file dobbiamo scrivere alcuni comandi Javascript. In un caso normale potremmo inserire questo codice nella head della pagina ma per questo esempio lo inseriremo nel Body dopo la rel=import. E’ necessario fare questo per essere certi che lo script possa accedere agli elementi contenuti nel file importato con i loro id, classi ecc. Per iniziare selezioniamo il file con questo codice:
var getImport = document.querySelector('link[rel=import]');
Questo seleziona tutti i tag link con rel=import. Se vogliamo importare più file HTML e selezionare solo uno specifico tag link, dobbiamo aggiungere un id al tag e fare riferimento a questo id invece che al link rel come in questo esempio:
<link rel="import" id="template-file" href="template.html">
in questo caso il codice Javascript è:
var getImport = document.querySelector('#template-file');
Una volta selezionato il file, dobbiamo scegliere quale contenuto includere al file principale. Se nella tua pagina HTML hai un wrapper con un id=”content”, puoi selezionarlo in questo modo.
var getContent = getImport.import.querySelector('#content');
Ora possiamo appendere il contenuto del file usando il metodo JavaScript appendChild().
document.body.appendChild(document.importNode(getContent, true));
Il contenuto ora sarà visibile nel file principale.
Usare i figli di stile CSS
Al contrario di quanto accade con i contenuti, i fogli di stile importati vengono subito applicati al file HTML. Proviamo a creare un file style.css con in contenuto qui sotto e dopo l’importazione vedremo che verrà applicato subito il colore rosso al tag <P>
p {
color: red;
}
Ecco il risultato
Conclusioni
Ora che abbiamo visto Come includere file HTML è facile rendere modulare un sito scomponendo le parti comuni e inglobandole in file separati. Una cosa da tenere in mente è che l’utilizzo di codice Javascript rende il risultato finale invisibile ai software di analisi e ai motori di ricerca, pertanto questa caratteristica influenza la SEO del sito dove la si utilizza.
