« Previous Next »

Links

HTML links are created using the <a> (anchor) tag. Users can click a link to jump to another page, section, or resource.

Syntax

<a href="URL">Link Text</a>

Example

Output :

The target Attribute

By default, when a user clicks an HTML link, the browser loads the linked page in the same window or tab. The target attribute allows you to control where the linked document opens.

Syntax

<a href="URL" target="value">Link Text</a>

Available target Values

Value Description
_self Default. Opens in the same tab or window.
_blank Opens in a new tab or window.
_parent Opens in the parent frame.
_top Opens in the full window, removing any frames.

Examples

1. Open in Same Tab (default)

<a href="page.html" target="_self">Open in Same Tab</a>

2. Open in New Tab

<a href="https://example.com" target="_blank">Open in New Tab</a>

3. Open in Parent Frame

<a href="parent.html" target="_parent">Open in Parent Frame</a>

4. Open in Full Body (Top Frame)

<a href="main.html" target="_top">Open in Full Window</a>

Example target="_blank"

Output :

URLs vs. Relative URLs

Output :

Use an Image as a Link

Output :

Email Address

Output :

Button as a Link

Output :

Link Titles

Output :

Practice Exercises

Task 1: How to open link in new tab?

Goal: Create a functional web link that opens target URL in a new browser tab.
💡 Hint: Use <a href="..." target="_blank"> tag.
💡 Show Solution 
<html>
  <body>
    <h2>The target Attribute</h2>
    <a href="https://aitaurangabad.com" target="_blank">Visit Academy of Information Technology (AIT)</a>
    <p>If <code>target="_blank"</code>, the link will open in a new browser window or tab.</p>
  </body>
</html>
Output :

The target Attribute

Visit Academy of Information Technology (AIT)

If target="_blank", the link will open in a new browser window or tab.

Explanation: The href attribute defines the link URL, while target="_blank" forces the page to open in a new tab.
Task 2: How to create an email link?

Goal: Practice setting up a click-to-email hyperlink using standard HTML.
💡 Hint: Use mailto: inside the href attribute.
💡 Show Solution 
<html>
  <body>
    <h2>Link to an Email Address</h2>
    <p>To contact us at the Academy of Information Technology (AIT), click the email link below:</p>
    <p><a href="mailto:info@aitaurangabad.com">Send Email to AIT</a></p>
  </body>
</html>
Output :

Link to an Email Address

To contact us at the Academy of Information Technology (AIT), click the email link below:

Send Email to AIT

Explanation: Adding mailto: before an email address opens the user's default mail client when clicked.
Task 3: How to use image as link with title?

Goal: Practice wrapping an image inside an anchor tag to create a clickable image link with a tooltip.
💡 Hint: Wrap <img> inside <a href="..." title="..."> tag.
💡 Show Solution 
<html>
  <body>
    <h2>Image as a Link</h2>
    <p>Click on the AIT logo below to visit our homepage.</p>
    <a href="https://aitaurangabad.com" target="_blank" title="Visit AIT Official Website">
      <img src="AIT.png" alt="AIT Logo" style="width:120px;">
    </a>
  </body>
</html>
Output :

Image as a Link

Click on the AIT logo below to visit our homepage.

AIT
Explanation: Placing an <img> element inside an <a> tag makes the picture clickable, and the title attribute displays a helpful hover tooltip.
« Previous Next »