Spécification de l'URL de base du document avec l'élément HTML

Les sites Web sont construits avec une série de liens pointant vers des pages et des sources telles que des images et des feuilles de style. Il y a deux façons de spécifier l'URL qui relie à ces sources: soit utiliser un chemin absolu ou relatif.

Le chemin absolu fait référence à une destination spécifique. Il est généralement démarré avec le nom de domaine (avec HTTP) comme www.domaine.com/destination/source.jpg. Le chemin relatif est l'inverse: la destination du lien dépend de l'emplacement racine ou, dans la plupart des cas, du nom de domaine de votre site Web..

Un chemin relatif typique ressemblerait à ceci ci-dessous:

Si votre domaine de site Web est, par exemple, hongkiat.com le chemin de l'image résoudrait à hongkiat.comimages_2 / specifying-document-base-url-with-html-base-element.png. Vous devriez comprendre cela si vous développez un site Web depuis un certain temps.

Mais la plupart d'entre vous n'ont probablement pas entendu parler de la élément. Cette balise HTML existe depuis HTML4, mais son implémentation n’est guère développée. Le W3C décrit cet élément comme suit:

“L'élément de base permet aux auteurs de spécifier l'URL de base du document pour résoudre les URL relatives et le nom de le contexte de navigation par défaut aux fins de suivre des hyperliens.”

Ce élément décide en gros de l’URL de base du chemin relatif dans les pages Web. Au lieu de dépendre de l'emplacement racine ou du domaine de votre site Web, vous pouvez le signaler ailleurs, par exemple à l'URL où vos ressources résident dans CDN (Content Delivery Network). Voyons comment cela fonctionne réellement.

Utiliser l'élément de base

le est défini le long du et balises dans le . Étant donné l'exemple suivant, nous définissons l'URL de base sur Google..

Cette spécification affectera tous les chemins du document, y compris celui spécifié dans la liste. href attribut et le src des images. Donc, en supposant que nous ayons une feuille de style, des images et des liens dans le jeu de documents avec un chemin relatif tel que celui-ci, par exemple:

  Lien d'ancre

Même si notre page Web est sous demo.hongkiat.com le chemin relatif fera référence à hongkiat.maxcdn.com, suivant le chemin de base spécifié dans le étiquette. Essayez de survoler le lien et le navigateur vous montrera où se trouve exactement le chemin..

Tous les chemins relatifs seront finalement:

  Lien d'ancre

Définition de la cible de liaison par défaut

En plus de définir l’URL de base, le balise peut également définir la cible de lien par défaut à travers le cible attribut. Dites que vous voulez que tout le lien dans le document s'ouvre dans le nouvel onglet du navigateur, met le cible avec _blanc, ainsi.

Limites

le La balise, cependant, contient quelques mises en garde dans certaines circonstances:

Premièrement le la prise en charge du navigateur est excellente; cela fonctionne dans IE6. Mais IE6 pense qu'il faut une balise de fermeture . Cela pourrait entraîner un problème de hiérarchie dans le document si la balise de fermeture n'est pas spécifiée. Un moyen simple et rapide de résoudre ce problème consiste à ajouter fermeture dans un commentaire, .

Si vous utilisez # en conjonction avec le Pour créer un lien vers des sections du document, il est possible que vous rencontriez un problème dans Internet Explorer 9. Au lieu de passer à la section mentionnée, Internet Explorer 9 rechargera la page..

En outre, un blanc href entraînera l'URL de base au lieu de créer un lien vers le répertoire en cours où réside la page (il s'agit du comportement du navigateur par défaut), ce qui pourrait provoquer des problèmes de référencement inattendus.

Emballer

le est une fonctionnalité HTML pratique qui peut simplifier le référencement des liens dans un document Web. Utilisez la balise avec précaution pour minimiser les pièges. Suivez ces références ci-dessous pour plus d’informations sur la étiquette:

URL absolues et relatives - MSDN
Élément de base HTML - W3C