Especificando o URL base do documento com o elemento HTML

Sites são construídos com uma série de links, apontando para páginas e fontes como imagens e folhas de estilo. Existem duas maneiras de especifique o URL vinculado a essas fontes: use um caminho absoluto ou caminho relativo.

O caminho absoluto se refere ao destino específico, normalmente é iniciado com o nome do domínio (junto com HTTP) como www.domain.com/destination/source.jpg. O caminho relativo é o oposto: o destino do link depende do local da raiz ou, na maioria dos casos, do nome de domínio do seu site..

Um caminho relativo típico ficaria assim abaixo:

Se o domínio do seu site é, por exemplo,, hongkiat.com o caminho da imagem resolveria hongkiat.comimages_2 / especificando-document-base-url-com-html-base-element.png. Você deve entender isso se você estiver desenvolvendo um site por um tempo.

Mas a maioria de vocês provavelmente não ouviu falar sobre o elemento. Essa tag HTML existe desde o HTML4, mas muito pouco é visto em sua implementação na natureza. O W3C descreve este elemento como:

“O elemento base permite que os autores especifiquem o URL base do documento para efeitos de resolução de URLs relativos e o nome de o contexto de navegação padrão para os propósitos de seguir hyperlinks.”

este elemento basicamente decide o URL base para o caminho relativo em páginas da web. Em vez de depender da localização da raiz ou do domínio do seu site, você pode apontar para outro local, talvez como a URL em que seus recursos residem na CDN (Content Delivery Network). Vamos ver como isso funciona.

Usando o elemento base

o é definido ao lado do e tags dentro do . Dado o exemplo a seguir, definimos o URL base para o Google.

Esta especificação afetará todos os caminhos dentro do documento, incluindo um que seja especificado dentro do href atributo e o src das imagens. Portanto, supondo que tenhamos uma folha de estilo, imagens e links no conjunto de documentos com um caminho relativo como este, por exemplo:

  Link de âncora

Mesmo que nossa página esteja sob demo.hongkiat.com o caminho relativo se referirá a hongkiat.maxcdn.com, seguindo o caminho base especificado no tag. Tente passar o mouse sobre o link e o navegador mostrará para onde o caminho está indo exatamente para.

Todos os caminhos relativos acabarão sendo:

  Link de âncora

Definir o destino do link padrão

Além de definir o URL base, o tag também pode definir o destino de link padrão através do alvo atributo. Digamos que você queira que todo o link no documento seja aberto na nova aba do navegador, colocou o alvo com _em branco, igual a.

Limitações

o tag, no entanto, tem algumas ressalvas em algumas circunstâncias:

Primeiro, o o suporte ao navegador é ótimo; funciona no IE6. Mas, o IE6 acha que requer uma tag de fechamento . Isso pode causar um problema de hierarquia no documento, se a tag de fechamento não for especificada. Uma maneira rápida e simples de resolver esse problema é adicionar fechando dentro de um comentário, .

Se você estiver usando # Em conjunto com o Para vincular a seções dentro do documento, você pode potencialmente encontrar um problema no Internet Explorer 9. Em vez de saltar para a seção referida, o Internet Explorer 9 recarregará a página.

Além disso, um espaço em branco href resultará na URL base em vez de vincular ao diretório atual onde a página reside (esse é o comportamento padrão do navegador), o que poderia causar problemas de referência inesperados.

Embrulhar

o é um prático recurso HTML que pode simplificar a referência de links em um documento da web. Use a tag para minimizar as armadilhas. Siga estas referências abaixo para mais informações sobre tag:

URLs absolutas e relativas - MSDN
Elemento Base HTML - W3C