# How to use the HTML base tag to define a base URL

HTML `<base>` is used to define the base URL of all relative URLs. This is done via the attribute `href`. The second attribute `target` defines where the respective reference targets are to be opened. The HTML `<base>` tag is always stored within the `<head>` element.

## What is the HTML `<base>` tag?

The [HTML tag](https://www.ionos.ca/digitalguide/websites/web-development/html-tags/) `<base>` sets the base URL for all relative URLs on a website. It includes the two [HTML attributes](https://www.ionos.ca/digitalguide/websites/web-development/html-attributes/) [href](https://www.ionos.ca/digitalguide/websites/web-development/a-href-html/) and [target](https://www.ionos.ca/digitalguide/websites/web-development/html-target/).

The href attribute specifies the URL that should serve as the **reference for all relative URLs, images, stylesheets and scripts in an HTML document**. This base URL can itself be relative. The target attribute defines the name of the window where all **linked targets should be opened**. Additionally, the HTML `<base>` tag can specify how links in the current document should be opened.

The HTML `<base>` tag is always stored within the `<head>` element and should be used as early as possible in the code. If there are several `<base>` tags, only the first one is taken into account, and all others are ignored.

## What is the syntax of HTML `<base>`?

The basic syntax of HTML `<base>` is as follows:

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

## Examples of how `<base>` works

### Storing the base URL

In the first example, we store the base URL `https://www.example-website.com` in the header area of a document using the HTML `<base>` tag:

```html

<html>
<head>
<title>HTML: base Tag example</title>
<base href="https://www.example-website.com" />
</head>
<body>
<p>
Here’s your website content.
</p>
<div class="hash d-none" hidden>hash_1f37d1b3a2f1476e256bf8bef9f7ed2f9d7aa800</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>
```

### Defining default destination for all URLs

In the next example, we’ll use the `target` attribute to specify where URLs should open when they are clicked:

```html

<html>
<head>
<title>HTML: base Tag example</title>
<base href="https://www.example-website.com" target="_self">
</head>
<body>
<p>
Here’s your website content.
</p>
<div class="hash d-none" hidden>hash_1f37d1b3a2f1476e256bf8bef9f7ed2f9d7aa800</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>
```

### Accessing a base URL with multiple relative links

In the third example, we use HTML `<base>` to create a base URL that is used as the start page by all relative links. This is what the code looks like:

```html

<html>
<head>
<title>HTML: base Tag example</title>
<base href="https://www.example-website.com/">
</head>
<body >
<h2>Various subpages</h2>
<ul>
<li><a href="/first_subpage/index.htm">First Subpage</a></li>
<li><a href="/second_subpage/index.htm">Second Subpage</a></li>
</ul>
<div class="hash d-none" hidden>hash_1f37d1b3a2f1476e256bf8bef9f7ed2f9d7aa800</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>
```

## What attributes does the HTML `<base>` tag support?

The `<base>` tag only supports the attributes `href` and `target`.

- **`href`**: The base URL for all relative URLs on the page is determined via `href`. The value of this attribute is always specified in the form of a [URL](https://www.ionos.ca/digitalguide/server/know-how/url-what-is-a-uniform-resource-locator/). In the examples above, this value is `https://www.example-website.com`.
- **`target`**: The `target` attribute specifies which window a URL should be opened in. It can have the values `_blank`, `_parent`, `_self` and `_top`. `_blank` opens the link in a new window, `_parent` opens the link in a higher-level frame, `_self` opens the link in the same window and `_top` opens the link in the browser window, replacing the linking page instead of presenting it as a frame within the page.

Tip In our Digital Guide, you can find more informative articles about HTML. Among other things, you’ll find a comprehensive [beginners’ tutorial](https://www.ionos.ca/digitalguide/websites/web-development/learning-html-a-beginners-tutorial/) as well as an overview of the best [HTML editors](https://www.ionos.ca/digitalguide/websites/web-development/html-editors/).


This is a markdown version of: [https://www.ionos.ca/digitalguide/websites/web-development/html-base/](https://www.ionos.ca/digitalguide/websites/web-development/html-base/) for AI/LLM consumption.