KandZ – Tuts

We like to help…!

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;
}

Leave a Reply