Skip to main content

Links

Links may be found on practically every web page. Users can navigate between pages by clicking on links.

HTML Links - Hyperlinks​

HTML links are hyperlinks.

You can go to another page by clicking on a link.

When you move your cursor over a link, the mouse arrow transforms into a little hand.

note

An hyperlink need not be text-based. An picture or any other HTML element can be a link!

Syntax​

A hyperlink is defined by the HTML <a> element. Its syntax is as follows:

<a href="url">link text</a>

The href attribute of the a> element, which denotes the location of the link, is its most crucial component.

The portion that the reader will see is the link text.

The reader will be directed to the provided URL address by clicking on the link text.

Example
<a href="https://codingHabits.com/">Visit codingHabits.com!</a>
Loading...
danger

The link will not work inside the editor as the preview is sandboxed

tip

Links can of course be styled with CSS, to get another look!

HTML Links - The target Attribute​

The linked page will by default open in the current browser tab. You must provide a different target for the link in order to modify this.

Where to open the linked page is specified by the target attribute.

One of the following values may be specified for the target attribute:

  • _self - Default. Opens the document in the same window/tab as it was clicked
  • _blank - Opens the document in a new window or tab
  • _parent - Opens the document in the parent frame
  • _top - Opens the document in the full body of the window
Example

Use target="_blank" to open the linked document in a new browser window or tab:

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
Loading...

HTML Links - Use an Image as a Link

To use an image as a link, just put the <img> tag inside the <a> tag:

Example
<a href="https://codinghabits.online">
  <img src="/img/codinghabitslogo.png" alt="coding habits" />
</a>
Loading...

Inside the href attribute, use mailto: to construct a link that opens the user's email software (allowing them to send a new email):

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

Use document.location inside the onclick attribute to use buttons as links.

Example
<button onclick="document.location='https://codinghabits.online'">
  HTML Tutorial
</button>
Loading...

The title property provides more information about an element. When the mouse is moved over an element, the information is usually shown as a tooltip text.

Example
<a href="https://codinghabits.online" title="Go to Coding habits ">
  Visit our website
</a>
Loading...