7th Sep 2018

When to use HTML base tag ?


Author

Suroor Wijdan

Founder & CEO

3 min readJavaScriptHTML
3 min readJavaScriptHTML

HTML base tag

In this blog, we will look at a very simple HTML tag that can come in very handy at solving certain problems that developers encounter somewhere down their career.

What is the HTML base tag?

HTML base tag is a pretty simple tag which is not known by many. What it does is that it specifies the base URL for the all the relative URLs in the document. For example, if you have an img tag with a relative src say /images/logo.png and if you have set a base tag with href as href='https://xencov.com' then the browser will make a call to https://xencov.vom/images/logo.png to load the image instead of picking up the host as the base URL automatically.

When to use it?

Many developers won't know about the base tag untill they actually get stuck at a problem that can be solved easily by the base tag.

Lets take an example, you want to load a webpage into an iframe but you realize that many sites don't allow them to be opened into a frame object like frame, iframe, etc. by sending a header called X-Frame-Options with the value same-origin. The same-origin header value basically means that the page can only be opened in a frame on the same origin/host and not a different host which would be the case with you.

To overcome this, you would need to make an HTTP request to the webpage URL and get the page HTML as string which you will then write to the iframe. This will allow you to bypass the X-Frame-Options header problem but now you encounter another issue. You see that all the resources on the webpage with a relative URL are broken, this happens because there is no host set on the src for iframe to direct the relative URL's too and it picks up your current host instead.

The first approach for anyone who isn't aware of the base tag would be to rewrite all the relative URL's in the document by using a RegExp, which is what I did in the first place. While that would solve the problem, its not a neat solution when a even better solution exists which is the base tag.

You can just place a base tag with the correct host inside the head section of the HTML string and it will automatically handle all the relative URLs in that document and all the resources such as images, stylesheets, javascript files will start loading correctly.

Let me know if it works for you and or if you already knew it.

Hope this helps!

We bring the best in technology combined with an Agile process which results in higher efficiency and desired results for our clients.

Talk to us!

LATEST FROM OUR BLOG

Building a Facebook Echo-Bot in Python

Gartner estimates that by 2020, chatbots will be handling 85 percent of customer-service interactions; they are already handling about 30 percent of transactions now.

Read more

How to Send an Email from Flutter - SMS App Part 3

In this blog, we will see how we can send emails from our flutter application using mailgun credentials. This post is in continuation of the Flutter SMS app series.

Read more

How To Listen for SMS using Flutter - SMS App Part 2

In continuation with the previous blog, we would continue to build our new basic SMS app using Flutter. In this blog, we would see how we can add the functionality of listening for incoming SMS messages on the device.

Read more