Why Does an Anchor Tag's Href Values Need Http:// Preprended to The Url

Why does an anchor tag's href values need http:// preprended to the URL?

There are several protocols: HTTP, HTTPS, FILE, SSH, SSL, FTP. In addition, as Jeremy mentioned, it's quite possible you may have a file on your server with the exact name of the text you're entering in the HREF.

Basically, any text in the href without a protocol is assumed to be a relative path if there is no / or protocol.

Using tag c:out in href element

Browser is taking www.google.com as relative rosource of your site.

You can simply solve this problem by providing the protocol as replacing www.google.com with http://www.google.com.

Href without http(s) prefix

It's possible, and indeed you're doing it right now. It just doesn't do what you think it does.

Consider what the browser does when you link to this:

href="index.html"

What then would it do when you link to this?:

href="index.com"

Or this?:

href="www.html"

Or?:

href="www.index.com.html"

The browser doesn't know what you meant, it only knows what you told it. Without the prefix, it's going to follow the standard for the current HTTP address. The prefix is what tells it that it needs to start at a new root address entirely.

Note that you don't need the http: part, you can do this:

href="//www.google.com"

The browser will use whatever the current protocol is (http, https, etc.) but the // tells it that this is a new root address.

Links start with two slashes

It's a protocol-relative URL (typically HTTP or HTTPS). So if I'm on http://example.org and I link (or include an image, script, etc.) to //example.com/1.png, it goes to http://example.com/1.png. If I'm on https://example.org, it goes to https://example.com/1.png.

This lets you easily avoid mixed content security errors.

css/html custom href based on data attribute

If I am assuming correctly that you want an anchor tag that has href="my-id-name" to take you to an element with attribute data-schemaid="my-id-name", then it is just a matter of locating the element and calling scrollIntoView(true) on it. If wanting to animate the scroll see this answer (uses jQuery)

//use getAttribute("href") instead of this.href as 
//this.href will get a url based on the actual href attribute
var schemaid = this.getAttribute("href");

//use css attribute selector to find the target element
var target = document.querySelector(`[data-schemaid="${schemaid}"]`);
if(target){
  target.scrollIntoView(true);
}

Demo

document.querySelector('#anchor').addEventListener("click",function(event){   event.preventDefault();   var schemaid = this.getAttribute("href");   var target = document.querySelector(`[data-schemaid="${schemaid}"]`);   if(target){     target.scrollIntoView(true);   }});

.spacer {  height:1440px;}

<a id="anchor" href="my-schemaid">Click me</a><div class="spacer"></div><div data-schemaid="my-schemaid">The target div</div><div class="spacer"></div>

Angular 6 - a href gets appended to base url

Always prepend your absolute external links with protocol or // shortcut for http:// OR https:// depending on your app's protocol.

<div class="inline-icon-text">
  <small class="text-muted d-md-none mr-3">Link</small>
  <a [attr.href]="'//' + candidate.url" target="_blank" [title]="candidate.url">
    <i class="material-icons">open_in_new</i>
  </a>
</div>

Browsers treat URLs as relative by default to facilitate in-app navigation.

As a side note, this behavior is not Angular-specific; other frameworks and plain sites behave exactly the same

---

Related Topics