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?
Definition and Usage. The href attribute specifies the URL of the page the link goes to. If the href attribute is not present, the <a> tag will not be a hyperlink. Tip: You can use href="#top" or href="#" to link to the top of the current page!
A trailing slash is a forward slash placed at the end of a URL. It's usually used to indicate a directory (as opposed to a file), but in SEO it can affect your rankings. Take a look at the URLs below and guess which one is 'correct'. Note that one of them has a trailing slash at the end.
In most cases, the tag is repeated at the end of the content, with the tag name preceded by a forward slash (e.g. </p>), to indicate that the action is no longer needed.
The "two forward slashes" are a common shorthand for "request the referenced resource using whatever protocol is being used to load the current page".
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With