46

I started learning html recently, and one thing that really confused me is why do some links have a forward-slash("/") before the path and some links don't?

ie.

<link href="/favicon.png" rel="icon">
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">

vs.

<dt><a href="reset/index.html">Reset CSS</a></dt>

Is one a relative path and one an absolute path? and how do href's work exactly? does it just stick on the path name after the base url?

anc1revv
  • 1,563
  • 7
  • 24
  • 42
  • 2
    Mark is correct, but I thought I would post a little info on how you can find these answers yourself if you really like looking at documentation. http://dev.w3.org/html5/spec/spec.html >> click on a element >> click on href attribute >> click valid URL. That explains URLs in the href attribute of an `a` element. It also has links to the URL standard if you are really curious http://tools.ietf.org/html/rfc3986. RFCs and the HTML 5 standard can resolve a lot of questions. They also tend to be more accurate than online blogs etc, but are definitely not as easy to read. – Daniel Moses May 18 '12 at 20:56

1 Answers1

70

Is one a relative path and one an absolute path?

Yes.

If your browser is currently pointing at http://foo/bar/baz.html then:

  • <a href="reset/index.html"> would link to http://foo/bar/reset/index.html.
  • <a href="/reset/index.html"> would link to http://foo/reset/index.html.

If there is a base element in the head of your HTML document then the relative path will be relative to the base. For example the link here will take you to http://example.com/foobar/reset/index.html regardless of where the page is located.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
 <HEAD>
   <TITLE>Base element example</TITLE>
   <BASE href="http://example.com/foobar/">
 </HEAD>

 <BODY>
   <P><a href="reset/index.html">Reset CSS</a>
 </BODY>
</HTML>
Mark Byers
  • 811,555
  • 193
  • 1,581
  • 1,452