# HTML &lt;base&gt; : définir une URL de base pour votre site Web

La balise (ou *tag*) HTML `<base>` permet de définir l’URL de base de toutes les URL relatives. Cela se fait via l’attribut `href`. Le deuxième attribut `target` définit l’endroit où les cibles de référence respectives doivent être ouvertes. La balise HTML `<base>` se trouve toujours à l’intérieur de l’élément `<head>`.

## Qu’est-ce que le tag HTML `<base>` ?

La balise HTML `<base>` définit l’URL de base de toutes les URL relatives d’un site Web. Elle contient les deux attributs HTML : href et target. `href` permet de déterminer l’URL qui doit servir de **référence pour toutes les URL relatives, les graphiques, les feuilles de style et les scripts dans un document HTML**. Cette URL de base peut également être elle-même relative. L’attribut `target` détermine le nom de la fenêtre dans laquelle toutes les **cibles de référence doivent être ouvertes**. De plus, HTML `<base>` permet de définir comment les liens doivent s’ouvrir dans le document actuel.

Le tag HTML `<base>` est toujours déposé à l’intérieur de l’élément `<head>` et devrait être utilisé le plus tôt possible dans le code. S’il y a plusieurs balises `<base>`, seule la première est prise en compte, les autres étant ignorées.

## La syntaxe du tag HTML `<base>`

La syntaxe de HTML `<base>` se présente comme suit :

```html
<base href="URL" target="CIBLE">
```

## Exemples de fonctionnement de `<base>`

### Déposer l’URL de base

Dans le premier exemple, nous déposons l’URL de base `https://www.exemple.com` dans l’en-tête d’un document à l’aide de la balise HTML `<base>`. L’URL de base définie avec `<base>` sert de référence pour tous les liens relatifs, incluant les images, feuilles de style (CSS) et scripts du document HTML.

```html

<html>
<head>
<title>Tag HTML base : exemple</title>
<base href="https://www.exemple.com" />
</head>
<body>
<p>
Le contenu de votre site Web se trouve ici.
</p>
<div class="hash d-none" hidden>hash_1a1a35d570d2af5ed40641a3d5e6fd5ab3241441</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

### Définir la destination par défaut pour toutes les URLs

Dans l’exemple suivant, nous définissons avec l’attribut `target` la destination vers laquelle toutes les URLs de la page doivent être dirigées :

```html

<html>
<head>
<title>Tag HTML base : exemple</title>
<base href="https://www.exemple.com" target="_self">
</head>
<body>
<p>
Le contenu de votre site Web se trouve ici.
</p>
<div class="hash d-none" hidden>hash_1a1a35d570d2af5ed40641a3d5e6fd5ab3241441</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

### Utiliser une URL de base pour plusieurs sous-pages

Dans le troisième exemple, nous utilisons HTML `<base>` pour créer une URL de base qui sera utilisée comme page d’accueil par tous les liens relatifs. Voici à quoi ressemble le code :

```html

<html>
<head>
<title>HTML base : exemple</title>
<base href="https://www.exemple.com/">
</head>
<body>
<h2>Différentes sous-pages</h2>
<ul>
<li><a href="/premiere_sous_page/index.htm">Première sous-page</a></li>
<li><a href="/deuxieme_sous_page/index.htm">Deuxième sous-page</a></li>
</ul>
<div class="hash d-none" hidden>hash_1a1a35d570d2af5ed40641a3d5e6fd5ab3241441</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

## Quels sont les attributs supportés par le tag HTML `<base>` ?

La balise `<base>` ne supporte que les deux attributs `href` et `target`.

- **`href`** : permet de déterminer l’URL de base pour toutes les URL relatives de la page. La valeur de cet attribut est toujours indiquée sous la forme d’une URL. Pour nos exemples ci-dessus, cette valeur est `https://www.exemple.com`.
- **`target`** : indique dans quelle fenêtre cible une URL doit être ouverte. Il peut avoir les valeurs `_blank`, `_parent`, `_self` et `_top`. `_blank` ouvre les liens dans une nouvelle fenêtre, `_parent` ouvre les liens dans un cadre parent, `_self` ouvre tous les liens dans la même fenêtre et `_top` ouvre les liens dans la fenêtre du navigateur et non comme cadre de la page qui fait le lien.

Conseil Dans notre Digital Guide, vous trouverez encore beaucoup d’autres articles informatifs sur le *Hypertext Markup Language* (HTML). Vous y trouverez notamment un tutoriel pour débutants et un aperçu des meilleurs éditeurs HTML.


This is a markdown version of: [https://www.ionos.com/fr-be/digitalguide/sites-internet/developpement-web/html-base/](https://www.ionos.com/fr-be/digitalguide/sites-internet/developpement-web/html-base/) for AI/LLM consumption.