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 :
<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 !
<!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). |
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 |