Introduzione
Quando un progetto HTML inizia a crescere, tenere tutto dentro la stessa pagina diventa rapidamente scomodo. Separare il codice in file diversi è una scelta fondamentale per mantenere il progetto ordinato, leggibile e facile da aggiornare. In particolare, collegare correttamente CSS esterni e JavaScript esterni permette di distinguere nettamente struttura, stile e comportamento.
In questo tutorial vedremo una struttura pratica e molto usata per includere risorse esterne in una pagina HTML. L’obiettivo non è solo “far funzionare il collegamento”, ma farlo nel modo giusto, con una struttura chiara e adatta a progetti reali. Useremo un esempio concreto: una piccola scheda prodotto con stile dedicato e un pulsante interattivo gestito da JavaScript.
Questa impostazione è utile sia per siti semplici sia per applicazioni più grandi, perché riduce la duplicazione, migliora la manutenzione e rende più semplice il lavoro in team.
Codice completo
Di seguito trovi un esempio completo di pagina HTML che include un file CSS esterno e un file JavaScript esterno. Il codice è commentato per aiutarti a capire dove inserire ogni parte.
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scheda prodotto</title>
<!-- Collegamento al foglio di stile esterno -->
<link rel="stylesheet" href="css/stile.css">
</head>
<body>
<main class="card">
<h1>Cuffie Wireless Pro</h1>
<p>Audio nitido, batteria lunga durata e design leggero per l’uso quotidiano.</p>
<ul>
<li>Autonomia: 30 ore</li>
<li>Ricarica rapida</li>
<li>Connessione Bluetooth 5.3</li>
</ul>
<p class="prezzo">Prezzo: 89,90 €</p>
<button id="btnAcquista" type="button">Aggiungi al carrello</button>
<p id="messaggio" aria-live="polite"></p>
</main>
<!-- Collegamento allo script esterno, posizionato prima della chiusura del body -->
<script src="js/app.js"></script>
</body>
</html>Per completezza, ecco anche un esempio minimale dei file esterni richiamati dalla pagina:
/* file: css/stile.css */
body {
font-family: Arial, sans-serif;
background: #f4f7fb;
margin: 0;
padding: 2rem;
}
.card {
max-width: 420px;
margin: 0 auto;
background: white;
padding: 1.5rem;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.prezzo {
font-weight: bold;
color: #0b6bcb;
}
button {
background: #0b6bcb;
color: white;
border: 0;
padding: 0.8rem 1rem;
border-radius: 8px;
cursor: pointer;
}// file: js/app.js
const bottone = document.getElementById("btnAcquista");
const messaggio = document.getElementById("messaggio");
bottone.addEventListener("click", () => {
messaggio.textContent = "Prodotto aggiunto al carrello!";
});Spiegazione
La struttura di base di una pagina HTML che usa file esterni segue una logica molto semplice:
- Nel tag <head> si inseriscono le risorse che servono per definire l’aspetto della pagina, come il CSS.
- Prima della chiusura di </body> si inseriscono spesso gli script JavaScript, così il contenuto della pagina è già disponibile quando il codice viene eseguito.
1. Collegare il CSS esterno
Il foglio di stile esterno si collega con il tag <link>. Gli attributi principali sono:
- rel="stylesheet": indica che il file è un foglio di stile.
- href="css/stile.css": specifica il percorso del file CSS.
Collocare il CSS nel <head> è una pratica corretta perché il browser può applicare gli stili prima di mostrare la pagina, riducendo il rischio di contenuti “non stilizzati” per un breve istante.
2. Collegare il JavaScript esterno
Lo script esterno si collega con il tag <script>. Nell’esempio è inserito alla fine del <body>. Questo approccio è molto pratico perché il DOM, cioè la struttura HTML della pagina, è già stato caricato quando il codice JavaScript parte.
Se il file JS venisse eseguito troppo presto, potrebbe cercare elementi che non esistono ancora nel DOM, causando errori come null o undefined. Posizionare lo script in fondo alla pagina evita spesso questo problema in modo semplice ed efficace.
3. Perché separare HTML, CSS e JS
Separare i file non è solo una questione di ordine. Porta vantaggi concreti:
- Manutenibilità: modificare gli stili o la logica è più facile.
- Riutilizzo: lo stesso CSS o JS può essere usato in più pagine.
- Collaborazione: più persone possono lavorare sul progetto senza sovrapporsi troppo.
- Prestazioni: i file esterni possono essere memorizzati nella cache del browser.
4. Il ruolo dei percorsi
Nel codice abbiamo usato percorsi relativi come css/stile.css e js/app.js. Questo significa che il browser cerca i file partendo dalla posizione del documento HTML. Una struttura tipica del progetto potrebbe essere:
- index.html
- css/ con i file di stile
- js/ con i file JavaScript
Usare una struttura di cartelle chiara aiuta molto quando il progetto cresce.
Best practice
Per includere CSS e JavaScript esterni in modo professionale, conviene seguire alcune regole pratiche:
- Usa percorsi coerenti: mantieni una struttura di cartelle semplice e prevedibile.
- Evita CSS e JS inline quando il progetto cresce: vanno bene per test veloci, ma non per applicazioni mantenibili.
- Metti il CSS nel <head>: migliora la resa iniziale della pagina.
- Metti lo script in fondo al <body> se non usi attributi come defer o async.
- Usa id o classi in modo chiaro: il JavaScript deve trovare facilmente gli elementi da controllare.
- Evita nomi generici come style.css o script.js se il progetto è ampio: meglio nomi più descrittivi, ad esempio prodotti.css o carrello.js.
- Testa i percorsi: un errore nel path è una delle cause più comuni di file non caricati.
Un’altra buona pratica è mantenere il JavaScript focalizzato sul comportamento e il CSS esclusivamente sulla presentazione. In questo modo il codice diventa più leggibile e più facile da aggiornare nel tempo.
Riepilogo
La struttura corretta per includere CSS e JavaScript esterni in HTML è semplice ma strategica. Il CSS si collega nel <head> con <link>, mentre il JavaScript si inserisce spesso alla fine del <body> con <script>. Questa scelta aiuta a mantenere la pagina ordinata, a ridurre gli errori e a migliorare la manutenzione del progetto.
Ricorda i punti chiave:
- HTML per la struttura.
- CSS esterno per il design.
- JavaScript esterno per l’interattività.
- Percorsi corretti e file ben organizzati sono essenziali.
Se applichi questa impostazione fin dall’inizio, costruirai pagine più pulite e pronte per evolvere in progetti più complessi.
Approfondisci con risorse ufficiali
- MDN Web Docs - <link>: documentazione completa per collegare fogli di stile esterni.
- MDN Web Docs - <script>: guida ufficiale all’uso dei file JavaScript esterni.
- MDN Web Docs - HTML: riferimento generale alla struttura dei documenti HTML.
- WHATWG HTML Standard: specifica ufficiale del linguaggio HTML.
Consultare la documentazione ufficiale è il modo migliore per consolidare le basi e verificare il comportamento reale dei tag in diversi contesti.