Links - Hyperlinks

links are hyperlinks that allow you to jump to another document when clicked.

When you move the mouse over a link, the mouse cursor will change to a little hand.

Note: A link does not have to be text; it can be an image or any other HTML element!

`<a>` Tag

The HTML <a> tag defines a hyperlink. It has the following syntax:

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

The most important attribute of the <a> element is the href attribute, which indicates the link's destination.

The link text is the part that will be visible to the reader. Clicking on the link text will send the reader to the specified URL address.



<a href="https://mskinstitute.github.io/">MSK Institute</a>

This example shows how to create a link to "MSK Institute" web site:

Absolute URLs vs. Relative URLs

Both examples above use an absolute URL (a full address) in the href attribute.

A local link (to a page within the same website) is specified with a relative URL (without using https://www ):


<p>Absolute URLs</p>
<p><a href="https://www.google.com/">Google</a></p>

<p>Relative URLs</p>
<a href="../assets/img/youtube_logo.png">Youtube Logo</a>

`mailto:` Email Link

Use mailto: inside the href attribute to create a link that opens the user's email program:



<a href="mailto:mrsumitcontact@gmail.com">Send email</a>

`tel:` Call Link

Use tel: inside the href attribute to create a clickable phone number link:



<a href="tel: +918393042166">Call Us</a>

Use an Image as a Link

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


<!-- Link Youtube -->
<a href="https://youtube.com" title='Open Youtube' target="_blank">
    <img src="../assets/img/youtube.png" width="80px">
</a>

<!-- Link Mail -->
<a href="mailto:mrsumitcontact@gmail.com">
    <img src="../assets/img/gmail.png" title='Send Mail' width="90px">
</a>

<!-- Link Tel -->
<a href="tel: +918393042166">
    <img src="../assets/img/call.jpg" title='Call Now' width="55px">
</a>

Button as a Link

To use an HTML button as a link, add some JavaScript code:

<button onclick="document.location='https://www.google.com/'" >Google</button>

Link Attributes

Target

By default, the linked page will open in the current browser window. To change this behavior, specify the target attribute.

The target attribute can have one of the following values:

_self - Default. Opens the document in the same window/tab.
_blank - Opens the document in a new window or tab.

Example

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



<a href="https://mskinstitute.github.io/" target="_blank">Visit MSK Institute</a>

Title

The title attribute specifies extra information about an element, typically shown as a tooltip text when the mouse hovers over the element:



<a href="mskinstitute.github.io/html/" title="Go to MSK Institute Admission Form">Admission at MSK Institute</a>

Download

The download attribute is used to indicate that the target will be downloaded when a user clicks on the link. You can specify a value that will be the name of the downloaded file.


                
<a href="/files/msk-brochure.pdf" download="MSK_Brochure.pdf">Download Brochure</a>

Link to a Page Section

To link to a particular section of a webpage:

Use the name or id attribute.
Use a hyperlink with # followed by the section name.

Link Colors

There are three types of links:

Active: Red with an underline.
Visited: Purple with an underline.
Unvisited: Blue with an underline.

Note: Link colors can be changed using CSS.

Tip: Links can be styled with CSS for a different appearance!