The HTML Base Tag

Dan Tello, Former Senior Front-End Developer

Article Category: #Code

Posted on

So you handed off some front end code to a client last year. Now they've built out their site, stuff's changed, you don't have access to their code, and they want you to tell them why something's sporadically not working in IE 9 and 10. On a Friday. At 4:00pm.

How can we debug this?

  1. View source of the problem page.
  2. Copy and paste into your text editor.
  3. Drop the Base.

The Tag:

<base href="https://viget.com">

The base tag allows you to define the base url for all linked assets on your page - javascript, css, images, etc. Normally if you just copied the source of a webpage and opened it up in a browser - you'd just get some unstyled html and a whole bunch of broken everything. By adding a <base> to the top of your <head> tag, and setting its href to the url of the live site you're trying to debug, all those links are fixed, and you've got a working page you can now edit locally.

Now you can edit the markup, replace scripts and stylesheets with local copies, and start debugging in your own environment against an exact working copy of your client's live page, and make it home in time for dinner.

BONUS PROTIP™:

Another way to test files locally is through wget. You can download a single page of a site + all its source files re-linked up all nice and packged up to a single directory with the following command.

wget -E -H -k -K -p https://viget.com/extend/html-base-tag

Now you too can make your own addition to the growing list of Viget knock-off sites!

POST SCRIPT: After writing this, it was pointed out that we blogged about this 3 and a half years ago. Oh well. Enjoy the refresher!

Related Articles