Navigation with tag - href value

Question

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

google for "relative vs absolute URLs", see e.g. http://www.colliope.com/learn/misc/relurls.shtml — mb21, Dec 30 '15 at 09:41
See http://stackoverflow.com/questions/2005079/absolute-vs-relative-urls — Michał Perłakowski, Dec 30 '15 at 09:48

score 3 · Accepted Answer · answered Dec 30 '15 at 09:49

3

/ 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"

answered Dec 30 '15 at 09:49

Master.Deep

792
5
20

Thank you for precise answer. Could you please elaborate, why in Bower.io example we can skip file name? – Tomas Dec 30 '15 at 13:42
Skipping file name is different concept.You skip file name extension by either adding some piece of code in htacess file or you can create folder structure for each page and inside that folder keep the page name index.html. So by default url will show only the folder name skipping the file name i.e. index.html. I think bower is using the latter option. – Master.Deep Dec 31 '15 at 11:40

Rizky Ariestiyansyah · Answer 2 · 2015-12-30T09:53:58.247

0

The difference is

<a href="http://www.example.com/example.css"> is an absolute URL, it mean points to another web site. <a href="/search"> is a relative URL, it mean points to a file within a web site.

You can learn about ./ and / difference here: http://www.dirigodev.com/blog/seo-web-best-practices/relative-vs-absolute-urls-seo/

edited Dec 30 '15 at 09:53

answered Dec 30 '15 at 09:45

Rizky Ariestiyansyah

766
7
19

Navigation with tag - href value

2 Answers2