Tag HTML <base>
Il tag HTML <base> imposta un URL base assoluto per tutti gli URL relativi e un target predefinito per i link. Attributi, usi e avvertenze.
Il tag HTML <base> imposta un singolo URL assoluto (base) che il browser usa per risolvere ogni URL relativo nel documento — link, immagini, fogli di stile, script e azioni dei form. Può anche impostare un target predefinito in modo che i link si aprano in una determinata finestra o scheda, senza dover ripetere target su ciascun elemento <a>.
Questa pagina spiega cosa fa <base>, quando è davvero utile, gli attributi che accetta e l'insidia più comune che sorprende la maggior parte delle persone la prima volta: come <base href> modifica il comportamento dei link ad ancoraggi sulla stessa pagina.
Perché e quando usare <base>
<base> sposta il "punto di partenza" per i percorsi relativi. Senza di esso, un URL relativo viene risolto rispetto all'indirizzo del documento stesso. Con esso, ogni URL relativo viene risolto rispetto all'href specificato. Questo è esattamente ciò che si desidera in alcuni casi:
- Asset serviti da una CDN. Se il markup usa percorsi relativi come
img/logo.pngma i file reali si trovano su una CDN, un singolo<base href="https://cdn.example.com/assets/">li punta tutti alla CDN senza dover modificare ogni percorso. - Migrazioni di siti e reverse proxy. Quando un documento viene spostato o servito sotto un percorso diverso da quello per cui è stato creato,
<base>può mantenere i suoi link relativi risolti nella posizione originale. - Generatori di siti statici e template. Un layout condiviso che viene renderizzato su molti URL può dichiarare una base comune, così i partial non hanno bisogno di sapere quanto in profondità sono nidificati.
Usarlo con parsimonia. Poiché <base> influisce su ogni URL relativo della pagina in una sola volta — inclusi quelli che non hai scritto tu — è uno strumento grossolano. La maggior parte dei progetti moderni preferisce percorsi relativi o root-relativi corretti, o un passaggio di build, invece di un <base> globale.
Accesso all'URL base da JavaScript
Puoi leggere l'URL base risolto di un documento con document.baseURI. Se il documento non ha un elemento <base>, questa proprietà torna all'indirizzo proprio del documento (document.location.href).
// With <base href="https://www.w3docs.com/"> in the document:
console.log(document.baseURI); // "https://www.w3docs.com/"Sintassi
Il tag <base> è un elemento vuoto, il che significa che il tag di chiusura non è obbligatorio. In HTML5, la barra di chiusura automatica è opzionale, ma in XHTML il tag <base> deve essere chiuso (<base />).
È possibile usare un solo tag <base> nella pagina, e deve essere inserito nell'elemento <head>. Deve essere inserito il prima possibile, poiché la sua azione si estende dal punto in cui viene specificato.
Se si usano più elementi <base>, verranno rispettati solo il primo attributo href e il primo attributo target. Gli altri verranno ignorati.
Esempio del tag HTML <base>
Il documento seguente imposta entrambi gli attributi contemporaneamente. L'URL base diventa https://www.w3docs.com/, quindi il link relativo /css3-maker/border-radius si risolve in https://www.w3docs.com/css3-maker/border-radius. E poiché target="_blank" è presente su <base>, il link si apre in una nuova scheda anche se l'elemento <a> stesso non ha un target.
<!DOCTYPE html>
<html>
<head>
<title>HTML base tag</title>
<base href="https://www.w3docs.com/" target="_blank" />
</head>
<body>
<a href="/css3-maker/border-radius">Try CSS Maker Tool</a>
</body>
</html>Modifica il frammento qui sotto: facendo clic sul link si apre w3docs.com in una nuova scheda, guidato interamente dal tag <base>.
Uso di solo href (il caso comune)
Nella maggior parte dei casi si desidera solo reindirizzare gli URL relativi, non cambiare il modo in cui i link si aprono. Imposta href e lascia fuori target:
<head>
<base href="https://cdn.example.com/assets/" />
</head>
<body>
<!-- resolves to https://cdn.example.com/assets/img/logo.png -->
<img src="img/logo.png" alt="Logo" />
</body>Uso di solo target
Puoi impostare un target predefinito senza cambiare l'URL base. In questo caso, gli URL relativi vengono ancora risolti rispetto all'indirizzo proprio del documento, ma ogni link si apre in una nuova scheda:
<head>
<base target="_blank" />
</head>
<body>
<!-- no target attribute, yet opens in a new tab -->
<a href="/pricing">Pricing</a>
</body>Quando i link si aprono in una nuova scheda tramite target="_blank", aggiungi rel="noopener noreferrer" sugli elementi <a> per motivi di sicurezza. <base> non può impostare rel, quindi deve essere presente su ciascun link. Senza noopener, la pagina aperta può accedere alla tua pagina tramite window.opener e tentare il tabnabbing.
Insidia: <base href> rompe i link ad ancoraggi sulla stessa pagina
Questa è la sorpresa più comune. Un link a frammento come <a href="#section"> è un URL relativo — è solo un frammento senza percorso. Quando è presente un <base href>, il browser risolve quel frammento rispetto all'URL base, non rispetto alla pagina corrente.
Quindi con <base href="https://www.w3docs.com/">, facendo clic su <a href="#section"> non si scorre fino all'elemento nella pagina con id="section". Si naviga invece verso https://www.w3docs.com/#section — di solito una pagina completamente diversa.
<head>
<base href="https://www.w3docs.com/" />
</head>
<body>
<!-- BAD: navigates to https://www.w3docs.com/#contact -->
<a href="#contact">Contact</a>
<!-- GOOD: stays on the current page -->
<a href="/current-page#contact">Contact</a>
<h2 id="contact">Contact</h2>
</body>La soluzione è scrivere gli ancoraggi sulla stessa pagina come URL assoluti o root-relativi che includono il percorso della pagina corrente, in modo che il frammento atterri sul documento giusto. Per saperne di più sulla risoluzione dei percorsi, consulta Percorsi di file HTML.
Attributi
Il tag <base> può contenere l'attributo href, l'attributo target, o entrambi. Se non viene specificato nessuno dei due, il tag non ha alcun effetto.
| Attributo | Valore | Definizione |
|---|---|---|
| href | URL assoluto | L'URL base per tutti gli URL relativi nella pagina. Dovrebbe essere un URL assoluto (un valore relativo è inaffidabile e viene risolto rispetto all'indirizzo proprio del documento). |
| target | nome del contesto di navigazione | Target predefinito per hyperlink e form. Accetta le quattro parole chiave riservate elencate di seguito, oppure il nome di qualsiasi contesto di navigazione (ad esempio il name di un iframe o di una finestra con nome). |
I valori delle parole chiave riservate per target sono:
| Valore | Definizione |
|---|---|
_blank | Apre il link in una nuova finestra o scheda. |
_self | Apre il link nella finestra corrente (valore predefinito). |
_parent | Apre il link nel contesto di navigazione padre. |
_top | Apre il link nel contesto di navigazione superiore (completo). |
Un nome personalizzato come target="preview" punta a un contesto di navigazione con quel nome — ad esempio <iframe name="preview"> — e viene creato come nuova finestra se non ne esiste nessuna con quel nome.
Avvertenze e interazioni
<link rel="canonical">. Un URL canonico dovrebbe essere scritto come URL assoluto. Non fare affidamento su<base>per trasformare un<link rel="canonical" href="...">relativo nell'indirizzo corretto — rendi il valore canonico assoluto autonomamente. Vedi<link>.<form action="">. L'actiondi un form viene anche essa risolta rispetto all'URL base. Unaction=""vuoto di norma invia al form alla pagina corrente; con un<base href>invia invece all'URL base, il che raramente è intenzionale.- Il posizionamento è importante.
<base>influisce solo sugli URL che appaiono dopo di esso nel sorgente. Inseriscilo in cima all'elemento<head>, prima di qualsiasi<link>,<script>o altro elemento che contiene URL.