La balise HTML <base>

La balise HTML <base> définit une URL absolue (de base) unique que le navigateur utilise pour résoudre toutes les URL relatives du document — liens, images, feuilles de style, scripts et actions de formulaires. Elle peut également définir un target par défaut afin que les liens s'ouvrent dans une fenêtre ou un onglet particulier sans répéter target sur chaque élément <a>.

Cette page explique ce que fait <base>, quand l'utiliser, les attributs qu'elle accepte, et le piège classique que la plupart des gens rencontrent la première fois : comment <base href> modifie le comportement des liens d'ancrage sur la même page.

Pourquoi et quand utiliser `<base>`

<base> déplace le « point de départ » pour la résolution des chemins relatifs. Sans elle, une URL relative est résolue par rapport à l'adresse propre du document. Avec elle, toutes les URL relatives sont résolues par rapport à la valeur href spécifiée. C'est parfois exactement ce qu'il faut :

Ressources servies depuis un CDN. Si votre balisage utilise des chemins relatifs tels que img/logo.png mais que les fichiers réels se trouvent sur un CDN, un simple <base href="https://cdn.example.com/assets/"> les fait tous pointer vers le CDN sans modifier chaque chemin individuellement.
Migrations de site et reverse proxies. Lorsqu'un document est déplacé ou servi sous un chemin différent de celui pour lequel il a été rédigé, <base> permet de maintenir la résolution de ses liens relatifs vers l'emplacement d'origine.
Générateurs de sites statiques et moteurs de gabarits. Un gabarit partagé rendu à de nombreuses URL peut déclarer une base unique pour que les partiels n'aient pas besoin de connaître leur profondeur d'imbrication.

À utiliser avec parcimonie. Parce que <base> affecte toutes les URL relatives de la page à la fois — y compris celles que vous n'avez pas écrites — c'est un outil peu précis. La plupart des projets modernes préfèrent des chemins relatifs ou racine-relatifs corrects, ou une étape de build, plutôt qu'un <base> global.

Accéder à l'URL de base depuis JavaScript

Vous pouvez lire l'URL de base résolue d'un document avec document.baseURI. Si le document ne contient pas d'élément <base>, cette propriété revient à l'adresse propre du document (document.location.href).

// With <base href="https://www.w3docs.com/"> in the document:
console.log(document.baseURI); // "https://www.w3docs.com/"

Syntaxe

La balise <base> est un élément vide, ce qui signifie que la balise fermante n'est pas obligatoire. En HTML5, la barre oblique de fermeture automatique est optionnelle, mais en XHTML, la balise <base> doit être fermée (<base />).

Astuce

Une seule balise <base> peut être utilisée sur la page, et elle doit être placée dans l'élément <head>. Vous devez l'insérer le plus tôt possible, car son action s'étend à partir de l'endroit où elle est spécifiée.

Danger

Si vous utilisez plusieurs éléments <base>, seuls les premiers attributs href et target seront pris en compte. Les suivants seront ignorés.

Exemple de la balise HTML `<base>`

Le document suivant définit les deux attributs simultanément. L'URL de base devient https://www.w3docs.com/, donc le lien relatif /css3-maker/border-radius est résolu en https://www.w3docs.com/css3-maker/border-radius. Et comme target="_blank" est présent sur <base>, le lien s'ouvre dans un nouvel onglet même si l'élément <a> lui-même n'a pas de 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>

Modifiez l'extrait ci-dessous : un clic sur le lien ouvre w3docs.com dans un nouvel onglet, entièrement piloté par la balise <base>.

« Essayez vous-même » n'est pas disponible pour cet exemple.

Utiliser `href` seul (cas le plus courant)

La plupart du temps, vous souhaitez uniquement rediriger les URL relatives, sans modifier la façon dont les liens s'ouvrent. Définissez href et omettez 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>

Utiliser `target` seul

Vous pouvez définir un target par défaut sans modifier l'URL de base. Dans ce cas, les URL relatives sont toujours résolues par rapport à l'adresse propre du document, mais chaque lien s'ouvre dans un nouvel onglet :

