HTML Anchor <a> Tag
The anchor <a> tag in HTML is used to create links to another page, another section, or another website. With a couple of attributes, such as href, rel, target, and download links, they can also be customized.
Different link types you can create with an anchor tag;
Communication Links
These links trigger specific applications on the user’s device rather than opening a new webpage.
mailto:
mailto: attribute opens the default email client.
<a href="mailto:infojuniortoexpert.com">Email Us</a>tel:
tel: attribute initiates a call (great for mobile).
<a href="tel:+199999999999">Call Us</a>sms:
sms: atttribute opens the default messaging app.
<a href="sms:+199999999999">SMS Us</a>Functional & Resource Links
Download link and Script link are used to perform actions or handle specific file types.
Download Link
The download links force the browser to download the linked file instead of opening it.
<a href="guide.pdf" download>Download PDF</a>Script Link
Script links execute JavaScript code (though generally discouraged in favor of event listeners).
<a href="javascript:alert('Hello!');">Click Me</a>Relationship Types (rel Attribute)
The rel attribute doesn’t change where the link goes, but it tells search engines and browsers what the link represents. This is crucial for SEO and security.
rel=”nofollow”
rel=”nofollow”: Tells search engines not to pass “link juice” or authority to the destination. Used for paid links or untrusted content.
<a href="https://support.apple.com/en-us/125091" rel="nofollow">Apple Documentation</a>rel=”noopener” or rel=”norefferr”
rel=”noopener” or rel=”noreferrer”: Security essentials used with target=”_blank” to prevent the new page from accessing the original page’s window object.
rel=”sponsored”
rel=”sponsored”: Specifically for advertisements or paid placements.
rel=”ugc”
rel=”ugc”: For “User Generated Content,” like links inside a comment section.
Target Attribute
To control how these links open, use the target attribute:
target=”_self”: Opens in the same tab (It’s a default value, so there’s no need to specifically use it.).
<a href="https://support.apple.com/en-us/125091" target="_selt">Apple Documentation</a>target=”_blank”: Opens in a new tab or window.
<a href="https://support.apple.com/en-us/125091" target="_blank">Apple Documentation</a>Absolute, Relative, and Jump Links
There are three common link types used to move a user between pages or sections.
Absolute Links
Long version of internal link.
<a href="https://juniortoexpert.com/en/wordpress-en/">WordPress</a>Relative Links
Short version of internal link.
<a href="/en/wordpress-en/">WordPress</a>Detailed explanation for absolute URL and relative URL: https://juniortoexpert.com/en/absolute-and-relative-urls/
Jump Links
Anchor (Jump) Links are used to link to a specific ID on the same page.
<a href="#section-2">Jump to Section 2</a>
