HTML <base> href attribute

HTML <base> Tag

Definition and usage

href The attribute specifies the base URL for all relative URLs on the page.

Description

The base element can be used to set a base URL, so that relative links in the HTML document are resolved based on this URL.

Relative links omit the protocol, host, and port parts of the URL and need to be determined based on another URL (either the URL specified in base or the URL of the current document) to form its complete form.

href The attribute specifies the base URL to be used for parsing relative URLs in the subsequent part of the document.

Instance

Example 1

Specify the base URL for all relative URLs on the page:

<!DOCTYPE html>
<html>
<head>
  <base href="https://www.codew3c.com/i/photo/">
</head>
<body>
<h1>base href attribute</h1>
<img src="flower.png" width="60" height="60" alt="tullip">
</body>
</html>

Try it yourself

Example explanation

In this example, the base URL is set to https://www.codew3c.com/i/photo/. The domain name is www.codew3c.com, and /i/photo/ is the directory on the server that contains the photo files.

At the end of the document, there is an img element that references an image, using the relative URL flower.png. When the browser loads the image, it will concatenate the base URL and the relative URL to form a complete URL:

https://www.codew3c.com/i/photo/flower.png

Example 2

Specify the base URL for all relative URLs on the page:

<!DOCTYPE html>
<html>
<head>
  <base href="https://www.codew3c.com/html/">
</head>
<body>
<h1>base href attribute</h1>
<a href="html_basic.asp">HTML Basics</a>
</body>
</html>

Try it yourself

Example explanation

In this example, the base URL is set to https://www.codew3c.com/html/. The domain name is www.codew3c.com, and /html/ is the directory on the server that contains the photo files.

At the end of the document, there is an a element used to generate links, which uses the relative URL html_basic.asp. When the user clicks on this hyperlink, the browser will concatenate the base URL and the relative URL to form a complete URL:

https://www.codew3c.com/html/html_basic.asp

Tip

If the base element is not used, or if the href attribute of the base element is not set to a base URL, then the browser will consider the URL of the current document as the resolution base for all relative URLs.

For example, suppose a browser loads a document from the URL https://www.codew3c.com/js/index.asp, and the document contains a hyperlink using the relative URL html_basic.asp. When this hyperlink is clicked, the browser will attempt to load the second document from the absolute URL https://www.codew3c.com/js/html_basic.asp.

Syntax

<base href="URL">

Attribute Value

Value Description
URL An absolute URL that serves as the base URL for the reference URL (e.g., “http://www.example.com/”)

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support

HTML <base> Tag