OUJOOD.COM
Présentation de la balise <base> en HTML5
LES BALISES HTML
La balise <base> est un élément HTML fondamental qui permet de définir une URL de référence absolue appliquée automatiquement à tous les liens relatifs, images et ressources d'une page web. Elle constitue un outil puissant pour centraliser la gestion des chemins d'accès dans vos documents HTML et simplifier la maintenance de sites complexes.
Placée obligatoirement dans l'élément <head>, la balise <base> influence l'interprétation de toutes les URL relatives présentes dans le document : liens hypertexte, images, feuilles de style, scripts et formulaires. C'est un élément de type void element (élément vide) qui ne possède pas de balise fermante en HTML5.
Syntaxe et fermeture de la balise <base />
La syntaxe de la balise <base> diffère selon la version HTML utilisée :
En HTML5, la balise <base> est un void element sans balise de fermeture :
<base href="https://exemple.com/">
En XHTML, la balise doit obligatoirement être auto-fermée avec un slash :
<base href="https://exemple.com/" />
La balise <base> déclare un chemin absolu de référence utilisé pour résoudre toutes les URL relatives du document. Elle doit être déclarée dans la section <head> du document, idéalement en première position pour garantir son application à toutes les ressources suivantes.
Règle importante : Si plusieurs balises <base> sont présentes dans un document, c'est la première balise rencontrée qui est utilisée en HTML5 (contrairement aux anciennes spécifications où c'était la dernière). Elle impacte tous les chemins relatifs : URL de liens et chemins d'images. Un slash / est automatiquement géré entre la valeur spécifiée et l'URL relative écrite.
Ses attributs spécifiques sont :
- href : chemin absolu s'appliquant à toutes les URL relatives suivant la balise.
- target : spécifie la fenêtre ou l'onglet dans lequel s'ouvrent tous les liens de la page.
Exemples pratiques d'utilisation de la balise <base>
Voici plusieurs exemples commentés pour comprendre le fonctionnement de la balise <base> en HTML et son impact sur les URL relatives.
Exemple 1 : URL de base avec ouverture dans un nouvel onglet
Dans cet exemple, tous les liens relatifs seront résolus à partir de https://www.exemple.fr et s'ouvriront dans un nouvel onglet grâce à target="_blank".
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<!-- La balise base définit l'URL racine pour tous les liens relatifs -->
<base href="https://www.exemple.fr/" target="_blank">
<title>Page avec balise base</title>
</head>
<body>
<!-- Ce lien relatif sera résolu en : https://www.exemple.fr/contact -->
<a href="contact">Nous contacter</a>
<!-- Cette image sera chargée depuis : https://www.exemple.fr/images/logo.png -->
<img src="images/logo.png" alt="Logo du site">
</body>
</html>
Exemple 2 : Balise base pour un sous-répertoire
Cas d'usage fréquent : votre site est hébergé dans un sous-dossier. La balise <base> permet de définir ce chemin de base sans modifier chaque lien individuellement.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<!-- URL de base pointant vers un sous-répertoire du site -->
<base href="https://www.monsite.com/tutoriels/html/">
<title>Tutoriels HTML</title>
</head>
<body>
<!-- Résolu en : https://www.monsite.com/tutoriels/html/balise-div.php -->
<a href="balise-div.php">Tutoriel balise DIV</a>
<!-- Résolu en : https://www.monsite.com/tutoriels/html/balise-span.php -->
<a href="balise-span.php">Tutoriel balise SPAN</a>
</body>
</html>
Exemple 3 : Impact sur les ancres internes
Attention ! La balise <base> affecte également les ancres internes (#section). C'est un comportement à connaître pour éviter des bugs difficiles à diagnostiquer.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<base href="https://www.monsite.com/">
</head>
<body>
<!-- ATTENTION : ce lien ne pointe plus vers #section de la page courante !
Il sera résolu en : https://www.monsite.com/#section -->
<a href="#section">Aller à la section</a>
<!-- Solution : utiliser l'URL complète de la page avec l'ancre -->
<a href="https://www.monsite.com/ma-page.php#section">Aller à la section (correct)</a>
<div id="section">
<h2>Ma section</h2>
</div>
</body>
</html>
Tableau des attributs de la balise <base>
Le tableau suivant récapitule les attributs disponibles pour la balise <base>. La colonne DTD indique dans quels types de documents HTML 4.01/XHTML 1.0 l'attribut est autorisé : S=Strict, T=Transitional, F=Frameset. En HTML5, ces deux attributs restent valides et largement supportés par tous les navigateurs modernes.
| Attribut | Valeur | Description | DTD |
|---|---|---|---|
| href | URL absolue | Spécifie l'URL de base absolue appliquée à toutes les URL relatives de la page (liens, images, scripts, feuilles de style) | STF |
| target |
_blank _parent _self _top nom-du-frame |
Spécifie la cible d'ouverture par défaut pour tous les liens de la page : _blank (nouvel onglet), _self (même fenêtre), _parent (cadre parent), _top (fenêtre principale) |
TF |
Bonnes pratiques et compatibilité en 2026
En HTML5 moderne, la balise <base> reste pleinement supportée par tous les navigateurs actuels (Chrome, Firefox, Safari, Edge). Voici les bonnes pratiques d'utilisation à respecter :
1. Positionnement optimal : Placez toujours la balise <base> comme premier élément du <head>, avant tout lien vers des feuilles de style ou scripts, pour garantir que tous les chemins relatifs soient correctement résolus.
2. Une seule balise : N'utilisez qu'une seule balise <base> par document. En HTML5, seule la première est prise en compte.
3. Gestion des ancres : Anticipez l'impact sur les ancres internes en utilisant des URL absolues pour les liens d'ancrage.
4. HTTPS obligatoire : En 2026, spécifiez toujours une URL en https:// pour respecter les exigences de sécurité et de référencement Google.
5. Trailing slash : Terminez toujours l'URL de l'attribut href par un slash (/) pour éviter des comportements inattendus lors de la concaténation avec les URL relatives.
Vous êtes ici : Balise base Retour à la liste des balises
Par carabde | Mis à jour le 2 mars 2026