In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > properties > href (location, a, area, link)

href property (location, a, area, link)

Browser support:

Specifies or returns the location of the destination.

Syntax:

object.href;

You can find the related objects in the Supported by objects section below.

This property is read/write.

HTML page for this property: href

Possible values:

String that sets or retrieves the URI of the target.

For internal links, the value of the id or name properties of the target object can be used as well (href='#jumpto'). If the value is an URL, then it can also be an absolute or relative path. Relative paths are relative to the base URL. The base URL is the location of the current document, but it can be overridden by the base tag.

Some possible values:

#IDorName

Link to an element with the specified id or name property within the current page.

http://...

Link to an external web page.

ftp://...

Connection to an FTP server.

mailto:...

Opens the default e-mail client's new e-mail dialog with the specified e-mail address.

file:...

Specifies the location of the file to download.

javascript:...

The script code to execute.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the href attribute:

<a href="http://www.example.com/" target="_blank">External Link</a>
<br />
<a href="#innerLink">Jump to inner Link</a>
<br />
<a href="mailto:support@example.com">mailto</a>
<br />
<a href="javascript: alert ('click');">anchor with JavaScript</a>
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<span id="innerLink">The inner destination</span>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example shows how to link a style document into a HTML document:

Code

style.css

<head>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    Some text content
</body>

body {
  background-color: #FF0000;
}

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example illustrates the use of the href property for an anchor:

<head>
    <script type="text/javascript">
        function AnalyzeTarget () {
            var anchor = document.getElementById ("myAnchor");

            var message = "";
            message += "hash: " + anchor.hash + "\n";
            message += "host: " + anchor.host + "\n";
            message += "hostname: " + anchor.hostname + "\n";
            message += "href: " + anchor.href + "\n";
            message += "pathname: " + anchor.pathname + "\n";
            message += "port: " + anchor.port + "\n";
            message += "protocol: " + anchor.protocol + "\n";
            message += "protocolLong: " + anchor.protocolLong + "\n";
            message += "search: " + anchor.search + "\n";

            alert (message);
        }
    </script>
</head>
<body>
    <a href="http://www.dottoro.com/test.php?id=2#bookmark" id="myAnchor">A sample anchor</a>
    <br /><br />
    <button onclick="AnalyzeTarget ();">Analyze the destination of the anchor above</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 4:

This example illustrates the use of the href property for the location object:

<head>
    <script type="text/javascript">
        function AnalyzeLocation () {
            var message = "";
            message += "hash: " + window.location.hash + "\n";
            message += "host: " + window.location.host + "\n";
            message += "hostname: " + window.location.hostname + "\n";
            message += "href: " + window.location.href + "\n";
            message += "pathname: " + window.location.pathname + "\n";
            message += "port: " + window.location.port + "\n";
            message += "protocol: " + window.location.protocol + "\n";
            message += "search: " + window.location.search + "\n";

            alert (message);
        }
    </script>
</head>
<body>
    <button onclick="AnalyzeLocation ();">Analyze the current location of the document</button>
</body>