HTML HowTo 5 🏛️ How to Hyperlinks a
1. How to Create a Basic Hyperlink
Explanation: Use the <a> tag with the href attribute to link to another page or resource.
<a href="https://www.example.com">Visit Example</a>2. How to Open Links in a New Tab
Explanation: Add target="_blank" to open the linked page in a new tab or window.
<a href="https://www.example.com" target="_blank">Open in New Tab</a>3. How to Add Tooltip Text with title
Explanation: Use the title attribute for a tooltip that appears when hovering over the link.
<a href="https://www.example.com" title="This is an example site">Example Link</a>4. How to Create an Email Link
Explanation: Use mailto: followed by an email address to create a link that opens the user’s default email client.
<a href="mailto:contact@example.com">Send Email</a>5. How to Create a Phone Link
Explanation: Use tel: followed by a phone number to allow users to call directly from the browser.
<a href="tel:+1234567890">Call Us Now</a>6. How to Link to an Internal Section of a Page
Explanation: Use anchor links (#section-id) to jump to specific sections within the same page.
<a href="#section1">Go to Section 1</a>
<!-- Later in HTML -->
<h2 id="section1">Section 1 Content</h2>7. How to Force Download Instead of Navigating
Explanation: Use the download attribute to prompt a file download instead of navigating.
<a href="document.pdf" download>Download PDF</a>8. How to Link to Another Page in the Same Website
Explanation: Use relative paths for internal links within your site.
<a href="about.html">About Us</a>9. How to Link to an External Website
Explanation: Use absolute URLs to link to pages outside your domain.
<a href="https://www.google.com">Search Google</a>10. How to Add a Noopener and Noreferrer for Security
Explanation: When linking externally, use rel="noopener noreferrer" to improve security and privacy.
<a href="https://external-site.com" target="_blank" rel="noopener noreferrer">External Site</a>11. How to Style Links with CSS
Explanation: Use CSS properties like color, text-decoration, and cursor to style links.
a {
color: blue;
text-decoration: none;
cursor: pointer;
}12. How to Make Links Accessible with ARIA Labels
Explanation: Use aria-label for more descriptive link text for screen readers.
<a href="page.html" aria-label="Go to the contact page">Contact</a>13. How to Add a Class or ID for Styling and Scripting
Explanation: Use class or id attributes for targeting with CSS or JavaScript.
<a href="page.html" class="nav-link" id="home-link">Home</a>14. How to Specify Referrer Behavior with rel
Explanation: Use rel="noreferrer" to prevent sending the referrer header when clicking the link.
<a href="https://external-site.com" rel="noreferrer">External Link</a>15. How to Make Links Bold or Underline
Explanation: Use CSS to control how links appear visually, such as making them bold or adding underlines.
a {
font-weight: bold;
text-decoration: underline;
}Stop using slow, ad-bloated tool sites! 🤮
🔎 Search “KandZ Tools” on Google to use many professional utilities for free.
KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)
⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free
🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!
