Relative and absolute paths of src and href in html

What is a path? Why are this something developers should care?

A path is simply the location of a file or directory within a file system,1 though it's not exactly an address. A path is both the location and how to get there (if this definition seems complicated, hopefully a few E Xamples (coming shortly!) would clear things up). The reason, Web developers need to understand paths are because the web is about URLs (such as Http://example.com/index . html), and URLs are primarily paths. This is evident in the URL syntax: scheme://domain:port/path?query_string#fragment_id . 2

The  domain   Part of the URLs maps to The ip  Address of a remote Computer. When accessing this remote computer using a given  scheme   (HTTP) and  Port   (by default, +), You is accessing a portion of the remote computer ' s file system. The layout of this accessible portion of the file system corresponds to The path  part of the URL.

For the remainder of this post, we'll use the fictional "example.com" as an example. example.com have the following directory structure on their web host:

/ (The web root)cssstyles.cssfilesexample.pdfindex.htmlimgfooter.pngheader.pngindex.html

When a user navigates to http://example.com/index.html in their browser, they is accessing the above file system and the Web server "serves" them index.html. If a user wanted to download the example.pdf, they would navigate to Http://example.com/files/example.pdf.

Types of paths

There is ways to specify a path:absolute or Relative. Absolute paths is a bit simpler, so we'll start with Them.

ABSOLUTE PATHS

The absolute path gives the location of a file or directory in reference to a root directory. For example.com (as-all websites!), The root directory is the Web root (or / ). let's look at some examples.

Given example.com, we ' d like/index.html to include a link to the Styles.css file. Using Absolute syntax, we ' d add a element to the like this link head : <link rel="stylesheet" href="/css/styles.css"> .

If you wanted to add the header.png image to/index.html using a absolute path, it would look like this: .

Let's look at a few more examples of absolute paths. using/files/index.html, Let's create a link to the Example.pdf: <a href="/files/example.pdf"> . And we ' ll add a link to the Styles.css in the head : <link rel="stylesheet" href="/css/styles.css"> .

Note that any of the absolute paths start with / . basically, You can always combine a domain (example.com) with the absolute path to get a fully qualified URL.

Speaking of fully qualified URLs, That's the alternative to writing an absolute path: <link rel="stylesheet" href="http://example.com/css/styles.css"> . I don ' t recommend it, Though.

RELATIVE PATHS

A relative path is a path to a given file or directory starting from another file or directory. To make this simple, we'll look at several examples.

Given example.com, we ' d like/index.html to include a link to the Styles.css file. Using relative syntax, we ' d add a  link  element to The  head  like this:  <link rel= " Stylesheet "href=" css/styles.css "; . This translates to "look in The  css  directory That's in the same directory as index.html and get the Styles.css file from There. "  note:the difference between this relative path and the absolute one are the Omission of the leading/.

If you wanted to add the header.png image to/index.html using a relative path, it could look like This:  . It could also look like This:  .   .  is a "special character" when used as This. It means "start at the current directory."

Let's look at a few more examples of relative paths. using/files/index.html, Let's create a link to the Example.pdf:  <a href= "example.pdf",   (or <a href= "./example.pdf"; ). So far, so Good. Now let's add the styles.css in The  head . Uh Oh. So far, we've always been looked in the "current directory" or Down. How to go up?

..is the ' special character ' to go up one directory. so, back to our Example. To add Styles.css head in the of/files/index.html, you ' d use the path ../css/styles.css . To go up and directories, use ../../ . Three directories: ../../../ . Etc.

which should I use? Relative or absolute? Or ... does it matter?

Given the ability to link to files using a relative or absolute path or a fully qualified URL, does it matter which one we Use?

For the end user, not really. I ' ve seen some articles that make some strange claims about performance (such as local absolute paths go through DNS, But relative paths don ' t!) Andseo benefits, But the only practical difference are a few bytes saved by using relative paths. I created a test page to demonstrate the lack of difference athttp://jeffreybarke.net/tests/paths/.

The primary reason to prefer one to another are for the benefit of the Web developer! For instance, relative links make it very easy-move "chunks" of a site from one location in a Web server to another wit Hout has the links break. As long as the chunks maintain their relative structure, they can moved to any subdirectory at WOULD.

The primary disadvantage to using relative links shows up when you start creating larger, more dynamic Sites. Each subdirectory of the site requires a different relative path to get at common assets (such as style sheets or images). Since large, Dynamic sites typically has a shared header file, it makes more sense to use absolute links.

Both relative and absolute paths make it easy-to-work in a site locally and then move the files to a remote Web Server. With relative paths, The local site structure doesn ' t need to match the remote one; With absolute paths, it does. (YOU'LL also need to run a Web server locally to use absolute paths, but That's also a necessity to run a dynamic site Loc Ally.)

The previous paragraph hints at the reason why I don ' t recommend using fully qualified Urls-without manipulating DNS Entri ES ( hosts with, for example), it's impossible to work locally. The local files would always point to the remote server!

References

1. "Path (computing)." (n.d.). In Wikipedia. retrieved, fromhttp://en.wikipedia.org/wiki/path_ (computing)
2. "Uniform Resource locator." (n.d.). In Wikipedia. Retrieved June, Fromhttp://en.wikipedia.org/wiki/uniform_resource_locator

Original Url: http://jeffreybarke.net/2013/06/paths-and-urls-relative-and-absolute/

Relative and absolute paths of src and href in html