HTML Links (Hyperlinks)

HTML links, also known as hyperlinks, are used to connect one web page to another. HTML links allow you to create clickable elements that take you to other web pages, files, or locations within the same page. 

HTML Link Syntax

Here's the syntax for creating a link in HTML:

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

The “a” tag creates the link element, and the “href” attribute specifies the URL or location that the link should go to. The link text is the text that appears on the web page and is what the user clicks on to follow the link.

Link Attributes

Links or <a> tag consist some attribute to define link behaviour and enhance their functionality inside HTML document. Lets see some important link attributes:

1. “href” Attribute: 

Specifies the destination URL of the link. It can be an absolute URL (e.g., https://www.example.com) or a relative URL (e.g., about.html).

2. “target” Attribute:

The "target" attribute is an HTML attribute used primarily with anchor tags (<a>) to specify where the linked content should be displayed when clicked. It determines the browser context or window in which the linked page or resource should open.

The "target" attribute accepts several values:

"_self": This is the default value. When a user clicks the link, the linked content will replace the current page in the same browser window or tab.

"_blank": When a user clicks the link, the linked content will open in a new browser window or tab, depending on the user's browser settings.

"_parent": This value is commonly used when working with framesets. When a user clicks the link, the linked content will open in the immediate parent frame of the frame containing the link.

"_top": This value is also commonly used with framesets. When a user clicks the link, the linked content will open in the full body of the window, breaking out of any frames.

Here's an example of an anchor tag with the "target" attribute:

<a href="https://www.example.com" target="_blank">Visit Example</a>

In this example, when a user clicks the "Visit Example" link, the website at "https://www.example.com" will open in a new browser window or tab, depending on the user's browser settings, because we set the "target" attribute to "_blank".

3. “rel” Attribute:

Describes the relationship between the current page and the linked URL. Common values include:

• "nofollow": Instructs search engines not to follow the link.
• "noopener": Prevents the linked page from accessing the opening page's window.opener property.
• "noreferrer": Prevents the browser from sending the referrer header when navigating to the linked URL.

4. “title” Attribute:

Provides additional information about the link when the user hovers over it. It appears as a tooltip.

5. “download” Attribute:

Specifies that the link should trigger a file download when clicked. The attribute value is the suggested name for the downloaded file.

Link Examples

Here are some examples of how links can be used in HTML:

1. Linking to a web page

To create a link to another web page, you simply need to provide the URL in the href attribute. Here's an example:

<a href="https://www.example.com">Visit Example.com</a>

This will create a link that takes the user to the Example.com website when clicked.

2. Linking to an email address

You can also create links that open the user's email client and create a new email message with a pre-filled recipient email address. Here's an example:

<a href="mailto:example@example.com">Email Example</a>

This will create a link that opens the user's email client with the recipient email address set to example@example.com.

3. Linking to a file

You can create links that download files by providing the file URL in the href attribute. Here's an example:

<a href="https://www.example.com/files/document.pdf">Download PDF</a>

This will create a link that downloads the document.pdf file from the Example.com website when clicked.

4. Linking to a location on the same page

You can also create links that take the user to a specific location on the same web page by using anchor tags and the href attribute. This is sometimes used to create bookmarks for documentation. Here's an example:

<a href="#section2">Jump to Section 2</a>
...
...
...
<h2 id="section2">Section 2</h2>

In this example, the link will take the user to the section of the page with an id of “section2” when clicked. The id attribute is used to create the anchor point that the link will target.

Overall, links are a fundamental part of HTML and allow you to create a seamless user experience by connecting web pages and other resources together.

Watch this Chapter Video on YouTube: