Search code examples
htmlhref

Navigation with <a> tag - href value

I'm newbie in web development and design, my question is the following:

When I'm creating my own page with following directory structure:

projectName [dir]
    |
    +-- public_html [dir]
            |
            +-- index.html  <-- main web page file
            +-- AnimationSrc [dir]
                    |
                    +-- animation1.html
                    +-- animation2.html
                    (...)

navigation from index.html to animation1.html is done using tag:

<li><a href="./AnimationsSrc/animation1.html" target="_self">Animation1</a></li>

Only this construction of href with leading dot and direct html file at end gives me correct results, which means that after selecting link I'm navigated from: 

http://localhost:8383/ProjectName/index.html

To:

http://localhost:8383/ProjectName/AnimationsSrc/animation1.html

If I delete leading dot, instead I got: 

http://localhost:8383/AnimationsSrc/animation1.html

Also, when I remove direct file name, page is not rendering as well.

But when I'm looking around other websites using firebug/any other browser tool I often see constructions like that:

From Bower.io:

<a href="/search">Search packages</a>

Where no leading dot is present and path is not pointing to specific html file

From Netbeans.org:

<a title="NetBeans&nbsp;IDE" href="/features/index.html">NetBeans IDE</a>

Where no leading dot is present.

Could someone please explain me, what's the difference? Why I'm forced to put that leading dot and direct link to html file, while e.g. Netbeas is doing same without leading dot, and bower only with directory? Is that related with underlying back-end technology? Some scripting?

Thank you in advance for help

Solution

  • / means the root of the current drive.

    ./ means the current directory.

    ../ means the parent of the current directory.

    SO when you are removing . then with / in front will navigate it to the root directory and will search for AnimationsSrc folder in root directory.

    Best practice is to use without / ie. href="AnimationsSrc/animation1.html"