HTML <a> href Attribute

HTML <a> Tag

Definition and Usage

href This attribute specifies the URL of the page to which the link points.

href The value of the attribute can be any valid document's relative or absolute URL, including fragment identifiers and JavaScript code snippets. If the user selects the content within the <a> tag, the browser will attempt to retrieve and display href The attribute specifies a list of documents represented by the URL, or JavaScript expressions, methods, and functions to be executed.

If href If the attribute does not exist, the <a> tag will not be a hyperlink.

Tip:You can link to the top of the current page using href="#top" or href="#"!

Create Text Link

A simple <a> tag that refers to another document can be in the following form:

<a href="http://www.codew3c.com/index.html">CodeW3C.com Online Tutorial</a>

Browsers display the phrase 'CodeW3C.com Online Tutorial' (usually underlined blue text) with special effects, so users will know it is a hyperlink that can link to other documents. It looks like this:

CodeW3C.com Online Tutorial

Users can also use options in the browser to specify their own text color, and set the color of the link text before and after the link.

Tip:You can use CSS Pseudo-classesto add complex and varied styles to text hyperlinks.

Creating Image Links

More complex anchors can also include images. The following logo is an image link; clicking on the image will return to the W3school homepage:

<a href="http://www.codew3c.com/index.html">
<img src="/i/codew3c_logo_white.gif" />
</a>

The above code adds a hyperlink back to the homepage for the CodeW3C.com logo:

CodeW3C.com Online Tutorial

Most graphical browsers will place a special border around the image as part of the anchor. By putting the image's border attributeSetting it to 0 can remove the border of the hyperlink. You can also use CSS Border Propertiesto globally change the border style of an element.

Example

Example 1

The href attribute specifies the destination of the link:

<a href="https://www.codew3c.com">Visit CodeW3C.com</a>

Try It Yourself

Example 2

How to use an image as a link:

<a href="https://www.codew3c.com">
<img border="0" alt="W3School" src="/i/logo/w3logo.png" width="400" height="225">
</a>

Try It Yourself

Example 3

How to link to an email address:

<a href="mailto:someone@example.com">Send Email</a>

Try It Yourself

Example 4

How to link to a phone number:

<a href="tel:+8613888888888">+86 138 8888 8888</a>

Try It Yourself

Example 5

How to link to another part on the same page:

<a href="#section2">Go to Chapter 2</a>

Try It Yourself

Example 6

How to link to JavaScript:

<a href="javascript:alert('Hello World!');">Execute JavaScript</a>

Try It Yourself

Syntax

<a href="URL">

Attribute Value

Value Description
URL

The URL of the link.

Possible Values:

  • Absolute URL - Points to another website (such as href="http://www.example.com/index.html")
  • Relative URL - Points to a file within the website (such as href="index.html")
  • Link to an element with a specified id in the page (such as href="#section2")
  • Other Protocols (such as https://, ftp://, mailto:, file: etc.)
  • Scripts (such as href="javascript:alert('Hello');")

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support

HTML <a> Tag