HTML Links

HTML links, or hyperlinks, are a core feature of the web that allows users to navigate between different pages, files, or locations within a document.

Basic Structure of a Link

A link is created using the <a> (anchor) tag with the href (hyperlink reference) attribute specifying the URL of the target page.

Syntax

<a href="URL">Link Text</a>

Try It Now

Example

<a href="https://www.example.com">Visit Example</a>

Try It Now

This link directs users to “https://www.example.com” when clicked.

Types of Links

  1. External Links: Point to a different website. 
    <a href="https://www.google.com">Go to Google</a>

    Try It Now

  2. Internal Links: Point to another page within the same website. 
    <a href="about.html">About Us</a>

    Try It Now

  3. Anchor Links: Point to a specific section within the same page. 
    <a href="#section1">Go to Section 1</a>
<!-- Target section -->
<h2 id="section1">Section 1</h2>

    Try It Now

  4. Email Links: Open an email client to send an email. 
    <a href="mailto:example@example.com">Email Us</a>

    Try It Now

  5. Telephone Links: Initiate a phone call on mobile devices. 
    <a href="tel:+1234567890">Call Us</a>

    Try It Now

Opening Links in a New Tab

Use the target="_blank" attribute to open a link in a new tab.

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

Try It Now

Adding Titles to Links

The title attribute provides additional information about the link, usually displayed as a tooltip.

<a href="https://www.example.com" title="Visit the Example website">Visit Example</a>

Try It Now

Linking to Files

Links can also point to downloadable files such as PDFs, images, or documents.

<a href="files/document.pdf">Download PDF</a>

Try It Now

Styling Links with CSS

You can style links using CSS pseudo-classes to change their appearance based on user interaction.

<style>
  a {
    color: blue;
    text-decoration: none;
  }
  a:hover {
    color: red;
    text-decoration: underline;
  }
  a:visited {
    color: purple;
  }
</style>

Try It Now

  • :hover: Styles the link when the mouse hovers over it.
  • :visited: Styles the link after it has been clicked.

Disabling Links

While links cannot be truly “disabled,” you can make them non-functional using CSS or JavaScript.

Example

<a href="#" onclick="return false;" style="pointer-events: none; color: gray;">Disabled Link</a>

Try It Now

Best Practices

  1. Descriptive Text: Use meaningful link text that describes the destination.
    • Bad: <a href="page.html">Click here</a>
    • Good: <a href="page.html">Learn more about our services</a>
  2. Avoid Broken Links: Regularly check that all links are functional.
  3. Accessibility: Ensure links are keyboard navigable and provide accessible names.
  4. SEO Friendly: Use descriptive text and relevant URLs to enhance SEO.

HTML links are essential for web navigation and connectivity. By understanding the various types and how to effectively use and style them, you can create a seamless and user-friendly experience on your website.