Documentbasis-URL specificeren met HTML -element

Websites zijn gebouwd met een reeks links, die verwijzen naar pagina's en bronnen zoals afbeeldingen en stylesheets. Er zijn twee manieren om geef de URL op die naar deze bronnen linkt: gebruik een absoluut pad of een relatief pad.

Het absolute pad verwijst naar een specifieke bestemming, meestal wordt het gestart met de domeinnaam (samen met HTTP) zoals www.domain.com/destination/source.jpg. Het relatieve pad is het tegenovergestelde: de linkbestemming is afhankelijk van de hoofdlocatie of in de meeste gevallen de domeinnaam van uw website.

Een typisch relatief pad ziet er als volgt uit:

Als uw websitedomein bijvoorbeeld is, hongkiat.com het afbeeldingspad zou oplossen hongkiat.comimages_2 / specificeren-document-base-url-with-html-base-element.png. U zou dit moeten begrijpen als u al een tijdje een website aan het ontwikkelen bent.

Maar de meesten van u hebben waarschijnlijk nog nooit gehoord van de element. Deze HTML-tag bestaat al sinds HTML4, maar er wordt heel weinig gezien van de implementatie ervan in het wild. W3C beschrijft dit element als:

“Het basiselement staat auteurs toe om te specificeren de documentbasis-URL voor het oplossen van relatieve URL's en de naam van de standaard browse-context met het oog op het volgen van hyperlinks.”

Deze element bepaalt in feite de basis-URL voor het relatieve pad in webpagina's. In plaats van afhankelijk te zijn van de rootlocatie of het domein van uw website, kunt u het ergens anders naar verwijzen, misschien als de URL waar uw resources zich in CDN bevinden (Content Delivery Network). Laten we eens kijken hoe dat werkt.

Het basiselement gebruiken

De is gedefinieerd naast de en tags binnen de . In het volgende voorbeeld stellen we de basis-URL in op Google.

Deze specificatie is van invloed op alle paden in het document, inclusief een pad dat is opgegeven in de href attribuut en de src van de afbeeldingen. Dus, ervan uitgaande dat we een stylesheet, afbeeldingen en links in de documentenset hebben met een relatief pad zoals dit, bijvoorbeeld:

  Anchor Link  

Ook al is onze webpagina onder demo.hongkiat.com het relatieve pad verwijst naar hongkiat.maxcdn.com, volgens het basispad gespecificeerd in de label. Plaats de muisaanwijzer op de link en de browser laat zien waar het pad precies naartoe gaat.

Alle relatieve paden zullen uiteindelijk zijn:

  Anchor Link  

Het standaard linkdoel instellen

Afgezien van het definiëren van de basis-URL, de tag kan ook het standaard linkdoel instellen via de doelwit attribuut. Stel dat u alle koppelingen in het document wilt openen in het nieuwe tabblad van de browser, stel de doelwit met _blanco, zoals zo.

beperkingen

De tag bevat echter een aantal voorbehouden:

Eerst de browserondersteuning is geweldig; het werkt in IE6. Maar IE6 denkt dat het een afsluitende tag vereist . Dit kan een hiërarchieprobleem veroorzaken in het document als de afsluitende tag niet wordt opgegeven. Een eenvoudige snelle manier om dit probleem aan te pakken is door toe te voegen sluiten binnen een opmerking, .

Als je gebruikt # in combinatie met de om een ​​koppeling te maken naar secties in het document, kunt u mogelijk een probleem tegenkomen in Internet Explorer 9. In plaats van naar de verwezen sectie te springen, zal Internet Explorer 9 de pagina opnieuw laden.

Verder een blanco href zal resulteren in de basis-URL in plaats van te linken naar de huidige map waar de pagina zich bevindt (dit is het standaardbrowser-gedrag), wat onverwachte verwijzingsproblemen zou kunnen veroorzaken.

Afronden

De is een handige HTML-functie die verwijzing naar verwijzingen in een webdocument kan vereenvoudigen. Gebruik de tag bewust om de valkuilen te minimaliseren. Volg deze referentie hieronder voor meer informatie over de label:

• Absolute en relatieve URL's - MSDN
• HTML-basiselement - W3C