Definir URLs relativos com a tag “base”

1. Defina qualquer URL que você escolher como base para todos os URLs relativos.
2. Defina destinos de link padrão.

The Base-ics

O elemento é definido no seção e você só pode usá-lo uma vez por documento. Você deve colocá-lo o mais cedo possível na seção da cabeça para poder usá-lo a partir desse ponto. Seus dois atributos possíveis são href e target. Você pode usar qualquer um desses atributos sozinho ou ambos ao mesmo tempo.

Exemplo 1: Atalho de Carregamento de Ativos

Digamos que você tenha um site que armazena todas as suas imagens e CSS em uma pasta chamada “assets”. Você pode definir o seu marque assim:

1

2

     href="http://www.myepicsite.com/assets/">

3

Isso permitiria que você carregasse qualquer imagem ou CSS como este:

1

2

     href="http://www.myepicsite.com/assets/">

3

     rel="stylesheet" href="style.css">

4

5

6

     src="image01.png" />

7

O link para style.css resolveria para http://www.myepicsite.com/assets/style.css e image01.png carregaria de http://www.myepicsite.com/assets/image01.png.

Exemplo 2: URLs de páginas internas

E se você tiver um domínio de nível superior que redireciona para algo como http://thisrocks.com/app/ e todos os links internos precisam incluir app/ em seus URLs.

Você pode definir sua URL base assim:

1

 href="http://thisrocks.com/app/">

A partir daí, sempre que você quiser fazer um link de uma página interna para outra, você pode simplesmente usar:

1

 href="anotherpage.htm">LINK 

Este link resolveria http://thisrocks.com/app/anotherpage.htm.

Exemplo 3: destino de link padrão

Você também pode usar para definir o destino padrão para todos os links em sua página. Se você fosse usar:

…qualquer link que não tenha definido explicitamente seu próprio destino será aberto em uma nova janela. Você pode usar o target atributo com ou sem acompanhamento href atributo.

Essa funcionalidade pode ser útil para conteúdo carregado por meio de um iFrame, pois você poderá ter automaticamente todos os links direcionados para o quadro principal.

Desvantagens

Enquanto o url pode ser útil, suas desvantagens se concentram no fato de que, depois de defini-lo, você fica preso a ele. Você só pode usá-lo de uma única maneira e afetará todos os URLs. Onde quer que você não queira usar os padrões definidos em seu você tem que substituí-los especificamente.

Se você usá-lo para resolver a sua assets pasta como fizemos acima, e depois você queria criar um link de uma página do seu site para outra, não poderia fazer isso com o HTML comum de Page.

Isso ocorre porque, com o URL base sendo http://www.myepicsite.com/assets/ seus visitantes seriam enviados para http://www.myepicsite.com/assets/page.html.

Como tal, você teria que substituir seu configurações de tag usando o URL absoluto, ou seja, Page.

Âncoras na página

ao usar você também pode ter problemas com links para âncoras na página.

Normalmente, um link como Back to Top manteria você na mesma página, mas pularia para a localização de um elemento id="top"por exemplo, resolveria http://thisrocks.com/app/article.html#top.

No entanto, se você estiver usando um marcar com um href atributo em vez disso, você seria enviado para o URL base com #top anexado ao final, por exemplo http://thisrocks.com/app/#top.

Novamente, neste caso, você teria que substituir os padrões definidos em seu tag especificando a página à qual você deseja que seu link seja relativo, por exemplo Back to Top.

Onde funciona melhor

O A tag é melhor usada em um cenário em que você sabe que poderá exercer controle total sobre o uso de todas as URLs, ou seja, você sabe que poderá substituir os padrões conforme necessário. Se você estiver criando um tema para um CMS onde existem muitas variáveis ​​desconhecidas, provavelmente é uma boa ideia deixar fora da mistura.

No entanto, se você estiver criando um site HTML estático pode ser muito útil. Este é o caso ainda mais se você estiver usando uma linguagem de modelagem como Jade ou Handlebars que permitirá que você coloque atalhos como Back to Topportanto, se você precisar substituir as configurações padrão, ainda será rápido e fácil.

Se você tem uma boa ideia de qual será o conteúdo do seu projeto e o uso de URLs e links está totalmente sob seu controle, você pode encontrar o tag economiza muito tempo.

Leia mais sobre no wiki W3C e especificação HTML5: