0

I have an HTML file with a letter index containing "internal" (relative) links, referring to the document itself. Now each letter contains links to external (absolute) links. There are about 5,500 such links in total and adding the same base href to each of them is quite stupid. It's a classic case where one would use a base href. Using a base href however, cancels out the interal refs.

Is it possible to keep the internal links and also use a "base href" for the external ones, since they all belong to the same base address?

Example:

<a href="#A">A</a> | <a href="#B">B</a> | ...

<a name="A"></a>
<li><a href="https://stackoverflow.com/questions/37158674">37158674</a></li>
<li><a href="https://stackoverflow.com/questions/37158675">37158675</a></li>
...

The base href here is of course "https://stackoverflow.com/questions/"

Apostolos
  • 3,115
  • 25
  • 28
  • Are you saying that you have links `/yoursitepage` as well? and you want some to go to `https://stackoverflow.com/questions/` and some to stay internal? – Kartik Prasad Nov 30 '17 at 02:05
  • You could create Code that writes your HTML with JavaScript or PHP. – StackSlave Nov 30 '17 at 02:07
  • Yes, Kartik. Exactly that. Not a bad idea, PHPglue. But I am looking for a straight way, if possible. I can also use a second local HTML file in which to put the base href with the external links. But then, I prefer the JS solution! :) Thanks. – Apostolos Nov 30 '17 at 02:16

3 Answers3

2

The base element specifies the base URL for relative URLs, leaving absolute URLs untouched. It doesn't care whether the relative URLs are relative to your site or a different one, and it doesn't care where your absolute URLs point to. However, it will map all the relative URLs on the page, including those to images, stylesheets, scripts, and other resources.

Having said that, the only way you could make it work for external hyperlinks and not internal hyperlinks is if all your internal hyperlinks are written with absolute URLs (and all your external hyperlinks are written with relative URLs, as you intend). You do not need JavaScript for this — you just need to be careful to ensure that your internal links all use absolute URLs so they aren't resolved relative to stackoverflow.com. This does include links that point to named anchors. A fair tradeoff if you want to save nearly 200 kilobytes of uncompressed markup (for 5,500 links) though, if you ask me!

Example:

<base href="https://stackoverflow.com/questions">
<a href="https://example.com/questions.html#A">A</a> |
<a href="https://example.com/questions.html#B">B</a> | ...

<a name="A"></a>
<ol>
<li><a href="37158674">37158674</a></li>
<li><a href="37158675">37158675</a></li>
...
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
1

Here's a JavaScript solution to this one, it's not really possible with just HTML unless you use JavaScript or some templating language

let stackoverflow = "https://stackoverflow.com/questions/"
function redrSO(questionId){
  window.location=stackoverflow+questionId;
}
<a href="#A">A</a> | <a href="#B">B</a> | ...

<a name="A"></a>
<li><a href="#" onclick="redrSO(37158674)">37158674</a></li>
<li><a href="#" onclick="redrSO(37158675)">37158675</a></li>
Kartik Prasad
  • 730
  • 7
  • 18
  • 1
    Nice! Thanks. I start accepting the fact that the combination of internal and external refs cannot be done with straight HTML code and in the same HTML file (i.e. w/o using different files in frames, etc.) And yours is the best JS solution I have seen: short, simple and concise. – Apostolos Dec 01 '17 at 08:57
  • I would say to stick with just absolute urls for the external stackoverflow links, having javascript links is not really good practise when it can be avoided – Kartik Prasad Dec 03 '17 at 01:52
  • Actually I would like to redact that statement after looking at boltclocks answer and realising you have 5500 lines of this like javascript is the way to go as you would save 192.5 kbs of download time. I will change the name of that onclick function though – Kartik Prasad Dec 03 '17 at 23:04
0

You could create links with PHP like:

<?php
function stackLink($num){
  echo "<a href='https://stackoverflow.com/questions/$num'>$num</a>";
}
?>
<li><?php stackLink(37158674); ?></li>
<li><?php stackLink(37158675); ?></li>
StackSlave
  • 10,613
  • 2
  • 18
  • 35
  • Not a bad idea if the HML runs on a server. I am looking for something that can be used in any HTML (local, user-side, run from PC) and w/o even the use of JS. – Apostolos Dec 01 '17 at 08:42