3.2.5 Links to Resources

This topic explains how to create hyperlinks in HTML to redirect users to another webpage, document, or resource using the `<a>` tag.

Definition

Links to Resources: Links are helpful components of a webpage, via which you can redirect to another webpage or a document. Links are called Hyperlinks in HTML with the 'a' tag-pair.

Core Concept

Hyperlinks are like doors in a building. Just as a door lets you move from one room to another, a hyperlink lets you move from one webpage to another. Without links, the web would be a collection of isolated pages—links connect them into a vast, navigable network. You can link text, images, or any other element. When you click a link, the browser takes you to the destination, whether that's another page on the same website or a completely different website on the other side of the world.

Detailed Explanation

What are Hyperlinks?

Links are helpful components of a webpage, via which you can redirect to another webpage or a document. Links are called Hyperlinks in HTML with the 'a' tag-pair.

• Hyperlinks are easy to identify on a webpage, as the mouse cursor changes as soon as the cursor touches a link element.
• Hyperlinks can be associated not only to text but to images as well.
• The `<a>` tag is used to create hyperlinks.
• The `href` attribute specifies the destination address.

Syntax of a Hyperlink

The general syntax for defining a link is:

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

• `<a>`: The anchor tag (defines a hyperlink).
• `href`: The hyperlink reference (the address along with the path).
• `link text`: The text that is visible and clickable to the user.
• `</a>`: The closing anchor tag.

The `target` Attribute

Target is an optional parameter, but its value defines where to open the webpage.

Example: Adding a Resource Link in a Webpage

```html <html lang="en"> <head> <title>Link Tag Example</title> </head> <body> <!-- External Link --> <a href="https://www.nbf.org.pk">Visit National Book Foundation</a> <br> <!-- Internal Link --> <a href="Headings.html">Go to Headings HTML example</a> </body> </html> ```

• Visit National Book Foundation (clicking opens the NBF website)
• Go to Headings HTML example (clicking opens the local Headings.html file)

Types of Links

1. External Links: Links to a different website.

```html <a href="https://www.google.com">Go to Google</a> ```

2. Internal Links: Links to another page within the same website.

```html <a href="about.html">About Us</a> ```

3. Anchor Links: Links to a specific section within the same page.

```html <a href="#section2">Go to Section 2</a> ... <h2 id="section2">Section 2</h2> ```

4. Email Links: Opens the user's email client.

```html <a href="mailto:info@example.com">Send Email</a> ```

5. Image Links: Uses an image as a clickable link.

```html <a href="https://www.nbf.org.pk"> <img src="logo.jpg" alt="NBF Logo"> </a> ```

Opening Links in a New Tab

To open a link in a new tab, use `target="<sub>b</sub>lank"`:

```html <a href="https://www.nbf.org/" target="_blank">National Book Foundation</a> ```

• The value `_blank` opens the destination address in a new tab or window.
• The value `_self` (default) opens the destination address in the same tab or window.

Why Use Links?

• Navigation: Connect pages within a website.
• References: Link to external resources.
• Downloads: Link to files for download.
• Email: Open the user's email client.
• Interactivity: Engage users with clickable elements.

Intermediate Level

Hyperlinks are created with the `<a>` tag and the `href` attribute. The `href` specifies the destination URL, which can be an external website, an internal page, a specific section (anchor), or an email address. The `target` attribute controls where the link opens: `_blank` for a new tab, `_self` for the same tab. Links can be applied to text or images. They are essential for navigation and connecting resources on the web. The cursor changes when hovering over a link, making it easy to identify.

Important Points

• - Hyperlinks = clickable links to other resources.
• - Created with `<a>` tag and `href` attribute.
• - Syntax: `<a href="url">link text</a>`.
• - `target="<sub>b</sub>lank"` opens in new tab; `target="<sub>s</sub>elf"` opens in same tab.
• - Links can be text or images.
• - Types: External, Internal, Anchor, Email, Image.
• - Cursor changes when hovering over a link.

Remember

• - Link: `<a href="url">text</a>`.
• - `href`: Destination address.
• - `target="<sub>b</sub>lank"`: New tab.
• - `target="<sub>s</sub>elf"`: Same tab (default).
• - Link text: Visible, clickable text.
• - Links can be images too.

Common Mistakes

• - Forgetting `href`: Without `href`, the `<a>` tag doesn't create a link.
• - Using `target="<sub>b</sub>lank"` without `rel="noopener"`: Security risk (tabnabbing).
• - Writing "click here" as link text: Use descriptive text for accessibility.
• - Broken links: Ensure URLs are correct.
• - Confusing `href` and `src`: `href` is for links; `src` is for images.

Quick Revision

Hyperlinks are created with the `<a>` tag and `href` attribute. The `href` specifies the destination URL, which can be an external website, an internal page, an anchor, or an email address. The `target` attribute controls where the link opens: `_blank` for a new tab, `_self` for the same tab. Links can be applied to text or images and are essential for navigation on the web.

60-Second Revision

• Hyperlinks: `<a href="url">text</a>`.
• `href`: Destination address.
• `target`: `_blank` (new tab), `_self` (same tab).
• Types: External, Internal, Anchor, Email, Image.
• Key Point: Links connect web resources; use `<a>` with `href` to create them.