HTML Links Examples, Tips & Tricks

0

Few examples of HTML links with outputs, along with some helpful tips and tricks for using them effectively.

Table of Contents 
<a href="https://www.example.com">Go to Example Website</a>

Output:

  • The text “Go to Example Website” appears as a clickable link. When clicked, it takes you to https://www.example.com.

Tip: Always ensure the URL is correct and reachable. You can test your links to avoid broken ones.

<a href="/about.html">About Us</a>

Output:

  • The text “About Us” appears as a clickable link. When clicked, it takes the user to the about.html page of the same website.

Tip: Use relative paths (like /about.html) for links within the same site, which makes your site structure more flexible.

3. Anchor Link (Jump to Section on the Same Page)

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

<!-- Later in the page -->
<div id="section1">
  <h2>Section 1</h2>
  <p>This is section 1 of the page.</p>
</div>

Output:

  • The text “Go to Section 1” takes you to the section on the page with the ID section1.

Tip: Use anchor links to make long pages more navigable, like in FAQs or documentation.

<a href="https://www.example.com" target="_blank">Visit Example in New Tab</a>

Output:

  • Clicking “Visit Example in New Tab” opens https://www.example.com in a new tab.

Tip: Use target="_blank" for external links to prevent users from leaving your site, but be cautious as overuse of this can be annoying.

<a href="mailto:someone@example.com">Send us an email</a>

Output:

  • Clicking on “Send us an email” opens the user’s default email client with a new email draft addressed to someone@example.com.

Tip: You can pre-fill the subject and body using URL encoding:

<a href="mailto:someone@example.com?subject=Inquiry&body=Hello, I have a question.">Send Email</a>

<a href="https://www.example.com">
  <img src="logo.png" alt="Example Logo" />
</a>

Output:

  • Clicking the image logo.png will take you to https://www.example.com.

Tip: Always include an alt attribute in your <img> tag for accessibility. This also helps with SEO.

<a href="https://www.example.com" title="Go to Example Website for More Info">Visit Example</a>

Output:

  • The text “Visit Example” is displayed, and when hovered over, a small tooltip appears with the text “Go to Example Website for More Info.”

Tip: The title attribute can be helpful for giving users more context about the link. However, it is not always displayed consistently across all devices and browsers.

<a href="https://www.example.com" style="color: blue; text-decoration: none;">Click Here</a>

Output:

  • “Click Here” appears as a blue, non-underlined link.

Tip: Use CSS classes or external stylesheets for easier management and maintainability rather than inline styles. For example:

<a href="https://www.example.com" class="link-style">Click Here</a>

<style>
  .link-style {
    color: blue;
    text-decoration: none;
  }
</style>

<a href="file.pdf" download>Download PDF</a>

Output:

  • Clicking “Download PDF” will download the file file.pdf rather than navigating to it.

Tip: Use the download attribute to trigger file downloads. Be cautious, though, as some browsers block automatic downloads for security reasons.

<a href="https://www.example.com" class="button-link">Visit Example</a>

<style>
  .button-link {
    display: inline-block;
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
  }

  .button-link:hover {
    background-color: #45a049;
  }
</style>

Output:

  • The link looks like a button. When clicked, it navigates to https://www.example.com.

Tip: You can create button-like links with CSS, making them more interactive. The :hover effect can enhance the user experience.

  1. SEO Considerations: Make sure your links are descriptive and relevant. Avoid using generic text like “click here.” Instead, describe what the link is about, like “Read our latest blog post.”
  2. Accessibility: Ensure your links are accessible. Use the aria-label attribute if necessary, particularly when links contain only images. 
    <a href="https://www.example.com" aria-label="Go to Example Website">
  <img src="logo.png" alt="Example Logo" />
</a>
  3. Preventing Default Behavior: Sometimes, you may need to prevent the default link behavior (such as when handling the click with JavaScript). 
    <a href="#" onclick="alert('Link clicked!'); return false;">Click Me</a>
  4. Anchor Links with Smooth Scrolling: Use CSS for a smoother scrolling effect for anchor links: 
    html {
  scroll-behavior: smooth;
}

By mastering these link techniques, you can enhance the navigation and interactivity of your webpages while ensuring they are user-friendly and accessible.