href (HTML attribute)
Example
The example below shows a link to a style sheet in the same directory (or folder) on the server’s file system:
<link rel="stylesheet" type="text/css" href="basic.css" />
Description
The href
defines the location of the resource. This may be a style sheet in the
same directory (as shown in the example), a page somewhere else on the
same server, or even a resource held on another server.
If the referenced resource was in a directory that is one level higher than the referencing document, the syntax would be:
<link rel="stylesheet" type="text/css" href="../basic.css" />
../
equates to ‘move up one directory in the heirarchy’.
You can also reference a document relative to the web site’s root (anything after the domain name):
<link rel="stylesheet" type="text/css" href="/stylesheets/basic.css" />
This
basically means ‘refer to the document basic.css that can be found in
www.mydomain.com/stylesheets". This is a very handy way of referencing, as
you could move the document containing the link
anywhere on the file system and the reference would be
maintained.
If you are linking to a resource held on another server,
you would express the href using a complete URI, as
follows:
<link rel="stylesheet" type="text/css" href="http://www.somedomainname.com/stylesheets/basic.css" />
Value
The location of the destination document, relative to the referencing document, relative to the server root or as a complete URI containing the http:// protocol, the server name and the path to the document on that server.
It’s also possible to use an ftp://location (but not likely) or data, e.g:
<link rel="stylesheet" type="text/css"
href="data:text/css,body%20{%20background%3A%20green%3B%20}" />
Or, in glorious base64 format:
<link rel="stylesheet" type="text/css" href="data:text/css;base64,Ym9keSB7IGJhY2tncm91bmQ6IGdyZWVuOyB9" />
Compatibility
| IE | 5.5 | Full |
|---|---|---|
| 6.0 | Full | |
| 7.0 | Full | |
| Firefox | 1.0 | Full |
| 1.5 | Full | |
| 2.0 | Full | |
| Safari | 1.3 | Full |
| 2.0 | Full | |
| 3.0 | Full | |
| Opera | 9.2 | Full |
| 9.5 | Full |
Causes no compatibility issues. It has excellent support across all tested browsers.
User-contributed notes
There are no comments yet.
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.

