Starting with a Forward Slash in HTML for "Href"

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>

Why does an HREF consisting of a plain forward slash direct to the homepage?

You are correct that it is incorrect, and it's almost certainly not intentional. Backslashes (\) are considered unsafe in URLs, and if a backslash is necessary in your URL you would normally have to encode it as %5C.

Why it works

As Rocket Hazmat pointed out in a comment on your question, most browsers automatically substitute / for \ in URLs.

So the link to \ is converted to /, which requests the root of the current server. The server is probably set up to serve some default file like index.php when it receives a request for a directory, and the result is loading the homepage.

Why it doesn't work in localhost

I don't know your local http server setup, but chances are it hasn't been configured to serve a specific page (like index.php) when it receives a request for a directory. So you are likely just seeing a directory listing of whatever is at the root of the local http server you are running locally.

What does it means when there is fowards slash after a href?

Forward slash at the start of an href means that it's a relative path, starting from the root of the website.

For example, in a page example.com/folder/page.html, an

<a href="newpage.html">

points to example.com/folder/newpage.html, while

<a href="/newpage.html">

points to example.com/newpage.html

Can you explain better the source-code thing?

hyperlink who's path is only a forward slash (/)

That link brings you to the public root, and then the default file kicks in.

It's the relative equivalent of an absolute path, such as http://stackoverflow.com/

In Linux and other Unix-like operating systems, a forward slash is used to represent the root directory, which is the directory that is at the top of the directory hierarchy and that contains all other directories and files on the system. Thus every absolute path, which is the address of a filesystem object (e.g., file or directory) relative to the root directory, begins with a forward slash.
Forward slashes are also used in URLs (universal resource locators) to separate directories and files, because URLs are based on the UNIX directory structure. A major difference from the UNIX usage is that they begin with a scheme (e.g., http or ftp) rather than a root directory represented by a forward slash and that the scheme is followed directly by the sequence of a colon and two consecutive forward slashes to indicate the start of the directories and file portion of the URL.

via: http://www.linfo.org/forward_slash.html

What would a forward slash mean in a href attribute?

It refers to the base URL of the webpage.

So if your URL is https://example.com, href="/" leads you to that.

What should we use forward slash / or backslash \ in absolute path of links?

URLs use forward slashes (/) (on all platforms).

Backslashes (\) are used for local file paths on Windows. URLs are not local file paths. Not even file: scheme URLs are local file paths — they are URLs.

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.

HTML link trailing slash

These are two different URLs:

http://example.com/foo
http://example.com/foo/

Often, but not always, requesting the first URL will trigger the server to reply with a 301 Permanent Redirect to the second URL. The browser will then have to make a second request to the second URL.

This is most commonly the case when the URL is mapped on to a directory on the server's file system and the index.html (or other directory index) is being loaded.

Servers where the content is being dynamically generated (e.g. with an MVC framework like Perl's Catalyst) are less likely to do this. In that case you often have to be even more careful with where you link to because relative URLs will resolve differently from the two URLs.

Starting with a Forward Slash in HTML for "Href"