HTML: <base> tag

This HTML tutorial explains how to use the HTML element called the <base> tag with syntax and examples.

Description

The HTML <base> tag defines a base URL that will be used for all relative URLs in an HTML document. There can only be one <base> tag in a document and it must be defined within the <head> tag. The <base> tag should appear in the document before any relative URLs are used. This tag is also commonly referred to as the <base> element.

Syntax

In HTML, the syntax for the <base> tag is:

<head>
  <base href="https://www.techonthenet.com/html/">
</head>

<body>
  <a href="index.php">HTML Tutorials</a>
</body>

Since the link target for the <a> tag is a relative URL, the URL for the <a> tag would become https://www.techonthenet.com/html/index.php regardless of where this page was saved on a website.

Attributes

In addition to the Global Attributes, the following is a list of attributes that are specific to the <base> tag:

Attribute	Description	HTML Compatibility
href	Specifies the base target for relative URLs within the page. It can be either an absolute or relative URL. Examples of these are: href="https://www.techonthenet.com/html/" href="/html/" href="html/"	HTML 4.01, HTML5
target	Specifies where to display the linked resource. It can be one of the following values: _self, _blank, _parent, _top _self - means that the resource loads into the current frame or context _blank - means that the resource loads into a new window or context _parent - means that the resource loads into the parent frame or context _top - means that the resource loads into the full, original window	HTML 4.01, HTML5

Note

The HTML <base> element is found within the <head> tag.
Only one <base> tag can be defined in a document. If more than one exists, only the first href and target values will be used.

Browser Compatibility

The <base> tag has basic support with the following browsers:

Chrome
Android
Firefox (Gecko)
Firefox Mobile (Gecko)
Internet Explorer (IE)
Edge Mobile
Opera
Opera Mobile
Safari (WebKit)
Safari Mobile

Example

We will discuss the <base> tag below, exploring examples of how to use the <base> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.

HTML5
HTML4
XHTML

HTML5 Document

If you created a new web page in HTML5, your <base> tag might look like this:

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>HTML5 Example by www.techonthenet.com</title>
  <base href="https://www.techonthenet.com/html/">
</head>

<body>
  <h1>Heading 1</h1>
  <a href="index.php">HTML Tutorials</a>
</body>

</html>

In this HTML5 Document example, we have defined the base URL as https://www.techonthenet.com/html/ which sets the URL for the <a> tag to https://www.techonthenet.com/html/index.php.

HTML 4.01 Transitional Document

If you created a new web page in HTML 4.01 Transitional, your <base> tag might look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>HTML 4.01 Transitional Example by www.techonthenet.com</title>
  <base href="https://www.techonthenet.com/html/">
</head>

<body>
  <h1>Heading 1</h1>
  <a href="index.php">HTML Tutorials</a>
</body>

</html>

In this HTML 4.01 Transitional Document example, we have defined the base URL as https://www.techonthenet.com/html/ which sets the URL for the <a> tag to https://www.techonthenet.com/html/index.php.

XHTML 1.0 Transitional Document

If you created a new web page in XHTML 1.0 Transitional, your <base> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>XHMTL 1.0 Transitional Example by www.techonthenet.com</title>
  <base href="https://www.techonthenet.com/html/" />
</head>

<body>
  <h1>Heading 1</h1>
  <a href="index.php">HTML Tutorials</a>
</body>

</html>

In this XHTML 1.0 Transitional Document example, we have defined the base URL as https://www.techonthenet.com/html/ which sets the URL for the <a> tag to https://www.techonthenet.com/html/index.php.

XHTML 1.0 Strict Document

If you created a new web page in XHTML 1.0 Strict, your <base> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>XHTML 1.0 Strict Example by www.techonthenet.com</title>
  <base href="https://www.techonthenet.com/html/" />
</head>

<body>
  <h1>Heading 1</h1>
  <div>
    <a href="index.php">HTML Tutorials</a>
  </div>
</body>

</html>

In this XHTML 1.0 Strict Document example, we have defined the base URL as https://www.techonthenet.com/html/ which sets the URL for the <a> tag to https://www.techonthenet.com/html/index.php.

XHTML 1.1 Document

If you created a new web page in XHTML 1.1, your <base> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>XHTML 1.1 Example by www.techonthenet.com</title>
  <base href="https://www.techonthenet.com/html/" />
</head>

<body>
  <h1>Heading 1</h1>
  <div>
    <a href="index.php">HTML Tutorials</a>
  </div>
</body>

</html>

In this XHTML 1.1 Document example, we have defined the base URL as https://www.techonthenet.com/html/ which sets the URL for the <a> tag to https://www.techonthenet.com/html/index.php.