Creating HTML Hyperlinks with HREF Attribute: Sample Code for Button Links

This example demonstrates the creation of a hyperlink to W3Schools.com using the HTML anchor tag, which is represented as: Visit W3Schools.com!. By default, all browsers display links in the following manner: an unvisited link is blue and underlined, a visited link is purple and underlined, and an active link is red and underlined. However, links can be styled with CSS to achieve a different appearance. There are some who argue that links should always look like links and buttons should look like buttons.


Links are ubiquitous on web pages, enabling users to navigate from one page to another with just a click.


HTML Links – Hyperlinks

HTML links are hyperlinks.

By clicking on a hyperlink, you can navigate to a different file.

As you hover the mouse pointer over a hyperlink, it will transform into a tiny hand icon.

It’s worth noting that a link doesn’t necessarily have to appear as text. In fact, a link can be any HTML element, such as an image.


HTML Links – Syntax

The syntax of a hyperlink in HTML is denoted by

<a>

and can be created using
tag defines
.


link text

The

<a>

element’s key feature is its

href

attribute, which specifies the destination of the hyperlink.

The visible text to the reader is referred to as the link text.

By selecting the link text, the reader will be directed to the designated URL address.

Example


The demonstration illustrates the process of generating a hyperlink to W3Schools.com.

Visit W3Schools.com!

Try it Yourself »

In all browsers, links will be displayed in their default format.

  • The color of an underlined and un
    visited link
    text is blue.
  • A link that has been clicked on appears as both underlined and purple.
  • The
    active link
    is highlighted in red.

To achieve a different appearance, links can be styled using CSS.


HTML Links – The target Attribute

The linked page will appear in the existing browser window by default. However, if you want to modify this behavior, you need to define a different target for the link.

The location for opening the linked document is determined by the

target

attribute.

The potential values of the attribute

target

are limited to the following options.

  • The

    _self

    option sets the default behavior for opening documents. It opens them in the same window or tab that they were clicked on.

  • _blank

    – Launches the document in a fresh tab or window.
  • – Launches the file within the frame of its parent.
  • Code

    _top

    allows for the document to be opened in the entirety of the window.
Example

Employ the target=”_blank” attribute to launch the linked file in a fresh tab or window of the browser.

Visit W3Schools!

Try it Yourself »


Absolute URLs vs. Relative URLs

The two instances mentioned are utilizing a complete web address, also known as an absolute URL, in the

href

attribute.

A relative URL, which does not include the “https://www” part, is used to specify a local link to a page within the same website.

Example

Absolute URLs

W3C

Google

Relative
URLs

HTML Images

CSS
Tutorial

Try it Yourself »



HTML Links – Use an Image as a Link

Simply insert the

<img>

tag within the

<a>

tag to utilize an image as a hyperlink.

Example

HTML tutorial

Try it Yourself »


Link to an Email Address

To allow users to send a new email, simply insert

mailto:

within the

href

attribute to create a link that opens their email program.

Example
Send email

Try it Yourself »


Button as a Link

In order to turn an HTML button into a hyperlink, JavaScript code must be incorporated.

JavaScript provides the ability to define the actions that occur during specific events, like when a button is clicked.

Example

Try it Yourself »

Enhance your knowledge of JavaScript by exploring our JavaScript Tutorial.


Link Titles

The attribute

title

provides additional details regarding an element, which are typically displayed as a tooltip text upon hovering the mouse over the element.

Example
Visit our HTML Tutorial

Try it Yourself »


More on Absolute URLs and Relative URLs

Example

Utilize a complete web address to establish a hyperlink to a webpage.

HTML tutorial

Try it Yourself »

Example

Provide a hyperlink to a webpage that is situated in the html directory of the present website.

HTML tutorial

Try it Yourself »

Example

Provide a hyperlink to a webpage that is situated within the identical directory as the present webpage.

HTML tutorial

Try it Yourself »

The topic of file paths is covered in more detail in the HTML chapter dedicated to it.


Chapter Summary

  • Define a hyperlink using the element

    <a>

    .
  • Employ the

    href

    property for specifying the destination of the hyperlink.
  • Define the location to open the linked document by utilizing the attribute

    target

    .
  • Utilize the image as a hyperlink by implementing the

    <img>

    component within

    <a>

    .
  • To produce a link that launches the user’s email application, incorporate the

    mailto:

    system within the

    href

    attribute.

HTML Link Tags

Tag Description
<a> Defines a hyperlink

To access a comprehensive inventory of HTML tags, please refer to our HTML Tag Reference.

Frequently Asked Questions