Two Forward Slashes in a Url/Src/Href Attribute

Two forward slashes in a url/src/href attribute

The "two forward slashes" are a common shorthand for "request the referenced resource using whatever protocol is being used to load the current page".

Best known as "protocol relative URLs", they are particularly useful when elements — such as the JS file in your example — could be served and/or requested from either a http or a https context. By using protocol relative URLs, you can avoid implementing

if (window.location.protocol === 'http:') {
    myResourceUrl = 'http://example.com/my-resource.js';
} else {
    myResourceUrl = 'https://example.com/my-resource.js';
}

type of logic all over your codebase (assuming, of course, that the server at example.com is able to serve content through both http and https).

A prominent real-world example is the Magento 1.X E-Commerce engine: for performance reasons, the category and product pages use plain http by default, whereas the checkout is https enabled.

If some resources (e.g. promotional banners in the site's header) are referenced via non protocol relative URLs (i.e. http://example.com/banner.jpg), customers reaching the https enabled checkout are greeted with a rather unfriendly

"there are insecure elements on this page"

prompt - which, one can safely assume, isn't exactly great for business.

If the aforementioned resource is referenced via //example.com/banner.jpg though, the browser takes care of loading it via the proper protocol both on the plain http product/category pages and in the https-enabled checkout flow.

tl;dr: With even the slightest possibility of a mixed http/https environment, just use the double slash/protocol relative URLs to reference resources — assuming that the host serving them supports both http and https.

URI starting with two slashes ... how do they behave?

The resource you're looking for is the RFC 3986.

See Section 4.2 and Section 5.4. Quoting from the latter:

Reference Resolution Examples

Within a representation with a well defined base URI of:

    http://a/b/c/d;p?q

a relative reference is transformed to its target URI as follows:

  "g:h"           =  "g:h"
  "g"             =  "http://a/b/c/g"
  "./g"           =  "http://a/b/c/g"
  "g/"            =  "http://a/b/c/g/"
  "/g"            =  "http://a/g"
  "//g"           =  "http://g"
  "?y"            =  "http://a/b/c/d;p?y"
  "g?y"           =  "http://a/b/c/g?y"
  "#s"            =  "http://a/b/c/d;p?q#s"
  "g#s"           =  "http://a/b/c/g#s"
  "g?y#s"         =  "http://a/b/c/g?y#s"
  ";x"            =  "http://a/b/c/;x"
  "g;x"           =  "http://a/b/c/g;x"
  "g;x?y#s"       =  "http://a/b/c/g;x?y#s"
  ""              =  "http://a/b/c/d;p?q"
  "."             =  "http://a/b/c/"
  "./"            =  "http://a/b/c/"
  ".."            =  "http://a/b/"
  "../"           =  "http://a/b/"
  "../g"          =  "http://a/b/g"
  "../.."         =  "http://a/"
  "../../"        =  "http://a/"
  "../../g"       =  "http://a/g"

This means that when the base URI is http://a/b/c/d;p?q and you use //g, the relative reference is transformed to http://g.

What does `//` in javascript's src attribute do?

This is a "protocol-relative" link. It uses http or https depending on what was used to load the current page.

What does // mean in an a tag

The link will use protocol (http or https) same as page which contain that link. For example if https://stackoverflow.com/ contain <a href="//en.wikipedia.org"></a> it will directed to https://en.wikipedia.org

Starting with a forward slash in html for href

Is one a relative path and one an absolute path?

Yes.

If your browser is currently pointing at http://foo/bar/baz.html then:

• <a href="reset/index.html"> would link to http://foo/bar/reset/index.html.
• <a href="/reset/index.html"> would link to http://foo/reset/index.html.

If there is a base element in the head of your HTML document then the relative path will be relative to the base. For example the link here will take you to http://example.com/foobar/reset/index.html regardless of where the page is located.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
 <HEAD>
   <TITLE>Base element example</TITLE>
   <BASE href="http://example.com/foobar/">
 </HEAD>

 <BODY>
   <P><a href="reset/index.html">Reset CSS</a>
 </BODY>
</HTML>

What happens if base href... is set with a double slash?

The behavior of base is explained in the HTML spec:

The base element allows authors to specify the document base
URL for the purposes of resolving relative URLs.

As shown in your test A, if there are multiple base with href, the document base URL will be the first one.

Resolving relative URLs is done this way:

Apply the URL parser to url, with base as the base URL, with encoding as the encoding.

The URL parsing algorithm is defined in the URL spec.

It's too complex to be explained here in detail. But basically, this is what happens:

• A relative URL starting with / is calculated with respect to base URL's host.
• Otherwise, the relative URL is calculated with respect to base URL's last directory.
• Be aware that if the base path doesn't end with /, the last part will be a file, not a directory.
• ./ is the current directory
• ../ goes one directory up

^{(Probably, "directory" and "file" are not the proper terminology in URLs)}

Some examples:

• http://example.com/images/a/./ is http://example.com/images/a/
• http://example.com/images/a/../ is http://example.com/images/
• http://example.com/images//./ is http://example.com/images//
• http://example.com/images//../ is http://example.com/images/
• http://example.com/images/./ is http://example.com/images/
• http://example.com/images/../ is http://example.com/

Note that, in most cases, // will be like /. As said by @poncha,

Unless you're using some kind of URL rewriting (in which case the
rewriting rules may be affected by the number of slashes), the uri
maps to a path on disk, but in (most?) modern operating systems
(Linux/Unix, Windows), multiple path separators in a row do not have
any special meaning, so /path/to/foo and /path//to////foo would
eventually map to the same file.

