# Estrutura HTML básica: como definir uma URL base para o seu site

HTML `<base>` é usado para definir a URL base de todas as URLs relativas. Isso é feito através do atributo `href`. O segundo atributo `target` define onde os respectivos alvos de referência devem ser abertos. A tag HTML `<base>` é sempre armazenada dentro do elemento `<head>`.

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

A tag HTML `<base>` define a URL base de todas as URLs relativas de uma página web. Contém os dois atributos HTML, href e target. A URL que servirá de **referência para todas as URLs relativas, gráficos, folhas de estilo e scripts de um documento HTML** é determinada por `href`. Esta URL base também pode ser relativa. O atributo `target` determina o nome da janela na qual todos os **objetivos de referência** serão abertos. Além disso, HTML `<base>` também pode ser usado para especificar como os links devem ser abertos no documento atual.

A tag HTML `<base>` é sempre armazenada dentro do elemento `<head>` e deve ser utilizada o mais cedo possível no código. Se houver várias tags `<base>`, apenas a primeira será considerada, enquanto as demais serão ignoradas.

## A sintaxe do HTML `<base>`

A sintaxe do HTML `<base>` é a seguinte:

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

## Exemplos do funcionamento de `<base>`

### Introduzir URL base

No primeiro exemplo, introduzimos a URL base `https://www.paginadeejemplo.com` no cabeçalho de um documento utilizando a tag HTML `<base>`:

```html
<html> 
<head> 
<title>Ejemplo tag HTML base</title> 
<base href="https://www.paginadeejemplo.com" /> 
</head> 
<body> 
<p> 
Aquí el contenido de la página web. 
</p> 
<div class="hash d-none" hidden>hash_80cc7008b7b40d11214eaf439a905c1e6af00817</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 o destino padrão para todas as URLs

No exemplo a seguir, usamos o atributo `target` no código para especificar para qual destino todas as URLs da página devem ser direcionadas:

```html
<html> 
<head> 
<title>Ejemplo tag HTML base</title> 
<base href="https://www.paginadeejemplo.com" target="_self"> 
</head> 
<body> 
<p> 
Aquí el contenido de la página web. 
</p> 
<div class="hash d-none" hidden>hash_80cc7008b7b40d11214eaf439a905c1e6af00817</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>
```

### Acessar uma URL base com vários links relativos

No terceiro exemplo, usamos `<base>` para criar uma URL base que é usada por todos os links relativos como página inicial. Este seria o código:

```html
<html> 
<head> 
<title>Ejemplo tag HTML base</title> 
<base href="https://www.paginadeejemplo.com/"> 
</head> 
<body > 
<h2>Varias subpáginas</h2> 
<ul> 
<li><a href="/primera_subpagina/index.htm">Primera subpágina</a></li> 
<li><a href="/segunda_subpagina/index.htm">Segunda subpágina</a></li> 
</ul> 
<div class="hash d-none" hidden>hash_80cc7008b7b40d11214eaf439a905c1e6af00817</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>
```

## Que atributos a tag HTML `<base>` admite?

A`<base>` só aceita os atributos `href` e `target`.

- **`href`**: a URL base para todas as URLs relativas da página é determinada por `herf`. O valor deste atributo é sempre especificado na forma de URL. Para os nossos exemplos anteriores, este valor é `https://www.paginadeejemplo.com`.
- **`target`**: o atributo `target` especifica a janela de destino na qual um URL deve ser aberto. Pode ter os valores `_blank`, `_parent`, `_self` e `_top`. `_blank` abre os links numa nova janela, `_parent` abre os links num quadro superior, `_self` abre todos os links na mesma janela e `_top` abre os links na janela do navegador e não como um quadro da página de link.

Dica No nosso Guia Digital, encontrará muitos mais artigos sobre a Linguagem de Marcação de Hipertexto. Entre outras coisas, encontrará um tutorial completo para principiantes e um resumo dos melhores editores HTML.


This is a markdown version of: [https://www.ionos.com/pt-pt/digitalguide/paginas-web/desenvolvimento-web/estrutura-basica-html/](https://www.ionos.com/pt-pt/digitalguide/paginas-web/desenvolvimento-web/estrutura-basica-html/) for AI/LLM consumption.