The Amazing Power of the BASE Tag

I’m not one to normally get excited about HTML tags, but I’m making an exception in this case.

Raise your hand if you’ve heard of the <base>  tag.
Anyone, anyone?

Don’t feel bad, I didn’t either until today – but I’m going to show you why I think it’s so flippin cool, especially for those of us who work with complicated root structures and CMS frameworks.

The humble little base tag is handy for at least 2 purposes that I know of.
If you use it for something else, I’d love you to leave a comment and let me know.

What does the <base> tag do?

1. Setting a default target for any links, including pdf downloads, etc.. that you place on the page. If you tire of putting the ‘target=”_blank” attribute after all your links, this baby’s for you. Creating a consistent experience for your users will help to give them piece of mind before they go clicking around…

2. Setting a default base path for any href on the page. e.g. if you include <base href=”http://www.w3schools.com/images/&#8221; /> on your page, you no longer have to link to your images with that ‘/images/’ path, instead you can simply put <img src=”myImage.jpg” width=”20″ height=”20″ alt=”blahblahblah” /> and the image will appear like normal.

Now you may be saying, big deal – and maybe it’s NOT  a big deal for many people. But when you’re dealing with a backend where your links references look like this: “/Portals/7/tabid/articlebin/posts/images/image.jpg” or something similar, you’ll probably appreciate it much, much more. I often find myself opening another browser just so I can look at the image properties for a site I’m working on, to make sure I’m correct.

How to implement-

simply put the <base> tag in between the <head></head> section of your page like you would any other script or meta tag. (note: you’ll need to self close the tag if you’re using XHTML)

Here’s an example as shown on the w3c site:

<head>
<base href=”http://www.w3schools.com/images/&#8221; />
<base target=”_blank” />
</head>

<body>
<img src=”stickman.gif” />
<a href=”http://www.w3schools.com”>W3Schools</a&gt;
</body>

According to google, the <base> tag works fine with the new ‘rel=canonical’ tag also.  Note that if you click the image properties, the complete pathway will still be

Advertisements

7 Responses to “The Amazing Power of the BASE Tag”

  1. http://goxuqufawe.web44.net Says:

    If you are going for best contents like me, simply go
    to see this website every day as it offers feature contents,
    thanks

  2. Знакомства Люберцы Says:

    When I initially commented I clicked the “Notify me when new comments are added” checkbox and now each time a comment is added
    I get three e-mails with the same comment. Is there any way you can remove me from that service?

    Many thanks!

  3. Nichole Says:

    Hi there! I just wanted to ask if you ever have any issues
    with hackers? My last blog (wordpress) was hacked and I
    ended up losing a few months of hard work due to no data backup.

    Do you have any methods to protect against hackers?

  4. Kasha Says:

    “The Amazing Power of the BASE Tag | Search Marketing Goodness” was in fact a pretty good article, .
    Continue writing and I’ll try to keep on reading! Thanks a lot ,
    Lavonda

  5. Profile Says:

    Wօw, incredible blog structure! How long havе you еver
    been running a blog for? you make blogging glɑnce easy.
    The overall loߋk of your website is fɑntastic, aѕ well as thе content material!

  6. amanet Says:

    Excellent post. I was checking continuously this weblog and I’m inspired!

    Extremely useful info specially the ultimate part 🙂 I care for such info a lot.
    I was seeking this certain info for a long time.
    Thanks and good luck.

  7. seo techiniques Says:

    Just want to say your article is astounding. The clarity in your post is simply spectacular and i can assume you are an expert on this field. Well with your permission allow me to grab your rss feed to keep up to date with incoming post. Thanks a million and please keep up the fabulous work.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: