HTML <base> tag


HTML <base> tag is used to specify a base URI or URL to use for all relative links contained within an HTML document.

Only one <base> element can be specified within a document, and it must be placed within <head> element. We can also specify how other links should open (in the same window, in another window, etc.) using the target attribute.

Syntax

<base href="https://www.google.com">  

In HTML <base> element does not contain closing tag but in XHTML end tag </base> is required.

Following are some specifications about the <base> tag

DisplayNone
Start tag/End tagOnly start-tag
UsageAnchors and links

Example

Open in same window (by default)

<!DOCTYPE html>  
<html>  
<head>  
    <title>Base tag</title>  
    <style>  
      a{text-decoration: none;  
        color:black;}  
      a:hover{color: green;  
                   font-size: 18px;}  
    </style>  
    <base href="https://www.google.com">  
 </head>  
 <body>  
        <h2 style="color: red; font-size: 30px; font-style: italic;">List of Web developement Tutorial</h2>  
        <a href="/html-tutorial">HTML tutorial</a><br>  
        <a href="/css-tutorial">CSS tutorial</a><br>  
        <a href="/bootstrap-tutorial">Bootstrap tutorial</a><br>  
        <a href="/javascript-tutorial">JavaScript tutorial</a><br>  
    <a href="/jquery-tutorial">JavaScript tutorial</a>  
  </body>  
</html>  

In the above example we have used base URL =” https://www.google.com” which all other relative links will treat as starting URL. Here (/) defines the root URL of the current document.

Open in new window (using _blank in <base> tag):

<!DOCTYPE html>  
<html>  
<head>  
    <title>Base tag</title>  
    <style>  
      a{text-decoration: none;  
        color:black;}  
      a:hover{color: green;  
            font-size: 18px;}  
    </style>  
    <base href="https://www.google.com" target="_blank">  
 </head>  
 <body>  
        <h2 style="color: red; font-size: 30px; font-style: italic;">List of Web developement Tutorial</h2>  
        <a href="/html-tutorial">HTML tutorial</a><br>  
        <a href="/css-tutorial">CSS tutorial</a><br>  
        <a href="/bootstrap-tutorial">Bootstrap tutorial</a><br>  
        <a href="/javascript-tutorial">JavaScript tutorial</a><br>  
        <a href="/jquery-tutorial">JavaScript tutorial</a>  
  </body>  
</html>  

In the above example we have used target=”_blank” in only <base> tag but it is applied on whole document links.

Attribute

Tag Specific attributes:

AttributeValueDefinition
hrefURLIt specifies the base URL for all relative links.
target
_blankOpen the relative link in the new window
_selfOpen the relative link in current window
_parentOpen the relative link in the parent frame
_topOpen the links in full width of the page

Global Attribute

The <base> tag supports all global attributes in HTML

Event Attribute

The <base> does not support the event attributes in HTML

Supporting Browsers

Elementchrome browser Chromeie browser IEfirefox browser Firefoxopera browser Operasafari browser Safari
<base>YesYesYesYesYes

Leave a Reply

Your email address will not be published. Required fields are marked *