50

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?

1
  • 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. 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 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. Commented May 18, 2012 at 20:56

1 Answer 1

74

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>
Sign up to request clarification or add additional context in comments.

6 Comments

Adding a base example would be helpfull.
if there is no base specified, what's the default base?
@buffer Yes. For any page of stackoverflow.com domain, / URL is the same as stackoverflow.com/.
How does canonical fit into this topic? e.g. <link rel="canonical" href="/wiki/HTML/Kopfdaten/meta" /> or <link rel="canonical" href="https://example.com/content.html">
And what is about root URLs like https://foo.bar.org. Is the beginning / translated to https://foo.bar.org or https://bar.org?
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.