html
/

Advanced HTML Links: Target, Download, Mail & More

Last Sync: Today

On this page

13
0%
5 min read
Remaining
5 minleft

Click any section to jump — progress syncs automatically

html

Advanced HTML Links: Target, Download, Mail & More

What are Advanced HTML Links?

Advanced HTML links extend the basic <a> tag functionality to include navigation behaviors, downloads, emails, and more.

Open Links in New Tab

HTMLRead-only
1
<a href="https://example.com" target="_blank">Open in new tab</a>

Download Attribute

HTMLRead-only
1
<a href="file.pdf" download>Download PDF</a>

Email Links (mailto)

HTMLRead-only
1
<a href="mailto:example@mail.com">Send Email</a>

Phone Links (tel)

HTMLRead-only
1
<a href="tel:+1234567890">Call Now</a>

Anchor Links (Jump to Section)

HTMLRead-only
1
<a href="#section1">Go to Section</a>

<h2 id="section1">Section 1</h2>

Linking to Specific Page Section

HTMLRead-only
1
<a href="page.html#section">Go to section in another page</a>

Image as Link

HTMLRead-only
1
<a href="https://example.com">
  <img src="image.jpg" alt="Example">
</a>

Button-like Link

HTMLRead-only
1
<a href="#" style="display:inline-block; padding:10px; background:#333; color:#fff; text-decoration:none;">Click Me</a>

Rel Attribute

HTMLRead-only
1
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Secure Link</a>

Best Practices

  • Use descriptive link text
  • Use rel="noopener noreferrer" for external links
  • Avoid using "click here" text
  • Ensure accessibility for links
  • Use anchor links for better navigation

Common Mistakes

  • Missing rel attribute with target=_blank
  • Using unclear link text
  • Broken anchor links
  • Overusing inline styles for links

Conclusion

Advanced HTML links provide powerful navigation and interaction features. Proper usage improves usability, security, and accessibility.

Try it yourself

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

Test Your Knowledge

Q1
of 3

Which attribute opens link in new tab?

A
open
B
target
C
link
D
new
Q2
of 3

Which attribute is used for downloads?

A
save
B
download
C
file
D
get
Q3
of 3

What does mailto do?

A
Call
B
Send email
C
Download
D
Open file

Frequently Asked Questions

What does target="_blank" do?

It opens the link in a new tab.

What is mailto?

It creates a link to send an email.

Why use rel="noopener"?

It improves security when opening external links.

Previous

html favicon

Next

html image maps

Related Content

Need help?

Explore our comprehensive docs or start a chat with our tech experts.