Percorsi di File HTML
Scopri i percorsi di file HTML, le differenze tra percorsi assoluti e relativi, con esempi pratici e utili.
Un percorso di file descrive la posizione di un file all'interno della struttura delle cartelle di un sito web. Ogni volta che una pagina deve caricare o puntare a un'altra risorsa, utilizza un percorso di file per trovarla.
Questa pagina illustra i due tipi di percorsi di file — assoluti e relativi — le diverse forme che un percorso relativo può assumere e quale utilizzare in pratica. I percorsi di file vengono usati costantemente quando si lavora con:
- pagine web (nei link)
- immagini
- file JavaScript
- fogli di stile
Tipi di Percorso in Sintesi
Ogni percorso che scrivi è uno dei seguenti. Le stesse regole valgono sia che il percorso compaia in un <a href>, <img src>, <link href> o <script src>.
| Percorso | Tipo | Significato | Quando usarlo |
|---|---|---|---|
https://example.com/img/cat.jpg | URL assoluto | L'indirizzo completo, incluso il protocollo e il dominio. | Per collegare un file su un altro sito web. |
/images/cat.jpg | Relativo alla radice | Parte dalla radice del sito (lo / iniziale), indipendentemente dalla posizione della pagina corrente. | Asset comuni a tutto il sito (loghi, CSS/JS globali) condivisi tra molte pagine. |
images/cat.jpg | Relativo (stessa directory) | Parte dalla cartella della pagina corrente. Equivalente a ./images/cat.jpg. | File archiviati nella stessa posizione della pagina. |
../images/cat.jpg | Relativo (directory padre) | .. sale su di una cartella, poi scende in images. | Per raggiungere un file che si trova sopra la pagina corrente. |
Un percorso relativo alla radice è tecnicamente anch'esso un percorso relativo, ma lo / iniziale lo rende relativo alla radice del sito piuttosto che alla pagina corrente — per questo vale la pena trattarlo come una categoria a sé.
Percorsi di File Assoluti
Un percorso di file assoluto è l'URL completo per raggiungere un file, incluso il protocollo (https://) e il nome del dominio. Funziona da qualsiasi pagina perché non dipende da dove si trova la pagina corrente.
Esempio di percorso di file assoluto:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Absolute File Path Example</h2>
<img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3docs logo" style="width:300px" />
</body>
</html>Usa un URL assoluto quando la risorsa si trova su un dominio diverso (ad esempio, un'immagine ospitata su un CDN o su un altro sito).
Percorsi di File Relativi
Un percorso di file relativo punta a un file rispetto alla pagina corrente invece di specificare il dominio completo. I percorsi relativi si presentano in diverse forme.
Stessa directory
Quando il file di destinazione si trova nella stessa cartella della pagina corrente, scrivi semplicemente il nome del file. Aggiungere ./ (che significa "cartella corrente") è facoltativo e produce lo stesso risultato.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Same-Directory Path Example</h2>
<img src="images/smile.jpg" alt="Smile" width="290" height="260" />
</body>
</html>Qui images/smile.jpg viene risolto a partire dalla cartella che contiene la pagina corrente.
Directory padre
Usa ../ per salire su di un livello nella struttura delle cartelle. Ogni ../ aggiuntivo sale di un'altra cartella. Ad esempio, ../images/smile.jpg esce dalla cartella corrente e cerca una cartella images che si trova un livello più in alto.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Parent-Directory Path Example</h2>
<img src="../images/smile.jpg" alt="Smile" width="290" height="260" />
</body>
</html>Relativo alla radice
Un percorso che inizia con una barra (/) è relativo alla radice: il browser lo risolve dalla radice del sito web, ignorando la posizione della pagina corrente. Questo è utile per gli asset condivisi in tutto il sito, poiché il percorso rimane invariato indipendentemente da quanto in profondità sia annidata una pagina.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Root-Relative Path Example</h2>
<img src="/images/smile.jpg" alt="Smile" width="290" height="260" />
</body>
</html>I Percorsi Non Riguardano Solo le Immagini
Le stesse regole sui percorsi si applicano a ogni attributo che fa riferimento a un file. Un singolo documento può mescolare tutti i tipi:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<!-- root-relative stylesheet, shared site-wide -->
<link rel="stylesheet" href="/css/styles.css" />
</head>
<body>
<!-- relative link to a page in the same folder -->
<a href="about.html">About us</a>
<!-- relative link to a page one level up -->
<a href="../index.html">Home</a>
<!-- absolute link to an external site -->
<a href="https://www.w3docs.com/">W3docs</a>
<!-- relative script next to the page -->
<script src="js/app.js"></script>
</body>
</html>Buone Pratiche
Preferisci i percorsi relativi per le risorse che si trovano sul tuo stesso sito. Poiché non includono un dominio fisso nel codice, il sito continua a funzionare quando lo sposti su un nuovo dominio, passi da http a https o lo esegui localmente durante lo sviluppo. Riserva gli URL assoluti per i file ospitati su altri siti e usa i percorsi relativi alla radice per gli asset globali condivisi da molte pagine.
Per saperne di più sul collegamento delle pagine, leggi il capitolo Link HTML e per incorporare immagini con il tag <img>.