Can the conflict between the use of a <BASE> tag with a relative href and <a href='#'> be resolved?

Question

When using a tag with a relative url, e.g.

<base href="app/" />

The use of any <a href='#'> throughout the site causes the href on the anchor tag to be rewritten according to the relative path, which then becomes clickable to an invalid url.

I can replace <a href='#'> with <a href='javascript:void(0)'> and then the browser ignores rewriting the target url according to the prefix specified in the base tag - and it works as expected (doing nothing and causing no navigation.

But I was wondering if there was a more general way to cause the '#' url target to be excluded?

Answer 1

No. A base element with href attribute affects all URL-valued attributes, by definition. Your page probably needs a redesign. The base element as such is seldom a good idea, and a elements that are not meant to be links are even worse.

Answer 2

I wouldn't use <a> tags for anything but actual links.

If you want to have a clickable element that doesn't navigate, use <button type="button"></button> and style it how you'd like. After all, what you're looking for here is a button, not a link.