🎯 La balise HTML ``

📌 Définition

`est un élément de métadonnées placé dans le` d'un document HTML. Il définit :

• l'URL de base utilisée pour résoudre toutes les URL relatives du document ;
• le contexte de navigation par défaut (target) pour les liens et formulaires.

C'est un élément vide (pas de balise fermante) et invisible pour l'utilisateur.

⚙️ Les deux attributs

🔗 href

Définit l'URL de base. Toutes les URL relatives de la page (images, scripts, feuilles de style, liens) sont résolues par rapport à cette adresse au lieu de l'URL du document.

Avec cette balise, un lien <a href="page.html"> pointera vers https://exemple.com/dossier/page.html, quel que soit l'emplacement réel du fichier courant.

🎯 target

Définit la cible de navigation par défaut pour les liens et formulaires qui n'ont pas de target explicite.

Tous les liens s'ouvriront alors dans un nouvel onglet, sauf ceux qui précisent leur propre target.

📏 Règles à respecter

• Une seule balise `` par document. Si plusieurs sont présentes, seule la première est prise en compte.
• Doit être placée dans le <head>, avant toute balise utilisant une URL (<link>, <script>, <a>…).
• Doit posséder au moins un des attributs href ou target.
• href n'accepte pas les protocoles data: ni javascript:.

⚠️ Points d'attention

🔖 Liens internes (ancres)

Les liens du type <a href="#section"> sont aussi affectés : le navigateur cible l'URL de base suivie du fragment, ce qui peut provoquer un rechargement inattendu de la page.

🛡️ Sécurité de target

Si la valeur de target contient des caractères invalides (saut de ligne, <…), le navigateur la réinitialise à _blank pour éviter les injections.

✅ Bonnes pratiques

• Éviter `` sur des sites complexes ou des SPA, car cela peut casser des routes relatives.
• Préférer des chemins absolus ou des URL complètes quand c'est possible.
• Toujours tester les liens relatifs et les ancres après ajout.

💡 Exemple complet

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">

  <link rel="stylesheet" href="style.css">
  <title>Exemple</title>
</head>
<body>
  <a href="contact.html">Contact</a>
</body>
</html>