0Pricing
HTML Academy · Lezione

URL assoluti e relativi

Comprendere la differenza tra percorsi assoluti e relativi

URL assoluti e relativi è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.

Che cos'è un URL?

Un URL (Uniform Resource Locator) è l'indirizzo completo di una risorsa sul web.

Un URL è composto dalle seguenti parti:

https://example.com:443/products/widget?color=red#reviews
│     │           │   │               │          │
│     │           │   │               │          └─ Fragment
│     │           │   │               └─ Query string
│     │           │   └─ Path
│     │           └─ Port
│     └─ Domain
└─ Protocol

URL assoluti

Un URL assoluto contiene l'indirizzo completo: protocollo, dominio e percorso:

<a href="https://example.com/about">About</a>
<img src="https://cdn.example.com/logo.png" alt="Logo">

<!-- Absolute URLs work from anywhere -->
<!-- Use for: external sites, CDN resources, canonical tags -->

URL relativi

Un URL relativo è relativo alla posizione della pagina corrente: non sono necessari né il protocollo né il dominio:

<!-- Current page: https://example.com/blog/post.html -->

<a href="other-post.html">Same folder</a>
<!-- → https://example.com/blog/other-post.html -->

<a href="../products">Parent folder</a>
<!-- → https://example.com/products -->

<a href="/contact">Root relative</a>
<!-- → https://example.com/contact -->

Tre tipi di URL relativi

Gli URL relativi hanno tre forme:

<!-- 1. Relative to current file's folder -->
<a href="page.html">Same directory</a>

<!-- 2. Root-relative: starts with / (relative to domain root) -->
<a href="/about">Root-relative</a>

<!-- 3. Protocol-relative: starts with // -->
<img src="//cdn.example.com/img.png" alt="">

Navigare con ../ --

Utilizzi ../ per risalire di un livello nella directory:

<!-- File structure:
/
├── index.html
├── about.html
└── blog/
    ├── post1.html
    └── post2.html
-->

<!-- In blog/post1.html: -->
<a href="post2.html">Post 2</a>          <!-- same folder -->
<a href="../">Home</a>                   <!-- up one level -->
<a href="../about.html">About</a>        <!-- up then file -->

Quando usare URL assoluti o relativi

Linee guida:

  • Risorse esterne — sempre assolute: https://...
  • Risorse CDN — assolute o relative al protocollo
  • Navigazione interna — gli URL relativi alla root (/page) sono l'opzione più sicura
  • Stessa directory — gli URL relativi (page.html) sono più pratici

Gli URL relativi alla root sono portabili

Gli URL relativi alla root (/path) continuano a funzionare anche quando si spostano le pagine:

<!-- If this page moves from /blog/post.html to /articles/post.html -->

<!-- Root-relative STILL works: -->
<a href="/contact">Contact</a>  <!-- always → example.com/contact -->

<!-- Relative MAY break: -->
<a href="../contact.html">Contact</a>  <!-- different result in new location -->

L'elemento base

L'elemento <base> in <head> imposta l'URL di base per tutti i link relativi:

<head>
  <base href="https://example.com/docs/">
</head>
<body>
  <!-- This resolves to: https://example.com/docs/guide.html -->
  <a href="guide.html">Guide</a>
</body>

Codifica degli URL

I caratteri speciali negli URL devono essere codificati in percentuale:

<!-- Space in URL path -->
<a href="/pages/my%20page.html">My Page</a>

<!-- Query string with special characters -->
<a href="/search?q=HTML%20%26%20CSS">Search HTML & CSS</a>

<!-- Common encodings:
  space → %20
  & → %26
  = → %3D
  # → %23
-->

URL canonici

Quando una pagina è raggiungibile tramite più URL, utilizzi un tag canonical per dichiarare quello preferito:

<head>
  <!-- Prevents duplicate content SEO penalty -->
  <link rel="canonical" href="https://example.com/blog/post">
</head>
<!-- Both /blog/post and /blog/post.html may serve the same content -->
<!-- Canonical tells Google which URL to index -->

Buone pratiche per gli URL

Segua queste convenzioni per gli URL:

  • Utilizzi solo lettere minuscole
  • Utilizzi i trattini, non i caratteri di sottolineatura, per separare le parole
  • Mantenga gli URL brevi e descrittivi
  • Eviti i caratteri speciali: li codifichi
  • Utilizzi URL relativi alla root per i link interni

Verifica rapida

Ha un file in /blog/post.html e vuole creare un link a /about.html. Qual è l'URL relativo più sicuro?

Riepilogo: URL assoluti e relativi

Riepilogo dei tipi di URL:

  • Assoluto — URL completo, inclusi protocollo e dominio
  • Relativo alla root — inizia con /, relativo alla root del dominio
  • Relativo — relativo alla posizione del file corrente
  • ../ — risale di un livello nella directory
  • <base href> — imposta la base per tutti gli URL relativi

Domande Frequenti

La lezione «URL assoluti e relativi» è gratuita?

Sì — il testo completo di «URL assoluti e relativi» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.

Cosa imparerò in «URL assoluti e relativi»?

Comprendere la differenza tra percorsi assoluti e relativi Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare HTML Academy?

Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «URL assoluti e relativi»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione HTML Academy?

Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. L’elemento anchor e l’attributo href
  2. URL assoluti e relativi
  3. Aprire i link in nuove schede e attributo download
  4. Collegare sezioni e identificatori fragment
← Torna a HTML Academy