Search code examples
htmlhyperlinkpathhrefsrc

Do I need "./" and "../" on HTML files paths?

I'm using relative URL in attributes like href and src. Do I really need to use ./ and ../ before the paths to correctly establish the link?

When I'm done coding index.html, I copy the code and use it on others .html files of my project. I find it frustrating having to correct every path then.

My projects folder structure is like:

website-project folder
      index.html

      css folder
          style.css

      img folder
           image.png

      about folder
          about.html

If I use index.html code to start about.html I need to change every path begging from ./ to ../. Using "Find & Replace" tool makes it easier but still it would be nicer if I could link to paths based on the root folder and not the present folder. Ex:

Using

href="website-project/img/image.png"

inside about.html would link to website-project/img/image.png instead of website-project/about/img/image.png which leads to an error.

UPDATE JULY 07 2016

Inside index.html page if I make a <a> with href="/about/about.html instead of linking to:

file:///home/guizo/Documents/website-project/about.html

it links to:

file:///about/about.html

The same goes on for the others links:

Solution

  • Try using

    href="/img/image.png"

    / refers to your root directory.

    EDIT: The above will not work for local static websites. In these cases, you should try using the <BASE href /> tag which tags links on to a fixed base address. It can be used as follows:

    For index.html:

    <html>
    <head>
        <title>index</title>
        <BASE href="file:///home/guizo/Documents/website-project/" />
    </head>
    <body>
        <a href="about/about.html">Go to about</a>
    </body>
</html>

    For about.html:

    <html>
    <head>
        <title>About</title>
        <BASE href="file:///home/guizo/Documents/website-project/" />
    </head>
    <body>
        <a href="index.html">Go to index</a>
    </body>
</html>