href (HTML attribute)

Spec
Depr. Version
No HTML 2
Browser support (more…)
IE5.5+ FF1+ SA1.3+ OP9.2+ CH2+
Full Full Full Full Full

Syntax

href="uri"

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 located elsewhere on the same server, or a resource held on another server.

If the referenced resource resided in a directory that was one level higher than the referencing document, the syntax would be as follows:

<link rel="stylesheet" type="text/css" href="../basic.css"/>

Here, ../ equates to the instruction “move up one directory level in the hierarchy.”

You can also reference a document relative to the web site’s root (that is, the folder or file after the domain name) like so:

<link rel="stylesheet" type="text/css" href="/stylesheets/basic.css"/>

This code basically says “refer to the document basic.css that can be found in www.mydomain.com/stylesheets.” This is a very handy way of referencing a document, as you can move the document containing the link to any location on the file system without changing the reference.

If you are linking to a resource that’s held on some other server, you’d express the href using a complete URI, as follows:

<link rel="stylesheet" type="text/css"
    href="http://www.somedomainname.com/stylesheets/basic.css"/>

Example

The example below shows a link to a style sheet in the same directory (or folder) as the linking document on the server’s file system:

<link rel="stylesheet" type="text/css" href="basic.css"/>

Value

This attribute takes as its 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 as values an ftp:// location (though it’s not common) or data, like so:

<link rel="stylesheet" type="text/css"
    href="data:text/css,body%20{%20background%3A%20green%3B%20}"/>

We can also use glorious base64 format:

<link rel="stylesheet" type="text/css"
    href="data:text/css;base64,Ym9keSB7IGJhY2tncm91bmQ6IGdyZWVuOyB9"/>

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full

It causes no compatibility issues, and has excellent support across all tested browsers.

User-contributed notes

There are no comments yet.

Related Products