What’s the difference between ./dogs.html and /dogs.html?

rfp-robotRFP ROBOT: Website Request for Proposal Generator

The time has come for a new website (or website redesign), which means you need to write a website request for proposal or web RFP. A Google search produces a few examples, but they vary wildly and don’t seem to speak really to your goals for developing or redesigning a new website. You need to write a website RFP that will clearly articulate your needs and generate responses from the best website designers and developers out there. But how?

Have no fear, RFP Robot is here. He will walk you through a step-by-step process to help you work through the details of your project and create a PDF formatted website design RFP that will provide the information vendors need to write an accurate bid. RFP Robot will tell you what info you should include, point out pitfalls, and give examples.

They are both URL paths. They have different names, though.
<!– root-relative –>
<a href=”./dogs.html”>Dogs</a>

<!– absolute –>
<a href=”/dogs.html”>Dogs</a>

There are also fully-qualified URLs that would be like:
<!– fully qualified –>
<a href=”https://website.com/dogs.html”>Dogs</a>

Fully-qualified URL’s are pretty obvious in what they do — that link takes you to that exact place. So, let’s look those first two examples again.
Say you have a directory structure like this on your site:
├── index.html
└── animals/
├── cats.html
└── dogs.html
If you put a link on cats.html that links to /dogs.html (an “absolute” path), it’s going to 404 — there is no dogs.html at the base/root level of this site! The / at the beginning of the path means “start at the very bottom level and go up from there” (with public/ being the very bottom level).
That link on cats.html would need to be written as either ./dogs.html (start one directory back and work up) or /animals/dogs.html (explicitly state which directory to start at).
Absolute URLs get longer, naturally, the more complex the directory structure.
├── animals/
└── pets/
├── c/
| └── cats.html
└── d/
└── dogs.html
With a structure like this, for dogs.html to link to cats.html, it would have to be either…
<!– Notice the TWO dots, meaning back up another folder level –>
<a href=”../c/cats.html”>cats</a>

<!– Or absolute –>
<a href=”/animals/pets/c/cats.html”>cats</a>
It’s worth noting in this scenario that if animals/ was renamed animal/, then the relative link would still work, but the absolute link would not. That can be a downside to using absolute links. When you’re that specific, making a change to the path will impact your links.
We’ve only looked at HTML linking to HTML, but this idea is universal to the web (and computers, basically). For example, in a CSS file, you might have:
body {
/* Back up one level from /images and follow this path */
background-image: url(./images/pattern.png);
…which would be correct in this situation:
├── images/
| └── pattern.png
└── style.css
But if you were to move the CSS file…
├── images/
| └── pattern.png
├── css/
| └── style.css
└── index.html
…then that becomes wrong because your CSS file is now nested in another directory and is referencing paths from a deeper level. You’d need to back up another folder level again with two dots, like ../images/pattern.png.
One URL format isn’t better than another — it just depends on what you think is more useful and intuitive at the time.
For me, I think about what is the least likely thing to change. For something like an image asset, I find it very unlikely that I’ll ever move it, so linking to it with an absolute URL path (e.g. /images/pattern.png) seems the safest. But for linking documents together that all happen to be in the same directory, it seems safer to link them relatively.
The post What’s the difference between ./dogs.html and /dogs.html? appeared first on CSS-Tricks.
Source: CssTricks

Posted on September 13, 2018 in Austin Web Designer, css, drupal design,, Drupal Developer, drupal developer austin, Drupal Development, Drupal Development Austin, Drupal Support, Expert Drupal Development, html, The, web, Web Design Services, website

Share the Story

Back to Top