Learn the Front-end Beta Search

<a>

Draft

Definition

The <a> HTML element (anchor element) creates a hyperlink to other web pages, files, locations within the same page, email addresses, or any other URL. It’s one of the most fundamental elements for web navigation and connectivity. The <a> element can contain text, images, or other HTML elements, making it versatile for creating various types of links.

Syntax

<a href="#">Link text</a>

Attributes

Essential Attributes

<a href="https://example.com" <!-- Destination URL -->
  target="_blank"
  <!-- Where to open link -->
  rel="noopener noreferrer"
  <!-- Security and relationship -->
  download="filename.pdf"
  <!-- Download link -->
  title="Link description"
  <!-- Tooltip text -->
  aria-label="Accessible label">
  <!-- Screen reader label -->
  Link text
</a>

Target Values

<a href="https://example.com" target="_blank">New tab</a>
<!-- Opens in new tab -->
<a href="https://example.com" target="_self">Same tab</a>
<!-- Opens in same tab -->
<a href="https://example.com" target="_parent">Parent frame</a>
<!-- Opens in parent frame -->
<a href="https://example.com" target="_top">Top frame</a>
<!-- Opens in top frame -->

Rel Values

<a href="https://example.com" rel="noopener">No opener</a>
<!-- Security -->
<a href="https://example.com" rel="noreferrer">No referrer</a>
<!-- Privacy -->
<a href="https://example.com" rel="external">External link</a>
<!-- External site -->
<a href="https://example.com" rel="nofollow">No follow</a>
<!-- SEO -->

Examples

HTML

Basic Link Types:

Internal Links:

Section 1 Section 2 About Page
Code
<div class="p-6 bg-gray-100 border rounded">
  <h3 class="mb-4 font-semibold">Basic Link Types:</h3>

  <div class="space-y-4">
    <div>
      <h4 class="mb-2 text-sm font-medium text-gray-700">External Links:</h4>
      <div class="space-x-4">
        <a href="https://example.com" class="text-blue-600 underline hover:text-blue-800">External Website</a>
        <a href="https://github.com" class="text-blue-600 underline hover:text-blue-800">GitHub</a>
        <a href="https://stackoverflow.com" class="text-blue-600 underline hover:text-blue-800">Stack Overflow</a>
      </div>
    </div>

    <div>
      <h4 class="mb-2 text-sm font-medium text-gray-700">Internal Links:</h4>
      <div class="space-x-4">
        <a href="#" class="text-green-600 underline hover:text-green-800">Section 1</a>
        <a href="#" class="text-green-600 underline hover:text-green-800">Section 2</a>
        <a href="#" class="text-green-600 underline hover:text-green-800">About Page</a>
      </div>
    </div>

    <div>
      <h4 class="mb-2 text-sm font-medium text-gray-700">Email Links:</h4>
      <div class="space-x-4">
        <a href="mailto:info@example.com" class="text-purple-600 underline hover:text-purple-800">Send Email</a>
        <a href="mailto:contact@example.com?subject=Hello&body=Message" class="text-purple-600 underline hover:text-purple-800">Contact with Subject</a>
      </div>
    </div>

  </div>
</div>
HTML

Link Styling Variations:

Code
<div class="p-6 bg-gray-100 border rounded">
  <h3 class="mb-4 font-semibold">Link Styling Variations:</h3>

  <div class="space-y-4">
    <div>
      <h4 class="mb-2 text-sm font-medium text-gray-700">Button-style Links:</h4>
      <div class="space-x-4">
        <a href="#" class="inline-block px-4 py-2 text-white transition-colors bg-blue-500 rounded hover:bg-blue-600">Primary Button</a>
        <a href="#" class="inline-block px-4 py-2 text-white transition-colors bg-gray-500 rounded hover:bg-gray-600">Secondary Button</a>
        <a href="#" class="inline-block px-4 py-2 text-blue-500 transition-colors border border-blue-500 rounded hover:bg-blue-500 hover:text-white">Outline Button</a>
      </div>
    </div>

    <div>
      <h4 class="mb-2 text-sm font-medium text-gray-700">Text Links:</h4>
      <div class="space-x-4">
        <a href="#" class="text-blue-600 underline hover:text-blue-800">Underlined Link</a>
        <a href="#" class="text-green-600 no-underline hover:text-green-800 hover:underline">Hover Underline</a>
        <a href="#" class="text-purple-600 border-b border-purple-600 hover:text-purple-800 hover:border-purple-800">Border Bottom</a>
      </div>
    </div>

    <div>
      <h4 class="mb-2 text-sm font-medium text-gray-700">Icon Links:</h4>
      <div class="space-x-4">
        <a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-800">
          <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
            <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/>
            <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"/>
          </svg>
          View Details
        </a>
        <a href="#" class="inline-flex items-center text-green-600 hover:text-green-800">
          <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
          </svg>
          Download
        </a>
      </div>
    </div>

  </div>
