HTML <a> with href Attribute

February 10, 2021 7:26 pm IST

You are Here:

HTML <a> with href Attribute

The href attribute contains the URL of the page the link goes to.

Using href attribute you can navigate to a page within your website and the other website.

Relative URL

When navigating to a page within your website it is not necessary to mention the protocol (http), and the hostname (www.example.com)

Relative URL of this page is /html/tag-a/attribute-href

Absolute URL of this page is http://wikimass.com/html/tag-a/attribute-href

Tips: It is recommended to use relative URL over absolute URL when navigating to a page within your website because it saves lots of file size.

Example

HTML Online Editor

<!DOCTYPE html> <html> <body> <a href="/css">Learn CSS.</a> </body> </html>

Run

Absolute URL

When navigating to a page on the other website you have to use the absolute URL.

Example

HTML Online Editor

<!DOCTYPE html> <html> <body> <a href="https://www.google.com" target="_blank">Go to Google</a> </body> </html>

Run

href with JavaScript as Value

In the following example, href value is javascript:alert('Hello there!');, where javascript: in the front phase, tell the browser to execute the href value as javascript code.

Example

HTML Online Editor

<!DOCTYPE html> <html> <body> <a href="javascript:alert('Hello there!');">Click to Greet</a> </body> </html>

Run

Move to a Section within a Page

In the following example, the href value is #css;, where # (hash) in the front phase, tells the browser to move to the section in the same page where id="css".

Example

HTML Online Editor

<!DOCTYPE html> <html> <body> <h3 id="html">Learn HTML</h3> <h3 id="css">Learn CSS</h3> <h3 id="javascript">Learn Javascript</h3> <h3 id="jquery">Learn Jquery</h3> <h3 id="ajax">Learn AJAX</h3> <a href="#css">Move to CSS</a> <a href="#javascript">Move to Javascript</a> <a href="#html">Move to HTML</a> </body> </html>

Run

Mail to One User

In the following example, href value is mailto:one@gmail.com?subject=Curiosity&body=How%20are%20you?, where mailto: in the front phase, tells the browser to execute the href value as mail content.

Example

HTML Online Editor

<!DOCTYPE html> <html> <body> <p>Email Can be set via href attribute's value</p> <a href="mailto:one@gmail.com?subject=Curiosity&body=How%20are%20you?">Send Mail</a> </body> </html>

Run

Mail to Mulitple User

The following example is same as previous example, but here we are mailing to multiple user.

Note: Multiple users are comma-separated.

Example

HTML Online Editor

<!DOCTYPE html> <html> <body> <p>Email Can be set via href attribute's value</p> <a href="mailto:one@gmail.com,two@outlook.com?subject=Curiosity&body=How%20are%20you?">Send Mail</a> </body> </html>

Run

Mail With CC and BCC

The following example is same as previous example (Mail to one user), but here we are mailing to one user with CC (Carbon Copy) and BCC (Blind Carbon Copy).

Example

HTML Online Editor

<!DOCTYPE html> <html> <body> <p>Email Can be set via href attribute's value</p> <a href="mailto:one@gmail.com?cc=two@yahoo.com&bcc=three@yahoo.com&subject=Curiosity&body=How%20are%20you?">Send Mail</a> </body> </html>

Run