Tag HTML <base>

A tag HTML <base> define uma única URL absoluta (base) que o navegador usa para resolver todas as URLs relativas do documento — links, imagens, folhas de estilo, scripts e ações de formulários. Ela também pode definir um target padrão para que os links abram em uma janela ou aba específica sem repetir target em cada elemento <a>.

Esta página explica o que <base> faz, quando é genuinamente útil, os atributos que aceita e a armadilha importante que pega a maioria das pessoas da primeira vez: como <base href> altera o comportamento dos links de âncora na mesma página.

Por que e quando usar `<base>`

<base> muda o "ponto de partida" para caminhos relativos. Sem ela, uma URL relativa é resolvida em relação ao endereço do próprio documento. Com ela, toda URL relativa é resolvida em relação ao href que você especifica. Isso é ocasionalmente exatamente o que você deseja:

Ativos servidos a partir de um CDN. Se sua marcação usa caminhos relativos como img/logo.png, mas os arquivos reais estão em um CDN, um único <base href="https://cdn.example.com/assets/"> aponta todos eles para o CDN sem editar cada caminho.
Migrações de site e proxies reversos. Quando um documento é movido ou servido sob um caminho diferente do qual foi criado, <base> pode manter seus links relativos apontando para o local original.
Geradores de sites estáticos e templates. Um layout compartilhado que é renderizado em muitas URLs pode declarar uma base para que os parciais não precisem saber quão profundamente estão aninhados.

Use com moderação. Como <base> afeta todas as URLs relativas da página ao mesmo tempo — incluindo as que você não escreveu — é um instrumento bastante blunt. A maioria dos projetos modernos prefere caminhos relativos corretos ou caminhos relativos à raiz, ou um passo de build, em vez de um <base> global.

Acessando a URL base pelo JavaScript

Você pode ler a URL base resolvida de um documento com document.baseURI. Se o documento não tiver um elemento <base>, isso volta ao próprio endereço do documento (document.location.href).

// With <base href="https://www.w3docs.com/"> in the document:
console.log(document.baseURI); // "https://www.w3docs.com/"

Sintaxe

A tag <base> é um elemento vazio, o que significa que a tag de fechamento não é necessária. No HTML5, a barra de auto-fechamento é opcional, mas em XHTML, a tag <base> deve ser fechada (<base />).

Dica

Apenas uma tag <base> pode ser usada na página, e ela deve ser colocada no elemento <head>. Você deve inseri-la o mais cedo possível, pois sua ação se estende a partir do lugar onde é especificada.

Perigo

Se você usar múltiplos elementos <base>, apenas os primeiros atributos href e target serão obedecidos. O restante será ignorado.

Exemplo da tag HTML `<base>`

O documento a seguir define ambos os atributos ao mesmo tempo. A URL base torna-se https://www.w3docs.com/, portanto o link relativo /css3-maker/border-radius resolve para https://www.w3docs.com/css3-maker/border-radius. E como target="_blank" está em <base>, o link abre em uma nova aba mesmo que o elemento <a> em si não tenha target.

<!DOCTYPE html>
<html>
  <head>
    <title>HTML base tag</title>
    <base href="https://www.w3docs.com/" target="_blank" />
  </head>
  <body>
    <a href="/css3-maker/border-radius">Try CSS Maker Tool</a>
  </body>
</html>

Edite o trecho abaixo: clicar no link abre w3docs.com em uma nova aba, totalmente controlado pela tag <base>.

"Experimente Você Mesmo" não está disponível para este exemplo.

Usando apenas `href` (o caso mais comum)

Na maioria das vezes você só quer redirecionar URLs relativas, não mudar como os links são abertos. Defina href e deixe target de fora:

<head>
  <base href="https://cdn.example.com/assets/" />
</head>
<body>
  <!-- resolves to https://cdn.example.com/assets/img/logo.png -->
  <img src="img/logo.png" alt="Logo" />
</body>

Usando apenas `target`

