# HTML base: Como definir URL base no seu site

Com a tag HTML `<base>`, você pode definir o URL base para todos os URLs relativos. Faça isso por meio do atributo `href`. O segundo atributo, `target`, determina onde os respectivos destinos dos links serão abertos. A tag HTML `<base>` é sempre colocada dentro do elemento `<head>`.

## O que é a tag HTML `<base>`?

A tag HTML &lt;base&gt; define o URL base para todos os URLs relativos de um site. Ela contém dois atributos HTML: `href` e `target`. Com o [HTML `href`](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/um-href-html/ "Href HTML"), define-se o URL que servirá como referência para todos os URLs relativos, gráficos, folhas de estilo e scripts em um documento HTML. Esse URL base pode ser também relativo. O atributo HTML target determina o nome da janela em que todos os destinos de links serão abertos. Além disso, a tag HTML `<base>` pode definir como os links dentro do documento atual devem ser abertos.

A tag HTML &lt;base&gt; é sempre posicionada dentro do elemento `<head>` e deve ser usada o quanto antes no código. Caso existam várias tags `<base>`, somente a primeira será considerada, e as demais serão ignoradas.

## Sintaxe da tag HTML `<base>`

A sintaxe básica da tag HTML `<base>` é a seguinte:

```html
<base href="URL" target="DESTINO">
```

## Exemplos de aplicação da tag HTML `<base>`

### Definir URL base

No primeiro exemplo, definimos o URL base `https://www.exemploseite.com` no cabeçalho de um documento usando a tag HTML `<base>`:

```html

<html>
<head>
<title>Exemplo da tag base em HTML</title>
<base href="https://www.exemploseite.com" />
</head>
<body>
<p>
Aqui está o conteúdo do seu site.
</p>
<div class="hash d-none" hidden>hash_7c2bd4df4db1ec4c18a167a7e5e24a4f6eaee43e</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

### Definir destino padrão para todos os links

No próximo exemplo, usamos o atributo `target` para definir o destino para todos os links da página:

```html

<html>
<head>
<title>Exemplo da tag base em HTML</title>
<base href="https://www.exemploseite.com" target="_self">
</head>
<body>
<p>
Aqui está o conteúdo do seu site.
</p>
<div class="hash d-none" hidden>hash_7c2bd4df4db1ec4c18a167a7e5e24a4f6eaee43e</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

### Usar vários links relativos com um URL base

No terceiro exemplo, usamos a tag HTML `<base>` para definir um URL base que será utilizado por todos os links relativos como página inicial. Veja o código:

```html

<html>
<head>
<title>Exemplo da tag base em HTML</title>
<base href="https://www.exemploseite.com/">
</head>
<body>
<h2>Páginas internas</h2>
<ul>
<li><a href="/primeira_pagina/index.htm">Primeira página</a></li>
<li><a href="/segunda_pagina/index.htm">Segunda página</a></li>
</ul>
<div class="hash d-none" hidden>hash_7c2bd4df4db1ec4c18a167a7e5e24a4f6eaee43e</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

### Quais atributos a tag HTML `<base>` suporta?

A tag `<base>` suporta apenas os dois atributos `href` e `target`.

- **`href`**: O atributo `href` define o URL base para todos os URLs relativos na página. O valor deste atributo é sempre fornecido como um URL. Para os exemplos acima, esse valor seria `https://www.exemploseite.com`.
- **`target`**: O atributo `target` especifica a janela em que o URL será aberto. Ele pode ter os valores *\_blank*, *\_parent*, *\_self* e *\_top*. O valor *\_blank* abre os links em uma nova janela, *\_parent* abre os links em um frame superior, *\_self* abre todos os links na mesma janela e *\_top* abre os links na janela principal do navegador, removendo qualquer frame ou iframe da página de origem.

Dica No nosso Digital Guide, você encontrará muitos outros artigos informativos sobre HTML. Aqui, você pode conferir, por exemplo, um este tutorial HTML para iniciantes e um panorama dos [melhores editores de HTML](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/editores-de-html/).


This is a markdown version of: [https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/html-base/](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/html-base/) for AI/LLM consumption.