<base>

Permet de définir l'url de base pour tous les liens relatifs dans une page HTML.

La balise <base> définit une URL de base et/ou une cible par défaut pour tous les liens qui sont dans une page HTML.

On l'a déclare à l'intérieur de la balise <head> pour qu'elle puisse devenir une référence commune pour tous les éléments qui redirigent l'utilisateur comme la balise <a>, <img> ou <link> par exemple.

Attention quand elle est utilisée, elle ne doit être définie qu'une seule fois dans le document HTML. 👀

Structure et syntaxe de la balise <base>

Structure et syntaxe de base

La balise <base> est une balise autonome, c'est-à-dire qu'elle ne contient pas de contenu et n'a pas de balise de fermeture : elle se ferme sur elle-même.

Elle suit toujours cette structure :

HTML

<base href="[URL de base]">

On utilise donc au minimum l'attribut href pour définir l'url de base de tous les liens relatifs sur la page actuelle.

Exemple d'utilisation

Prenons un petit exemple !

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
  <base href="https://www.believemy.com" target="_blank">
</head>
<body>
  <a href="/formations">Voir les formations</a>
</body>
</html>

Dans cet exemple :

l'url d'origine est /formations ;
l'url finale sera https://believemy.com/formations.

Attributs

La balise <base> peut être utilisée à la fois pour définir l'url de base mais également la cible par défaut des liens.

Attribut	Description	Exemple
`href`	Définit l'URL de base à partir de laquelle toutes les URL relatives seront résolues.	`<base href="https://www.example.com/">`
`target`	Définit une cible par défaut pour tous les liens et formulaires du document.	`<base target="_blank">`

Pour rappel voici les valeurs possibles avec l'attribut target :

Valeur Description
_self Charge le lien dans la même fenêtre ou onglet (comportement par défaut).
_blank Ouvre le lien dans un nouvel onglet ou une nouvelle fenêtre.
_parent Charge le lien dans la fenêtre parent du document si présent.
_top Charge le lien dans la fenêtre la plus externe (au niveau du document racine).

Valeur	Description
`_self`	Charge le lien dans la même fenêtre ou onglet (comportement par défaut).
`_blank`	Ouvre le lien dans un nouvel onglet ou une nouvelle fenêtre.
`_parent`	Charge le lien dans la fenêtre parent du document si présent.
`_top`	Charge le lien dans la fenêtre la plus externe (au niveau du document racine).

Compatibilité des navigateurs

L'instruction <base> est compatible avec tous les navigateurs.

Elément	Google Chrome	Safari	Mozilla Firefox	Edge
<base>	Oui	Oui	Oui	Oui