Você pode definir um target padrão sem alterar a URL base. Aqui, as URLs relativas ainda são resolvidas em relação ao endereço do próprio documento, mas todos os links abrem em uma nova aba:

<head>
  <base target="_blank" />
</head>
<body>
  <!-- no target attribute, yet opens in a new tab -->
  <a href="/pricing">Pricing</a>
</body>

Aviso

Quando os links abrem em uma nova aba via target="_blank", adicione rel="noopener noreferrer" nos elementos <a> por segurança. <base> não pode definir rel, então precisa estar em cada link. Sem noopener, a página aberta pode acessar sua página através de window.opener e tentar fazer tabnabbing.

Armadilha: `<base href>` quebra links de âncora na mesma página

Esta é a surpresa mais comum. Um link de fragmento como <a href="#section"> é uma URL relativa — é apenas um fragmento sem caminho. Quando um <base href> está presente, o navegador resolve esse fragmento em relação à URL base, não à página atual.

Portanto, com <base href="https://www.w3docs.com/">, clicar em <a href="#section"> não rola para o elemento na página com id="section". Em vez disso, navega para https://www.w3docs.com/#section — geralmente uma página completamente diferente.

<head>
  <base href="https://www.w3docs.com/" />
</head>
<body>
  <!-- BAD: navigates to https://www.w3docs.com/#contact -->
  <a href="#contact">Contact</a>

  <!-- GOOD: stays on the current page -->
  <a href="/current-page#contact">Contact</a>

  <h2 id="contact">Contact</h2>
</body>

A solução é escrever âncoras da mesma página como URLs absolutas ou relativas à raiz que incluam o caminho da página atual, para que o fragmento chegue ao documento correto. Leia mais sobre resolução de caminhos em Caminhos de Arquivo HTML.

Atributos

A tag <base> pode conter o atributo href, o atributo target, ou ambos. Se nenhum for especificado, a tag não tem efeito.

Atributo	Valor	Definição
href	URL absoluta	A URL base para todas as URLs relativas na página. Deve ser uma URL absoluta (um valor relativo é pouco confiável e é resolvido em relação ao endereço do próprio documento).
target	nome do contexto de navegação	Alvo padrão para hiperlinks e formulários. Aceita as quatro palavras-chave reservadas abaixo, ou o nome de qualquer contexto de navegação (por exemplo, o `name` de um iframe ou janela nomeada).

Os valores de palavras-chave reservadas para target são:

Valor	Definição
`_blank`	Abre o link em uma nova janela ou aba.
`_self`	Abre o link na janela atual (o padrão).
`_parent`	Abre o link no contexto de navegação pai.
`_top`	Abre o link no contexto de navegação mais alto (completo).

Um nome personalizado como target="preview" aponta para um contexto de navegação com esse nome — por exemplo <iframe name="preview"> — e é criado como uma nova janela se nenhum com esse nome existir.

Ressalvas e interações

<link rel="canonical">. Uma URL canônica deve ser escrita como URL absoluta. Não dependa de <base> para transformar um <link rel="canonical" href="..."> relativo no endereço correto — deixe o valor canônico absolutamente definido por conta própria. Veja <link>.
<form action="">. A action de um formulário também é resolvida em relação à URL base. Um action="" vazio normalmente envia para a página atual; com um <base href>, envia para a URL base, o que raramente é intencional.
A posição importa. <base> afeta apenas URLs que aparecem depois dela no código-fonte. Coloque-a no topo do <head>, antes de qualquer <link>, <script> ou outro elemento que contenha URL.

Capítulos relacionados

Prática

O que a tag base do HTML faz?

Define a URL base para todas as URLs relativas e um alvo padrão para hiperlinks e formulários no documento.É usada para incorporar multimídia em uma página web.Define um conjunto de links de navegação.Apenas abre links em uma nova janela e não pode alterar URLs relativas.Adiciona um título a um documento web.

Por que e quando usar <base>