0

Code-1

 <html>
        <head>
            <title>Relative Link</title>
        </head>
        <body>
            <p>
                child folder <a href="Music/17_2.html">17_2</a>
            </p>
    
        </body>
    </html>

Output

child folder 17_2

Code-2

<html>
    <head>
        <title>Relative Link</title>
    </head>
    <body>
        <p>
            
            child folder <a href="/Music/17_2.html">17_2</a>
        </p>

    </body>
</html>

Output

ERR_FILE_NOT_FOUND

What's the significance of extra forward slash / At beginning of path entered in the value of attribute href

Abhishek Mane
  • 619
  • 7
  • 20
  • @Ivar No. In the answer he mention when we start `/` forward slash it is absolute path it read from root of site. But why then it not finding my file ? – Abhishek Mane Jul 20 '21 at 14:43
  • 1
    Because your file is not at `/Music/17_2.html` from the root of your the site. (i.e. if you go to `http://example.com/Music/17_2.html`, your file will not be there.) – Ivar Jul 20 '21 at 14:44
  • See it contains in my folder and I am making webpage with .html in notepad it is not hosted anywhere. how it can start with `http` ? I don't know exactly what is happening I am new to html. – Abhishek Mane Jul 20 '21 at 14:49
  • 1
    If you are running it locally without any webserver, then `/` will point to the root of your directory tree. So if you have your file on `file:///C:/Users/User/Desktop/test.html`, then `href="/Music/17_2.html"` will take you to `file:///C:/Music/17_2.html`. If you want it to work with an absolute path, you need to provide the full path from the root of your drive. – Ivar Jul 20 '21 at 14:52
  • Thanks. Now I understand concept and also understand Q. you referred and answer to that. yes my Q. is duplicate one. – Abhishek Mane Jul 20 '21 at 15:35

1 Answers1

2

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 /):

  1. Any query string and fragment identifier is removed from the base URL
  2. Everything after the last / in the base URL is removed.
  3. 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:

  1. Any query string and fragment identifier is removed from the base URL
  2. 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)
  3. 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

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • fist of all thanks. Mostly I got all. How to determine Base URL and is it different for absolute path and relative path ? – Abhishek Mane Jul 20 '21 at 15:53
  • @AbhishekMane — Umm. See the second paragraph of this answer. It's the first thing I said after saying you needed to determine the base URL. – Quentin Jul 20 '21 at 16:08
  • I am not getting clearly that point. `http://example.com/foo/baz` it containing link we want to refer from html document which is present in `http://example.com/foo` right ? please elaborate and I am not hosting website on webserver just I am doing all this in file and notepad with .html extension. But I can understand. – Abhishek Mane Jul 20 '21 at 16:26
  • You type `http://example.com/foo/baz` into the address bar in your browser. That gives you a web page. It is the base URL for links in that webpage. The web page is built around an HTML document. That HTML document contains a link. That link has `href="baz"` or `href="/baz"`. You navigate to the page at the URLs described in this answer. – Quentin Jul 20 '21 at 16:27
  • Base URL is same no matter we choose absolute path or relative path. It is basically path up-to current directory right ? – Abhishek Mane Jul 21 '21 at 03:52
  • please do reply. What's difference between absolute URL and absolute path ? – Abhishek Mane Jul 22 '21 at 03:58
  • `http://example.com/foo/bar` is an absolute URL; `/foo/bar` is an absolute path – Quentin Jul 22 '21 at 07:53
  • @ Quentin is my 2nd last comment is right ? – Abhishek Mane Jul 22 '21 at 13:36