<head>
  <base target="_blank" />
</head>
<body>
  <!-- no target attribute, yet opens in a new tab -->
  <a href="/pricing">Pricing</a>
</body>

Avertissement

Lorsque les liens s'ouvrent dans un nouvel onglet via target="_blank", ajoutez rel="noopener noreferrer" sur les éléments <a> pour des raisons de sécurité. <base> ne peut pas définir rel, donc cet attribut doit figurer sur chaque lien. Sans noopener, la page ouverte peut accéder à votre page via window.opener et tenter une attaque de type tabnabbing.

Piège : `<base href>` casse les liens d'ancrage sur la même page

C'est la surprise la plus fréquente. Un lien de fragment tel que <a href="#section"> est une URL relative — il s'agit simplement d'un fragment sans chemin. Lorsqu'un <base href> est présent, le navigateur résout ce fragment par rapport à l'URL de base, et non par rapport à la page courante.

Ainsi, avec <base href="https://www.w3docs.com/">, cliquer sur <a href="#section"> ne fait pas défiler jusqu'à l'élément de la page ayant id="section". À la place, le navigateur navigue vers https://www.w3docs.com/#section — généralement une page entièrement différente.

<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 solution consiste à écrire les ancres de la même page sous forme d'URL absolues ou racine-relatives incluant le chemin de la page courante, afin que le fragment renvoie bien au bon document. En savoir plus sur la résolution des chemins dans Chemins de fichiers HTML.

Attributs

La balise <base> peut contenir l'attribut href, l'attribut target, ou les deux. Si aucun n'est spécifié, la balise n'a aucun effet.

Attribut	Valeur	Définition
href	URL absolue	L'URL de base pour toutes les URL relatives de la page. Elle doit être une URL absolue (une valeur relative est peu fiable et se résout par rapport à l'adresse propre du document).
target	nom du contexte de navigation	Cible par défaut pour les hyperliens et les formulaires. Accepte les quatre mots-clés réservés ci-dessous, ou le nom de n'importe quel contexte de navigation (par exemple le `name` d'une iframe ou d'une fenêtre nommée).

Les valeurs de mots-clés réservés pour target sont :

Valeur	Définition
`_blank`	Ouvre le lien dans une nouvelle fenêtre ou un nouvel onglet.
`_self`	Ouvre le lien dans la fenêtre courante (comportement par défaut).
`_parent`	Ouvre le lien dans le contexte de navigation parent.
`_top`	Ouvre le lien dans le contexte de navigation de plus haut niveau (complet).

Un nom personnalisé tel que target="preview" cible un contexte de navigation portant ce nom — par exemple <iframe name="preview"> — et est créé comme une nouvelle fenêtre si aucun contexte de ce nom n'existe.

Mises en garde et interactions

<link rel="canonical">. Une URL canonique doit être écrite sous forme d'URL absolue. Ne comptez pas sur <base> pour transformer un <link rel="canonical" href="..."> relatif en adresse correcte — rendez la valeur canonique absolue par elle-même. Voir <link>.
<form action="">. L'attribut action d'un formulaire est également résolu par rapport à l'URL de base. Un action="" vide soumet normalement vers la page courante ; avec un <base href>, il soumet vers l'URL de base, ce qui est rarement intentionnel.
L'emplacement est important. <base> n'affecte que les URL qui apparaissent après elle dans le source. Placez-la tout en haut du <head>, avant tout élément <link>, <script> ou autre élément comportant une URL.

Chapitres associés

Entraînement

Pratique

Que fait la balise base en HTML ?

Elle définit l'URL de base pour toutes les URL relatives, et une cible par défaut pour les hyperliens et les formulaires, dans le document.Elle est utilisée pour intégrer des contenus multimédias dans une page web.Elle définit un ensemble de liens de navigation.Elle ouvre uniquement les liens dans une nouvelle fenêtre et ne peut pas modifier les URL relatives.Elle ajoute un titre à un document web.

Pourquoi et quand utiliser <base>