Astuce définir des URL relatives avec la balise «base»

le tag en HTML est un élément relativement peu connu, étant devenu une partie à part entière de HTML5 assez récemment. Cela vous permet de faire deux choses:

1. Définissez n'importe quelle URL que vous choisissez comme base pour toutes les URL relatives.
2. Définir les cibles de lien par défaut.

Les basiques

le l'élément est défini dans le section et vous ne pouvez l'utiliser qu'une fois par document. Vous devriez le placer le plus tôt possible dans votre tête afin de pouvoir l'utiliser à partir de ce moment-là. Ses deux attributs possibles sont href et cible. Vous pouvez utiliser l'un de ces attributs seul ou les deux à la fois..

Exemple 1: raccourci de chargement d'actif

Disons que vous avez un site qui stocke toutes ses images et CSS dans un dossier nommé "assets". Vous pourriez définir votre tag comme si:

Cela vous permettrait ensuite de charger n'importe quelle image ou CSS comme ceci:

Le lien vers style.css se résoudre à http://www.myepicsite.com/assets/style.css et images_14 / quick-tip-set-relative-urls-with-the-base-tag.png serait charger de http://www.myepicsite.com/assets/images_14/quick-tip-set-relative-urls-with-the-base-tag.png.

Exemple 2: URL de page internes

Et si vous avez un domaine de premier niveau qui redirige vers quelque chose comme http://thisrocks.com/app/ et tous les liens internes doivent inclure app / dans leurs URL.

Vous pouvez définir votre URL de base comme ceci:

À partir de là, chaque fois que vous souhaitez créer un lien d’une page interne à une autre, vous pouvez simplement utiliser:

LIEN 

Ce lien résoudrait à http://thisrocks.com/app/anotherpage.htm.

Exemple 3: cible de lien par défaut

Vous pouvez aussi utiliser définir la cible par défaut pour tous les liens de votre page. Si vous deviez utiliser:

… Tout lien n'ayant pas explicitement défini sa propre cible s'ouvrirait dans une nouvelle fenêtre. Vous pouvez utiliser le cible attribut avec ou sans accompagnement href attribut.

Cette fonctionnalité pourrait éventuellement être utile pour le contenu chargé via un iFrame, car tous les liens y seraient automatiquement dirigés vers le cadre parent..

Désavantages

Tandis que le url peut être pratique, ses inconvénients sont centrés sur le fait qu’après l’avoir défini une fois que vous êtes pris avec. Vous ne pouvez l'utiliser que d'une seule manière et cela affectera toutes les URL. Partout où vous ne voulez pas utiliser les valeurs par défaut définies dans votre tag vous devez les remplacer spécifiquement.

Devez-vous l'utiliser pour résoudre à votre les atouts comme nous l’avons fait ci-dessus, et vous vouliez plus tard lier une page de votre site à une autre, vous ne pouviez pas le faire avec le code HTML commun de Page. 

En effet, avec l'URL de base étant http://www.myepicsite.com/assets/ vos visiteurs seraient envoyés à http://www.myepicsite.com/assets/page.html.

En tant que tel, vous devrez remplacer votre marquer les paramètres en utilisant plutôt l'URL absolue, c'est-à-dire. Page.

Ancres de page

Lors de l'utilisation vous pouvez également rencontrer des problèmes de liens vers des ancres dans la page.

Normalement, un lien tel que Retour au sommet vous garder sur la même page mais passez à l'emplacement d'un élément portant id = "top", par exemple. il serait résolu de http://thisrocks.com/app/article.html#top.

Cependant, si vous utilisez un tag avec un href attribuer vous plutôt être envoyé à l'URL de base avec #Haut annexé à la fin, par exemple. http://thisrocks.com/app/#top.

Encore une fois, dans ce cas, vous devrez remplacer les valeurs par défaut définies dans votre tag en spécifiant la page à laquelle vous voulez que votre lien soit relatif, par exemple. Retour au sommet.

Où Fonctionne mieux

le tag est mieux utilisé dans un scénario dans lequel vous savez que vous pourrez exercer un contrôle complet sur l’utilisation de toutes les URL, c’est-à-dire que vous saurez que vous pourrez remplacer les valeurs par défaut si nécessaire. Si vous créez un thème pour un CMS contenant de nombreuses variables inconnues, nous vous conseillons de laisser hors du mélange.

Cependant, si vous construisez un site HTML statique peut être très utile. C’est encore plus le cas si vous utilisez un langage de gabarit tel que Jade ou un guidon qui vous permettra de placer des raccourcis comme Retour au sommet, donc si vous avez besoin de remplacer les paramètres par défaut, il est toujours rapide et facile.

Si vous avez une bonne idée du contenu de votre projet et que vous contrôlez son utilisation des URL et des liens, vous pouvez trouver le tag vous fait gagner beaucoup de temps.

En savoir plus sur sur le wiki W3C et les spécifications HTML5:

• http://www.w3.org/wiki/HTML/Elements/base
• http://www.w3.org/TR/html5/document-metadata.html#the-base-element