HTML force URL hyperlink to be treated as non-relative (absolute) - html

I have a list of URLs that our users have entered for websites of various clients... I am loading this list from the server into a grid for the users to see... I made the URLs clickable by wrapping them with a href HTML tag... the problem is, sometimes the user enters urls without the http:// or www. prefix and so the browser treats them as relative URLs which are never ever the case because all these websites are for our clients and they are all external. Is there a way to force these URLs to be treated as absolute instead of relative?
Here is an example:
<a target='_blank' href='google.com'>google.com</a>
If you try this, you'll see that the browser will assume it is a relative path which shouldn't be the case.
Thanks
Solution:
I've chosen to check for '//' (because I don't know what the protocol is - could be http or https) and if not found, I assume it is an http website and I prefix the URL with that - so in short no way to force the browser to treat the hyperlinks as absolute

You can add // before the url and it should work.
Like: //stackoverflow.com

Why don't you preprocess the input and append http:// when necessary?

It is a relative URI.
If you want to link to http://google.com/ then that is where you need to link to.
You can either moderate the URIs you are wrapping, or try to algorithmically guess if it was intended to be a relative link or not.
Note that you cannot safely assume that there should be a www. since the use of that for websites is just a convention, and no longer a strongly followed one.

Related

Why <a> tag doesn't navigate properly to url if using www.something.com

I was working on tag and let say my domain was www.abc.com. If I use href="http://example.com" it does properly navigate to intended url. However if I use href="www.example.com" it doesn't navigate to intended url.
not properly navigate
properly navigate
properly navigate
I was reading the anchor specs in https://html.spec.whatwg.org, unfortunately could not find this specific case.
The browser must know if you want to link to another website or a different file/page of your own website. The browser always asumes that you want to link to a file on your own server if you do not specifiy the protocol.
In fact: The only reason you can leave the protocol out when typing a url into the addressbar of your browser is because the browser just asumes that you want to use the http-protocol. This is not possbile with urls inside the A tag.
If you don't specify an absolute url it will think it's a route inside your site.
Possible values using href attributes:
An absolute URL - points to another web site (like href="http://www.example.com/default.htm")
A relative URL - points to a file within a web site (like href="default.htm")
Link to an element with a specified id within the page (like href="#top")
Other protocols (like https://, ftp://, mailto:, file:, etc..)
A script (like href="javascript:alert('Hello');")
Because When you click on it.. Your Browser Will suppose he need to find this link in the same file extension.
Example: if your html file extension is e://tst.html
when click on tag at Browser it will go to e:// and search about file with name "www.google.com" and not find it..
Use not properly navigate to inform Browser you need to navigate to Another website

Does invalid URL fragments cause breaking the page load?

If I add a random string as the URL fragments to a url while it is not pointing to any element on the page, Can I make sure that it does not break up any thing?
For example let's say that I want to open http://example.com with my Firefox browser, if I add a random string to the url as a fragment such as http://example.com#t1234567843 while t1234567843 is not related to any of the page's elements, Can I make sure that the browser can always open the page without error (regardless of the web application or the filetype: XML, html, xhtml, html5, ...)?
According to my research and testing, generally, no. An invalid URI Fragment does not 'break the page load'. However, take note of Ismael Miguel's and dayuloli's comments above. I believe both are correct and noteworthy.
See also this question: What is href="#" and why is it used?. It details that the URI Fragment is only interpreted locally by the browser. If it references an nonexistent location within the document, the browser simply loads the document and positions as per usual (top of the page).

How to make a URL entered without protocol into an anchor absolute reference

I have a form where users can enter the URL for their website and I then provide a link to the website. I'd like to allow the address to be entered without the protocol (eg www.example.com instead of http://www.example.com).
But if I don't include the protocol in the <a> href attribute the link is relative to my site and does not work. I'm guessing that HTML5 rel="external" might help in future.
Is there a way to use <a href="www.example.com"> so that it is treated as an absolute link reference? I can assume http if no protocol is provided, but this also won't always work.

Absolute Links Resolving to Current Domain

My HTML code has never behaved this way before! I have looked around the internet and here and I can't find an answer to this.
The problem is simple: external links do not go to external webpages and instead become internal links
For example:
If I'm on http://www.domain.com where I have an external link
National Aeronautics and Space Administration
When the link is clicked, instead of going to www.nasa.gov or opening a new window for nasa.gov, it goes to http://www.Domain.com/www.nasa.gov
Why is it doing this?
I am certain that your address is missing a / in your actual code.
Test
would resolve to http://www.domain.com/www.nasa.gov/. Note only one slash after the protocol.
Two slashes // indicate your address is absolute (external) whilst one slash / tells the browser to go to the root directory of the current site to find the address (relative). This is because you could change protocol (such as https:) and then give a relative address (such as /path/to/content.html).
Hope this helps.

Relative URL containing just the querystring

I have some links in a page which only need to change the querystring portion of the current URL.
E.g. the current page is:
http://demo.com/bigreport?page=13
and I want to link to
http://demo.com/bigreport?page=14
Can I use Next as a relative link for this?
I was surprised to find it works in Chrome. I've never seen it documented or mentioned anywhere, so I'm keen to know if anyone uses this, and if there is wider browser support.
Further research reveals that Next is a valid relative URL.
It's documented as part of WHATWG's URL spec
http://url.spec.whatwg.org/#relative-state
The new URL will inherit the base URL's scheme, host, port and path.
Tested to work on:
Chrome
IE 7
Next works because browsers interpret that as a relative URL. Similar to how linking images on your site might work <img src="logo.gif"/> Relative urls work this way (link is relative to the current page), you don't need to use the full absolute URL.
Browsers have been supporting this for long long time. People might not be aware of it because browser automatically handles it.