# Estructura básica HTML: cómo definir una URL base para tu página web

HTML `<base>` se utiliza para definir la URL base de todas las URL relativas. Esto se hace mediante el atributo `href`. El segundo atributo `target` define dónde deben abrirse los respectivos objetivos de referencia. La HTML `<base>` tag siempre se almacena dentro del elemento `<head>`.

## ¿Qué es la HTML `<base>` tag?

La [tag HTML](https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/html-tags/) `<base>` define la URL base de todas las URL relativas de una página web. Contiene los dos [atributos HTML](https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/atributos-html/), [href](https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/a-href-html/) y [target](https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/html-target/). La URL que servirá de **referencia para todas las URL relativas, gráficos hojas de estilo y scripts de un documento HTML** se determina mediante `href`. Esta URL base también puede ser relativa. El atributo `target` determina el nombre de la ventana en la que se abrirán todos los **objetivos de referencia**. Además, HTML `<base>` también puede utilizarse para especificar cómo deben abrirse los enlaces en el documento actual.

La etiqueta HTML `<base>` siempre se almacena dentro del elemento `<head>` y debe utilizarse lo antes posible en el código. Si hay varias etiquetas `<base>`, solo se tiene en cuenta la primera, mientras que las demás se ignoran.

## La sintaxis de HTML `<base>`

La sintaxis de HTML `<base>` es la siguiente:

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

## Ejemplos del funcionamiento de `<base>`

### Introducir URL base

En el primer ejemplo, introducimos la URL base `https://www.paginadeejemplo.com` en la cabecera de un documento utilizando la etiqueta 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_72ef38efb6342111a9eb077a61b97b4f63f5a6b4</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 el destino por defecto para todas las URL

En el siguiente ejemplo, utilizamos el atributo `target` en el código para especificar a qué destino deben ir todas las URL de la página:

```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_72ef38efb6342111a9eb077a61b97b4f63f5a6b4</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>
```

### Acceder a una URL base con varios enlaces relativos

En el tercer ejemplo, utilizamos `<base>` para crear una URL base que es utilizada por todos los enlaces relativos como página de inicio. Este sería el 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_72ef38efb6342111a9eb077a61b97b4f63f5a6b4</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>
```

## ¿Qué atributos admite la etiqueta HTML `<base>`?

La etiqueta`<base>` solo admite los atributos `href` y `target`.

- **`href`**: la URL base para todas las URL relativas de la página se determina mediante `herf`. El valor de este atributo se especifica siempre en forma de [URL](https://www.ionos.es/digitalguide/servidores/know-how/url-que-es-el-uniform-resource-locator/). Para nuestros ejemplos anteriores, este valor es `https://www.paginadeejemplo.com`.
- **`target`**: el atributo `target` especifica la ventana de destino en la que debe abrirse una URL. Puede tener los valores `_blank`, `_parent`, `_self` y `_top`. `_blank` abre los enlaces en una nueva ventana, `_parent` abre los enlaces en un marco superior, `_self` abre todos los enlaces en la misma ventana y `_top` abre los enlaces en la ventana del navegador y no como un marco de la página de enlace.

Consejo En nuestra Digital Guide encontrarás muchos más artículos sobre el Lenguaje de Marcado de Hipertexto. Entre otras cosas, encontrarás un amplio [tutorial para principiantes](https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/aprende-html-tutorial-para-principiantes/) y un resumen de los mejores [editores HTML](https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/editor-html/).


This is a markdown version of: [https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/estructura-basica-html/](https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/estructura-basica-html/) for AI/LLM consumption.