However, in general / / won't become //.

You can use the following snippet to resolve your list of relative URLs to absolute ones:

var bases = [  "http://example.com/images/",  "http://example.com/images",  "http://example.com/",  "http://example.com/images//",  "http://example.com/images/ /"];var urls = [  "/images/image.jpg",  "image.jpg",  "./image.jpg",  "images/image.jpg",  "/image.jpg",  "../image.jpg"];function newEl(type, contents) {  var el = document.createElement(type);  if(!contents) return el;  if(!(contents instanceof Array))    contents = [contents];  for(var i=0; i<contents.length; ++i)    if(typeof contents[i] == 'string')      el.appendChild(document.createTextNode(contents[i]))    else if(typeof contents[i] == 'object') // contents[i] instanceof Node      el.appendChild(contents[i])  return el;}function emoticon(str) {  return {    'http://example.com/images/image.jpg': 'good',    'http://example.com/images//image.jpg': 'neutral'  }[str] || 'bad';}var base = document.createElement('base'),    a = document.createElement('a'),    output = document.createElement('ul'),    head = document.getElementsByTagName('head')[0];head.insertBefore(base, head.firstChild);for(var i=0; i<bases.length; ++i) {  base.href = bases[i];  var test = newEl('li', [    'Test ' + (i+1) + ': ',    newEl('span', bases[i])  ]);  test.className = 'test';  var testItems = newEl('ul');  testItems.className = 'test-items';  for(var j=0; j<urls.length; ++j) {    a.href = urls[j];    var absURL = a.cloneNode(false).href;      /* Stupid old IE requires cloning         https://stackoverflow.com/a/24437713/1529630 */    var testItem = newEl('li', [      newEl('span', urls[j]),      ' → ',      newEl('span', absURL)    ]);    testItem.className = 'test-item ' + emoticon(absURL);    testItems.appendChild(testItem);  }  test.appendChild(testItems);  output.appendChild(test);}document.body.appendChild(output);

span {  background: #eef;}.test-items {  display: table;  border-spacing: .13em;  padding-left: 1.1em;  margin-bottom: .3em;}.test-item {  display: table-row;  position: relative;  list-style: none;}.test-item > span {  display: table-cell;}.test-item:before {  display: inline-block;  width: 1.1em;  height: 1.1em;  line-height: 1em;  text-align: center;  border-radius: 50%;  margin-right: .4em;  position: absolute;  left: -1.1em;  top: 0;}.good:before {  content: ':)';  background: #0f0;}.neutral:before {  content: ':|';  background: #ff0;}.bad:before {  content: ':(';  background: #f00;}

<a href="newpage.html">

<a href="/newpage.html">