</div>
HTML

Navigation Links:

Code
<div class="p-6 bg-gray-100 border rounded">
  <h3 class="mb-4 font-semibold">Navigation Links:</h3>

  <div class="space-y-4">
    <nav class="p-4 bg-white border rounded">
      <h4 class="mb-3 text-sm font-medium text-gray-700">Main Navigation:</h4>
      <div class="flex space-x-6">
        <a href="#" class="text-gray-600 transition-colors hover:text-blue-600">Home</a>
        <a href="#" class="text-gray-600 transition-colors hover:text-blue-600">About</a>
        <a href="#" class="text-gray-600 transition-colors hover:text-blue-600">Services</a>
        <a href="#" class="text-gray-600 transition-colors hover:text-blue-600">Contact</a>
      </div>
    </nav>

    <nav class="p-4 bg-white border rounded">
      <h4 class="mb-3 text-sm font-medium text-gray-700">Breadcrumb Navigation:</h4>
      <div class="flex items-center space-x-2 text-sm">
        <a href="#" class="text-blue-600 hover:text-blue-800">Home</a>
        <span class="text-gray-400">/</span>
        <a href="#" class="text-blue-600 hover:text-blue-800">Products</a>
        <span class="text-gray-400">/</span>
        <span class="text-gray-600">Current Page</span>
      </div>
    </nav>

    <nav class="p-4 bg-white border rounded">
      <h4 class="mb-3 text-sm font-medium text-gray-700">Footer Links:</h4>
      <div class="grid grid-cols-2 gap-4 text-sm md:grid-cols-4">
        <div>
          <h5 class="mb-2 font-semibold text-gray-800">Company</h5>
          <div class="space-y-1">
            <a href="#" class="block text-gray-600 hover:text-blue-600">About Us</a>
            <a href="#" class="block text-gray-600 hover:text-blue-600">Careers</a>
            <a href="#" class="block text-gray-600 hover:text-blue-600">Press</a>
          </div>
        </div>
        <div>
          <h5 class="mb-2 font-semibold text-gray-800">Support</h5>
          <div class="space-y-1">
            <a href="#" class="block text-gray-600 hover:text-blue-600">Help Center</a>
            <a href="#" class="block text-gray-600 hover:text-blue-600">Contact</a>
            <a href="#" class="block text-gray-600 hover:text-blue-600">FAQ</a>
          </div>
        </div>
      </div>
    </nav>

  </div>
</div>
HTML

Links with Images:

Image as Link:

Clickable image that links to another page

Click the image to visit

Card with Link:

Product Image
Product Title

Product description that explains what this item is.

Learn More →
Code
<div class="p-6 bg-gray-100 border rounded">
  <h3 class="mb-4 font-semibold">Links with Images:</h3>

  <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
    <div class="p-4 bg-white border rounded">
      <h4 class="mb-3 text-sm font-medium text-gray-700">Image as Link:</h4>
      <a href="#" class="block group">
        <img src="https://via.placeholder.com/300x200/3B82F6/FFFFFF?text=Clickable+Image"
             alt="Clickable image that links to another page"
             class="object-cover w-full h-32 transition-opacity rounded group-hover:opacity-80">
        <p class="mt-2 text-center text-blue-600 group-hover:text-blue-800">Click the image to visit</p>
      </a>
    </div>

    <div class="p-4 bg-white border rounded">
      <h4 class="mb-3 text-sm font-medium text-gray-700">Card with Link:</h4>
      <a href="#" class="block group">
        <div class="flex items-center justify-center h-32 mb-3 bg-gray-200 rounded">
          <span class="text-gray-500">Product Image</span>
        </div>
        <h5 class="font-semibold text-gray-800 transition-colors group-hover:text-blue-600">Product Title</h5>
        <p class="text-sm text-gray-600">Product description that explains what this item is.</p>
        <span class="inline-block mt-2 font-medium text-blue-600 group-hover:text-blue-800">Learn More →</span>
      </a>
    </div>

  </div>
