| PARAMETERS | USE |
|---|---|
| href | Specifies the destination address, which can be either an absolute or relative URL, or the name of an anchor. An absolute URL represents the complete website URL (e.g. http:/Google.com/), while a relative URL points to another directory or document within the same website . When pointing to another directory without explicitly specifying the document, web servers typically return the document “index.html” within that directory. |
| hreflang | Specifies the language of the linked resource indicated by the href attribute. Use language values from BCP 47 for HTML5 and RFC 1766 for HTML 4. |
| rel | Specifies the relationship between the current document and the linked document. For HTML5, the values must be defined in the specification or registered in the Microformats wiki. |
| target | Specifies where to open the link, such as in a new tab or window. Possible values include _blank, _self, _parent, _top, and framename (deprecated). However, forcing such behavior is not recommended as it violates user control over a website. |
| title | Specifies additional information about the link, often displayed as a tooltip when the cursor hovers over the link. This attribute can be used with almost all HTML tags. |
| download | Specifies that the target will be downloaded when the user clicks on the hyperlink. The value of the attribute will be the name of the downloaded file. There are no restrictions on allowed values, and the browser will automatically detect the correct file extension and add it to the file (e.g., .img, .pdf, etc.). If the value is omitted, the original filename is used. |
Anchor tags are commonly used to link separate webpages, but they can also be used to link between different sections within a single document, such as a table of contents or to launch external applications. This topic explores the implementation and application of HTML anchor tags in various contexts.
Link Another Site:
This showcases the essential function of the <a> (anchor) element:
<a href="http://link">Link To The Website</a>
It generates a hyperlink to the URL specified by the href attribute, displaying the anchor text “Link to Website”.
To indicate that this link points to an external website, you can employ the external link type:
<a href="http://link" rel="external">Link To The Website</a>
You can also link to a website that employs a protocol other than HTTP. For instance, to link to an FTP site, you would use:
<a href="ftp://link">This is the link to a FTP site</a>
In this scenario, the anchor tag prompts the user’s browser to connect to the URL using the File Transfer Protocol (FTP) rather than the Hypertext Transfer Protocol (HTTP).
Link Another Anchor
Anchors serve as navigational aids within an HTML page, allowing users to jump to specific sections. The <a> tag can target any element with an id attribute. To delve deeper into the concept of IDs, refer to documentation on Classes and IDs. Typically, anchors are employed alongside header tags to navigate to subsections within a page.
Imagine you’ve crafted a comprehensive page (page1.html) covering various topics:
<h2> Topic 1 </h2> <p> Content about topic 1 </p> <h2> Topic 2 </h2> <p> Content about topic 2 </p>
As your page expands, you might want to include a Table of Contents with quick-links to specific sections. By assigning an id attribute to each topic:
<h2 id="Topic1"> Topic 1 </h2> <p> Content about the topic 1 </p> <h2 id="Topic2"> Topic 2 </h2> <p> Content about topic 2 </p>
You can seamlessly integrate anchors into your table of contents:
<h1> Content </h1> <a href='#Topic1'> Click to jump to the Topic 1 </a> <a href='#Topic2'> Click to jump to the Topic 2 </a>
These anchors remain tethered to the page they reside on (page1.html), facilitating cross-site linking by referencing the page and anchor name
Link To The Page (Same Website)
Additionally, you can employ relative paths to link to pages within the same website:
<a href="/Site">Text</a>
The above link directs to the file at the root directory (/) of the server.
Both of the following links lead to the same location:
<a href="/page">Text</a>
<a href="http://Site/page">Text</a>
Link For Dialing A Number
Prefixing the href attribute with tel:, It initiate a call when clicked, ideal for mobile devices or software supporting phone call functionality:
<a href=”tel:11234567890″> Call This Number </a>
Opening A Link In A New Tab or Window
specify target=”_blank” to open the link in a new tab or window.
<a href=”http://link” target=”_blank”> Open the link in new tab/window </a>
Caution is advised due to potential security risks:
When using target=”_blank”, the originating site gains partial access to the window.opener object through JavaScript. This access enables the originating page to modify the window.opener.location of your page, potentially leading to redirects to malware or phishing sites.
To mitigate this risk, always include rel=”noopener” in your links when opening pages you do not control. This prevents the window.opener object from being transmitted with the request.
It’s important to note that Firefox currently does not support noopener. Therefore, for maximum effectiveness, use rel=”noopener noreferrer” instead.
Link To Run JavaScript
To execute JavaScript code within a link, you can utilize the javascript: protocol:
<a href=”javascript:myFunction();”>Run javaScript Code</a>
Alternatively, achieve the same functionality by using the onclick attribute:
<a href=”#” onclick=”myFunction(); return false;”>Run JavaScript Code</a>
The inclusion of return false; in the onclick attribute prevents the page from scrolling to the top when the link to # is clicked. Ensure that all code you intend to run precedes this statement, as further execution will halt thereafter.
It’s worth noting that appending an exclamation mark ! after the hashtag prevents the page from scrolling to the top. This workaround leverages the fact that any invalid slug prevents the link from scrolling anywhere on the page, as it fails to locate the referenced element (e.g., id=”!”). Alternatively, using any invalid slug (such as #scrollsNowhere) achieves the same result without requiring return false; in this case:
<a href=”#!” onclick=”myFunction();”>Run JavaScript Code</a>
It advisable to employ any of these methods? The answer is likely negative. Embedding JavaScript directly within HTML elements is generally discouraged. It’s preferable to employ pure JavaScript approaches that dynamically locate elements on the page and attach functions to them. This method involves listening for specific events. Additionally, contemplate whether the element in question is better suited to be a button rather than a link.
If it serves a functional purpose, using the <button> element is more appropriate.
Link To Run Client Email
If the href attribute of a link begins with mailto:, it will prompt the email client when clicked:
<a href=”mailto:name@abc.com”> Send an email to name@abc.com </a>
This will set name@abc.com as the recipient for the new email.
Using Cc and Bcc:
You can also include addresses for cc- or bcc-recipients using this format:
<a href=”mailto:mailto:name@abc.com?cc=name2@abc.com&bcc=name3@abc.com”>Send an email</a>
Using Subject and Body Text:
You can pre-fill the subject and body of the email as well:
<a href=”mailto:name@abc.com?subject=Example+subject&body=Message+text”>Send an email with subject and body</a>
These values must be URL encoded.
Clicking on a mailto: link will either open the default email client specified by your operating system or prompt you to choose one. However, not all options specified after the recipient’s address are universally supported across all email clients.