HTML base Tag Tutorial

In this section, we will learn what HTML <base> tag is and how it works.

What is <base> Tag in HTML?

The HTML <base> element is used to specify a base URL and a target (locations like a window or a tab to open links) for the rest of relative URLs in a document. Basically, the <base> element tells browsers the protocol, server-address (like the website name) and the port number that they should use to create an absolute URL when they see a relative URL on a page.

Notes:

  • The HTML <base> element has two attributes named href and target, and we need to set the value for one of these two (or both) when using the <base> element on a page.
  • We put this element within the body of HTML <head> element right on top of other links in the page.

HTML <base> Tag Syntax:

<base href= "base-url" target="_blank | _parent | _self | _top">

HTML <base> Tag Values

HTML <base> element is a single element and we only need to set values for href and target attributes of this tag.

Example: using <base> tag in HTML

See the Pen using <base> tag in HTML by Omid Dehghan (@odchan1) on CodePen.

Here the value of the href attribute is set to “https://www.google.com” and so any relative link on this page will be prefixed with this address. That’s why if we click the link “Open Google Search Engine” the Google Image search engine will be opened.

Also, because the value of the target attribute is set to _blank, after clicking the link, that means all links in the page should be opened in a new window or tab.

HTML <base> Tag Attributes

HTML <base> element has two attributes and in the table below you can see their descriptions.

Name

Description

href

This attribute is used to set the base URL and browsers use this base URL to create the absolute URL for the relative URLs on the page.

target

This attribute is used to declare where the linked documents should be opened.

Leave a Reply