Why Would a Developer Place a Forward Slash At the Start of Each Relative Path

What does ./ (dot slash) refer to in terms of an HTML file path location?

./ is the the folder that the working file is in:

So in /index.htm ./ is the root directory

but in /css/style.css ./ is the css folder.

This is important to remember because if you move CSS from /index.htm to /css/style.css the path will change.

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?

Adding leading slash in urls

Its good practice to use / at string of redirect url.

Let's say you are browsing at domain.com/some-url/ and if you use redirect("home") it will redirect you to domain.com/some-url/home. But if you use redirect('/home') it will redirect you to domain.com/home.

Path starting with slash ensures that, the path is absolute to the
root directory and not the current directory. See this for more details.

a href= Music/bonapart.html ... /a works fine but a href= /Music/bonapart.html ... /a gives error

When resolving relative URLs you first determine the base URL.

For a link in an HTML document, that is the URL of the HTML document (unless overridden with a <base> element).

e.g. http://example.com/foo/bar contains your link.

Relative paths

Then if the URL is a relative path (i.e. is a path that does not start with a /):

Any query string and fragment identifier is removed from the base URL
Everything after the last / in the base URL is removed.
The path is appended

http://example.com/foo/bar + baz = http://example.com/foo/baz

Absolute paths

If the URL is an absolute path (i.e. starts with a single /) then:

Any query string and fragment identifier is removed from the base URL
The existing path (i.e. everything after the authority (hostname+port number)) is removed (note that you don't often see port numbers in URLs outside of development environments)
The path is appended

http://example.com/foo/bar + /baz = http://example.com/baz

Do not confuse an absolute path with an absolute url (the later of which starts with the scheme such as https://).

There is a useful diagram of the parts of a URL in section 3 of the URL specification

Difference between forward slash (/) and backslash (\) in file path

/ is the path separator on Unix and Unix-like systems. Modern Windows can generally use both \ and / interchangeably for filepaths, but Microsoft has advocated for the use of \ as the path separator for decades.

This is done for historical reasons that date as far back as the 1970s, predating Windows by over a decade. In the beginning, MS-DOS (the foundation to early Windows) didn't support directories. Unix had directory support using the / character since the beginning. However, when directories were added in MS-DOS 2.0, Microsoft and IBM were already using the / character for command switches, and because of DOS's lightweight parser (descended from QDOS, designed to run on lower end hardware), they couldn't find a feasible way to use the / character without breaking compatibility with their existing applications.

So, to avoid errors about "missing a switch" or "invalid switch" when passing filepaths as arguments to commands such as these:

cd/                        <---- no switch specified
dir folder1/folder2        <---- /folder2 is not a switch for dir

it was decided that the \ character would be used instead, so you could write those commands like this

cd\
dir folder1\folder2

without error.

Later, Microsoft and IBM collaborated on an operating system unrelated to DOS called OS/2. OS/2 had the ability to use both separators, probably to attract more Unix developers. When Microsoft and IBM parted ways in 1990, Microsoft took what code they had and created Windows NT, on which all modern versions of Windows are based, carrying this separator agnosticism with it.

As backward compatibility has been the name of the game for Microsoft from all of the major OS transitions that they've undertaken (DOS to Win16/DOS, to Win16/Win32, to Win32/WinNT), this peculiarity stuck, and it will probably exist for a while yet.

It's for this reason that this discrepancy exists. It should really have no effect on what you're doing because, like I said, the WinAPI can generally use them interchangeably. However, 3rd party applications will probably break if you pass a / when they expect a \ between directory names. If you're using Windows, stick with \. If you're using Unix or URIs (which have their foundation in Unix paths, but that's another story entirely), then use /.

In the context of C#: It should be noted, since this is technically a C# question, that if you want to write more "portable" C# code that works on both Unix and Windows (even if C# is predominantly a Windows language), you might want to use the Path.DirectorySeparatorChar field so your code uses the preferred separator on that system, and use Path.Combine() to append paths properly.

Web languages, directory/file.extension vs /directory/file.extension

If a path doesn't begin with / it is a relative URL. This means that the actual pathname is determined based on the URL of the document that contains the URL. So if you have a page with URL /dir1/dir2/dir3/file.extension, and it contains a link to directory/file2.ext2, clicking on the link will go to /dir1/dir2/dir3/directory/file2.ext2. But if that same link were in a page with URL /dir1/file.extension it would go to /dir1/directory/file2.ext2.

Relative URLs are useful when you have a collection of pages that you want to move around as a unit, such as copying them from a development environment to production. As long as the relationships between all the files stay the same, the links between them will work.

If the path begins with /, it's called an absolute URL (strictly speaking, it should also contain the protocol, such as http:, and the server name //www.company.com). It will be interpreted from the server's document root, no matter where the link appears. Absolute URLs are useful for referencing files that are not part of the same collection. For instance, you might have a Javascript library that's used by pages at various levels in your document hierarchy.

Why the forward slash in image source is not working?

The forward slash at the beginning instructs the browser to resolve the path relative to your web root directory on http://localhost/

As you mentioned in your comment this would correspond to the www/ directory on your file system. So /html_playground/images/html5.gif should work

Basically the forward slash is just appending the specified path to the domain.

Localhost setting for multiple projects broken links

First of all it is always better to create different virtual hosts Please refer this link to do the same https://www.kristengrote.com/blog/articles/how-to-set-up-virtual-hosts-using-wamp

use href links as (mypage.html) or (./mypage.html) which will add mypage.html to your last trailing "/" in url