{"id":164040,"date":"2024-12-15T09:00:00","date_gmt":"2024-12-15T08:00:00","guid":{"rendered":"https:\/\/gtechgroup.it\/blog\/collegare-css-javascript-pagina-html\/"},"modified":"2024-12-15T09:00:00","modified_gmt":"2024-12-15T08:00:00","slug":"collegare-css-javascript-pagina-html","status":"publish","type":"post","link":"https:\/\/gtechgroup.it\/blog\/collegare-css-javascript-pagina-html\/","title":{"rendered":"Come Collegare CSS e JavaScript a una Pagina HTML"},"content":{"rendered":"

Ogni pagina web moderna si basa su tre tecnologie fondamentali: HTML<\/strong> per la struttura, CSS<\/strong> per la presentazione visiva e JavaScript<\/strong> per l’interattivit\u00e0. Sapere come collegare correttamente i fogli di stile e gli script a un documento HTML \u00e8 una competenza essenziale per qualsiasi sviluppatore web. In questa guida analizzeremo tutti i metodi disponibili, le best practice e le implicazioni sulle performance.<\/p>\n

Il Tag link per i Fogli di Stile CSS Esterni<\/h2>\n

Il metodo pi\u00f9 comune e consigliato per includere CSS in una pagina HTML \u00e8 attraverso il tag <link><\/code>, posizionato all’interno della sezione <head><\/code> del documento. Questo tag crea un collegamento tra il documento HTML e un file CSS esterno, permettendo di separare completamente la struttura dalla presentazione.<\/p>\n

La sintassi base del tag <link><\/code> per un foglio di stile \u00e8 la seguente: si utilizza l’attributo rel<\/strong> con valore “stylesheet” per indicare la relazione tra i documenti, l’attributo href<\/strong> per specificare il percorso del file CSS e, opzionalmente, l’attributo type<\/strong> con valore “text\/css”, anche se in HTML5 questo non \u00e8 pi\u00f9 obbligatorio poich\u00e9 il browser lo assume come predefinito.<\/p>\n

I vantaggi dell’utilizzo di fogli di stile esterni sono molteplici. Innanzitutto, un singolo file CSS pu\u00f2 essere condiviso tra pi\u00f9 pagine, garantendo coerenza visiva<\/strong> in tutto il sito. Inoltre, il browser memorizza nella cache il file CSS dopo il primo caricamento, riducendo i tempi di caricamento delle pagine successive. Infine, la separazione tra contenuto e presentazione rende il codice pi\u00f9 manutenibile e organizzato.<\/p>\n

\u00c8 possibile includere pi\u00f9 fogli di stile nella stessa pagina, e l’ordine di inclusione \u00e8 importante: le regole definite nei file caricati successivamente hanno priorit\u00e0 su quelle precedenti, a parit\u00e0 di specificit\u00e0. Questo meccanismo, noto come cascading<\/strong>, \u00e8 alla base del funzionamento dei CSS.<\/p>\n

CSS Incorporato con il Tag style<\/h2>\n

Un’alternativa ai fogli di stile esterni \u00e8 l’utilizzo del tag <style><\/code>, che permette di definire regole CSS direttamente all’interno del documento HTML. Anche questo tag viene posizionato nella sezione <head><\/code> e contiene le dichiarazioni CSS tra i suoi tag di apertura e chiusura.<\/p>\n

Il CSS incorporato \u00e8 utile in situazioni specifiche, come quando si desidera applicare stili critici<\/strong> che devono essere disponibili immediatamente senza attendere il caricamento di un file esterno. Questa tecnica, nota come critical CSS<\/strong>, migliora significativamente le metriche di rendering iniziale della pagina, un fattore importante per i Core Web Vitals.<\/p>\n

Tuttavia, il CSS incorporato presenta degli svantaggi: non pu\u00f2 essere memorizzato nella cache separatamente dal documento HTML, aumenta le dimensioni della pagina e non pu\u00f2 essere riutilizzato tra pagine diverse. Per questi motivi, \u00e8 generalmente consigliato utilizzarlo solo per il CSS critico above-the-fold e caricare il resto tramite file esterni.<\/p>\n

CSS Inline con l’Attributo style<\/h2>\n

Il terzo metodo per applicare stili CSS \u00e8 l’utilizzo dell’attributo style<\/strong> direttamente sugli elementi HTML. Questo approccio, noto come CSS inline<\/strong>, ha la massima specificit\u00e0 tra i tre metodi e sovrascrive qualsiasi regola proveniente da fogli di stile esterni o incorporati.<\/p>\n

Il CSS inline \u00e8 generalmente sconsigliato per diversi motivi: mescola struttura e presentazione, rende il codice difficile da manutenere, non pu\u00f2 utilizzare pseudo-classi o media query, e non beneficia della cache del browser. Tuttavia, pu\u00f2 essere utile in contesti specifici come le email HTML<\/strong>, dove il supporto per i fogli di stile esterni \u00e8 limitato, o per sovrascrivere stili in situazioni di emergenza.<\/p>\n

In ambito di sviluppo moderno, i framework CSS-in-JS generano CSS inline in modo programmato, ma questo \u00e8 un approccio diverso dall’inserimento manuale di attributi style nel markup.<\/p>\n

Il Tag script per JavaScript<\/h2>\n

Per aggiungere JavaScript a una pagina HTML, si utilizza il tag <script><\/code>. Come per il CSS, esistono due approcci principali: l’inclusione di un file esterno tramite l’attributo src<\/strong>, oppure l’inserimento del codice JavaScript direttamente tra i tag di apertura e chiusura.<\/p>\n

Quando si utilizza l’attributo src per collegare un file JavaScript esterno, \u00e8 importante ricordare che il tag <script><\/code> non \u00e8 un tag auto-chiudente: \u00e8 sempre necessario includere il tag di chiusura <\/script><\/code>, anche se non contiene codice inline. Omettere il tag di chiusura \u00e8 un errore comune che pu\u00f2 causare malfunzionamenti della pagina.<\/p>\n

La posizione del tag <script><\/code> nel documento \u00e8 cruciale per le performance. Tradizionalmente, gli script venivano inseriti alla fine del <body><\/code> per evitare il blocco del rendering della pagina. Quando il browser incontra un tag script, infatti, interrompe il parsing del documento HTML per scaricare ed eseguire lo script, causando un ritardo nella visualizzazione del contenuto. Per approfondire la struttura del documento HTML e la corretta organizzazione di <head><\/code> e <body><\/code>, puoi consultare la nostra guida sulla struttura del documento HTML<\/a>.<\/p>\n

Gli Attributi async e defer<\/h2>\n

HTML5 ha introdotto due attributi fondamentali per il tag <script><\/code> che permettono di controllare il comportamento di caricamento degli script: async<\/strong> e defer<\/strong>. Entrambi consentono al browser di continuare il parsing del documento HTML mentre scarica lo script in background, ma differiscono nel momento dell’esecuzione.<\/p>\n

L’attributo async<\/strong> indica al browser di scaricare lo script in modo asincrono e di eseguirlo non appena il download \u00e8 completato, indipendentemente dallo stato del parsing HTML. Questo significa che gli script con async possono essere eseguiti in un ordine diverso da quello in cui appaiono nel documento. \u00c8 ideale per script indipendenti come analytics, widget social o pubblicit\u00e0.<\/p>\n

L’attributo defer<\/strong>, invece, indica al browser di scaricare lo script in background ma di attendere il completamento del parsing HTML prima di eseguirlo. Gli script con defer vengono eseguiti nell’ordine in cui appaiono nel documento, rendendoli la scelta migliore per script che dipendono dal DOM o che hanno dipendenze reciproche.<\/p>\n

La regola generale \u00e8: utilizzare defer<\/strong> per la maggior parte degli script che interagiscono con il DOM, e async<\/strong> solo per script completamente indipendenti. Entrambi gli attributi funzionano esclusivamente con script esterni (quelli con attributo src) e vengono ignorati per gli script inline.<\/p>\n

Best Practice per l’Ordine di Caricamento<\/h2>\n

L’ordine in cui CSS e JavaScript vengono caricati ha un impatto significativo sulle performance<\/strong> della pagina e sull’esperienza utente. Ecco le best practice raccomandate:<\/p>\n