</div>
HTML

Advanced Link Features:

Phone and SMS Links:

Call (123) 456-7890 Send SMS
Code
<div class="p-6 bg-gray-100 border rounded">
  <h3 class="mb-4 font-semibold">Advanced Link Features:</h3>

  <div class="space-y-4">
    <div>
      <h4 class="mb-2 text-sm font-medium text-gray-700">Download Links:</h4>
      <div class="space-x-4">
        <a href="#" download class="inline-flex items-center text-green-600 hover:text-green-800">
          <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"/>
          </svg>
          Download PDF
        </a>
        <a href="#" download="my-image.zip" class="inline-flex items-center text-green-600 hover:text-green-800">
          <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"/>
          </svg>
          Download ZIP
        </a>
      </div>
    </div>

    <div>
      <h4 class="mb-2 text-sm font-medium text-gray-700">External Links with Security:</h4>
      <div class="space-x-4">
        <a href="https://external-site.com" target="_blank" rel="noopener noreferrer" class="text-blue-600 underline hover:text-blue-800">
          External Site (Secure)
        </a>
        <a href="https://another-external.com" target="_blank" rel="external nofollow" class="text-blue-600 underline hover:text-blue-800">
          External Site (SEO)
        </a>
      </div>
    </div>

    <div>
      <h4 class="mb-2 text-sm font-medium text-gray-700">Phone and SMS Links:</h4>
      <div class="space-x-4">
        <a href="tel:+1234567890" class="text-green-600 underline hover:text-green-800">Call (123) 456-7890</a>
        <a href="sms:+1234567890?body=Hello" class="text-green-600 underline hover:text-green-800">Send SMS</a>
      </div>
    </div>

  </div>
</div>
HTML

Link States and Accessibility:

Accessible Links:

Read More Learn More

This link takes you to a detailed explanation page.

Link with Title Attribute:

Privacy Policy

Skip Navigation Link:

Skip to main content
Code
<div class="p-6 bg-gray-100 border rounded">
  <h3 class="mb-4 font-semibold">Link States and Accessibility:</h3>

  <div class="space-y-4">
    <div>
      <h4 class="mb-2 text-sm font-medium text-gray-700">Accessible Links:</h4>
      <div class="space-y-2">
        <a href="#" class="block text-blue-600 underline hover:text-blue-800" aria-label="Read more about accessibility">
          Read More
        </a>
        <a href="#" class="block text-blue-600 underline hover:text-blue-800" aria-describedby="link-description">
          Learn More
        </a>
        <p id="link-description" class="text-sm text-gray-600">This link takes you to a detailed explanation page.</p>
      </div>
    </div>

    <div>
      <h4 class="mb-2 text-sm font-medium text-gray-700">Link with Title Attribute:</h4>
      <a href="#" title="This link will take you to our privacy policy page" class="text-blue-600 underline hover:text-blue-800">
        Privacy Policy
      </a>
    </div>

    <div>
      <h4 class="mb-2 text-sm font-medium text-gray-700">Skip Navigation Link:</h4>
      <a href="#" class="z-50 p-2 text-white bg-blue-600 sr-only focus:not-sr-only focus:absolute focus:top-0 focus:left-0">
        Skip to main content
      </a>
    </div>

  </div>
</div>

Browser Support

The <a> element is supported in all browsers and has been a standard HTML element since HTML 2.0.

Best Practices

  1. Always use href: Every link should have a valid href attribute
  2. Descriptive text: Use meaningful link text that explains the destination
  3. Security: Use rel="noopener noreferrer" for external links that open in new tabs
  4. Accessibility: Provide proper alt text for image links and use aria-labels when needed
  5. SEO: Use descriptive anchor text and avoid generic phrases like “click here”
  6. Performance: Consider using prefetch or preload for important links

Common Use Cases

  • Navigation: Creating menus, breadcrumbs, and navigation systems
  • Content links: Linking to related articles, products, or pages
  • Social media: Sharing links to social platforms
  • Downloads: Providing links to downloadable files
  • External references: Linking to external websites and resources
  • Contact information: Email, phone, and SMS links
  • Bookmarks: Creating anchor links within the same page
  • <nav>: Navigation section containing links
  • <ul> and <li>: Creating link lists and menus
  • <button>: Alternative to links for actions (use links for navigation)
  • <img>: Images that can be wrapped in links
  • <span> and <div>: Elements that can contain links