← Back to All Tags

<a>

Establishes clickable navigation links

Quick Answer

What is the HTML <a> tag?

The <a> (anchor) tag creates hyperlinks to other pages, files, emails, or locations within the same page. The href attribute specifies the link destination. Additional attributes include target (controls where link opens), rel (relationship/security), and download (for file downloads). Links are essential for web navigation.

Definition and Usage

The <a> element creates hyperlinks enabling navigation between documents and resources.

The critical href attribute specifies the target destination for link navigation.

By default, links will appear as follows in all browsers:

  • An unvisited link is underlined and blue
  • A visited link is underlined and purple
  • An active link is underlined and red
Tip: If the <a> tag has no href attribute, it is only a placeholder for a hyperlink.
Tip: A linked page is normally displayed in the current browser window, unless you specify another target using the target attribute.

Browser Support

The <a> tag is supported in all major browsers:

Chrome
Chrome
Yes
Firefox
Firefox
Yes
Safari
Safari
Yes
Edge
Edge
Yes
Opera
Opera
Yes

Attributes

Attribute Value Description
href URL Specifies the URL of the page the link goes to
target _blank
_self
_parent
_top		 Specifies where to open the linked document
download filename Specifies that the target will be downloaded when a user clicks on the hyperlink
rel alternate
author
bookmark
external
help
license
next
nofollow
noreferrer
noopener
prev
search
tag 		Specifies the relationship between the current document and the linked document
type media_type Specifies the media type of the linked document
hreflang language_code Specifies the language of the linked document

Examples

Basic Link

Create a simple hyperlink to another page:

Example

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

Link Opens in New Tab

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

Example

<a href="https://www.example.com" target="_blank">Open in New Tab</a>
Security Note: When using target="_blank", always add rel="noopener noreferrer" for security reasons.

Email Link

Create a link that opens the user's email client:

Example

<a href="mailto:info@example.com">Send Email</a>

Phone Link

Create a link that allows users to call a phone number:

Example

<a href="tel:+1234567890">Call Us: +1 234 567 890</a>

Download Link

Create a download link using the download attribute:

Example

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

Jump to Section (Anchor Link)

Create a link that jumps to a specific section on the same page:

Example

<!-- Link -->
<a href="#section1">Jump to Section 1</a>

<!-- Target section -->
<h2 id="section1">Section 1</h2>

Link with Title (Tooltip)

Add a tooltip that appears when hovering over the link:

Example

<a href="https://www.example.com" title="Go to Example.com">Hover over me</a>

Button-Style Link

Style a link to look like a button using CSS:

Example

<style>
  .button-link {
    display: inline-block;
    padding: 12px 24px;
    background-color: #745af2;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    transition: background-color 0.3s;
  }

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

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

Try it Yourself

Interactive Example

Related Tags

  • <link>

    Defines external resources

  • <nav>

    Defines navigation links