HTML - La balise <base>

Par : TutorialsGrey, le 29 Janvier 2022

 Cet article sur le HTML explique comment utiliser la balise <base> en présentant sa syntaxe d'utilsation et des exemples.

 

Description

La balise HTML <base> est utilisée pour spécifier un URI ou une URL de base qui sera utilisé pour tous les liens relatifs contenus dans un document HTML.

Il ne peut y avoir qu'un seul élément <base> dans un document HTML, et il doit être placé dans l'élément <head>. On peut également préciser comment les autres liens doivent s'ouvrir (dans la même fenêtre, dans une autre fenêtre, etc.) en utilisant l'attribut target.

La balise <base> doit apparaître dans le document avant toute utilisation d'URL relatives.

 

Syntaxe

En HTML, la syntaxe de la balise <base> est la suivante :

<head>
  <base href="https://www.tutorialsgrey.com/categorie/">
</head>

<body>
  <a href="langage-html/">HTML</a>
</body>

Étant donné que la cible du lien pour la balise <a> est une URL relative, l'URL de la balise <a> deviendrait https://www.tutorialsgrey.com/categorie/langage-html/ quel que soit l'endroit où cette page a été enregistrée sur un site web.

En HTML, l'élément <base> ne contient pas de balise de fermeture mais en XHTML, la balise de fermeture </base> est requise.

Voici quelques spécifications concernant la balise HTML <base> :

Affichage Aucun
Balises Uniquement la balise ouvrante (<base>)
Utilisation Ancres et liens

 

Attributs de la balise <base>

En plus des attributs globaux et des attributs d'évènements, voici une liste d'attributs spécifiques à la balise <base> :

Attribut Description Compatibilité HTML
href Spécifie la l'adresse de base pour les URL relatives dans une page. Il peut s'agir d'une URL absolue ou relative.

Voici quelques exemples :
href="https://www.tutorialsgrey.com/categorie/"
href="/categorie/"
href="categorie/"
HTML 4.01, HTML5
target

Spécifie l'endroit où afficher la ressource liée. Il peut s'agir d'une des valeurs suivantes : _self, _blank, _parent, _top

_self : signifie que la ressource se charge dans la fenêtre ou l'onglet actuel.
_blank : signifie que la ressource est chargée dans une nouvelle fenêtre ou un nouvel onglet.
_parent : signifie que la ressource se charge dans la fenêtre parent.
_top : signifie que la ressource se charge dans la fenêtre complète d'origine.

HTML 4.01, HTML5

 

Remarques

  • L'élément HTML <base> doit se trouver dans la balise <head>.
  • Une seule balise <base> peut être définie dans un document. S'il en existe plusieurs, seules les premières valeurs href et target seront utilisées.

 

Compatibilité avec les navigateurs

La balise <base> est compatible avec les navigateurs suivants :

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • Edge Mobile
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

 

Exemples

Dans cette section, nous allons voir quelques exemples d'utilisation de la balise <aside> en HTML5 et en HTML 4.01 Transitionnel.

Document HTML5

Si vous avez créé un nouveau document en HTML5, votre balise <base> pourrait ressembler à ceci :

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>HTML5 - Balise <base></title>
  <base href="https://www.tutorialsgrey.com/categorie/">
</head>

<body>
  <h1>Titre 1</h1>
  <a href="langage-html/">HTML</a>
</body>

</html>

Dans cet exemple de document HTML5, nous avons défini l'URL de base comme https://www.tutorialsgreys.com/categorie/ qui définit l'URL de la balise <a> comme étant https://www.tutorialsgreys.com/categorie/langage-html/.

 

Document HTML 4.01 Transitionnel

Si vous avez créé un nouveau document en HTML 4.01 Transitionnel, votre balise <base> pourrait ressembler à ceci :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>HTML 4.01 Transitionnel - Balise <base></title>
  <base href="https://www.tutorialsgrey.com/categorie/">
</head>

<body>
  <h1>Titre 1</h1>
  <a href="langage-html/">HTML</a>
</body>

</html>

Dans cet exemple de document HTML 4.01 Transitionnel, nous avons défini l'URL de base comme https://www.tutorialsgreys.com/categorie/ qui définit l'URL de la balise <a> comme étant https://www.tutorialsgreys.com/categorie/langage-html/.