HTML - <base> Tag

Quiz

Introduction to <base> Tag

The HTML <base> tag is used to specify base URL or a target for all the relative URLs in a document. It provides a reference point for links, images and other resources ensuring consistency when dealing with the relative URLs.

The <base> tag must be placed inside the <head> section of an HTML document and used only once. If we try to use the multiple <base> tag, the one which is at the first is considered.

Syntax

Following is the syntax of HTML <base> tag −.

<base href="" target="">

Attributes

HTML base tag supports Global and accepts some specific attribute as well which are listed below.

Attribute	Value	Description
href	URL	Specifies the URL of a page or the name of the anchor that the link goes to.
target	_blank _parent _self _top	Where to open the target URL.

Example : Setting a Base URL

In the following example, we are going to consider the basic usage of the <base> tag.

<!DOCTYPE html>
<html>

<head>
    <title>HTML base Tag</title>
    <base href="https://www.tutorialspoint.com" />
</head>

<body>
    <img src="/cg/images/logo.png" />
</body>

</html>

Example : Setting a Default Target for Links

Lets look at the following example, where we are going to set the default target for all the URLs on the page.

<!DOCTYPE html>
<html>

<head>
    <base href="https://www.tutorialspoint.com/index.htm">
</head>

<body>
    <p>
        <a href="/html/index.htm">
        <img src="/cg/images/logo.png" 
             height="39"
             alt="logo"> 
        </a>
        <br> 
        Tutorials Point originated from the idea that
        there exists a class of readers who respond 
        better to online content and prefer to learn new
        skills at their own pace from the comforts of their
        drawing rooms.
    </p>
</body>

</html>

Example : Setting Base URL for Multiple Links

Consider the another scenario, where we are going to take the base URL, which all the relative links treat as the starting URL and opens in the same window.

<!DOCTYPE html>
<html>
    <style>
        a {
            text-decoration: none;
            color: black;
        }

        a:hover {
            color: green;
            font-size: 20px;
        }
    </style>
    <base href="https://www.tutorialspoint.com/index.htm">
<body style="background-color:#D6EAF8 ">
    <h2 style="color: #DE3163; font-size: 30px; font-style: verdana;">List of Courses</h2>
    <a href="https://www.tutorialspoint.com/html/index.htm">HTML tutorial</a>
    <br>
    <a href="https://www.tutorialspoint.com/artificial_intelligence/index.html">AI tutorial</a>
    <br>
    <a href="https://www.tutorialspoint.com/data_structures_algorithms/index.htm">Data Structure tutorial</a>
    <br>
    <a href="https://www.tutorialspoint.com/cloud_computing/index.htm">Cloud Computing tutorial</a>
    <br>
</body>
</html>

Supported Browsers

Tag
base	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm

Print Page