HTML <a> Tag
The HTML <a> tag creates hyperlinks to pages, files, page sections, and email or phone links. See target, rel, and download examples.
The <a> tag is used to insert hyperlinks to other pages, or files, locations within the same page, email addresses, or any different URL. You can use both text and image as a hyperlink.
In the browser, hyperlinks differ in their appearance and color. By default, HTML links appear as underlined blue text. When you hover your mouse over a link, it turns red (active link). Links that are already clicked (visited links) become purple.
You can change the color of links, remove underline or change the color of the links using CSS styles.
The "download", "media", "hreflang", "target", "rel", and "type" attributes will be present only if the "href" attribute is present.
Until you define another target, a linked page is shown in the current browser window.
Syntax
The <a> tag comes in pairs. The destination of the link is set with the href attribute on the opening tag, and the clickable content (text or an image) is written between the opening (<a>) and closing (</a>) tags.
<a href="https://www.w3docs.com/">Visit W3docs</a>The text "Visit W3docs" becomes the clickable hyperlink, and clicking it navigates to the URL in href.
Attributes
The <a> tag can have attributes that provide additional information about it.
The href attribute
The href is a required attribute of the <a> tag. It defines a link on the web page or a place on the same web page, where the user navigates after having clicked on the link. The value of the attribute is either an anchor or a URL. The anchor points to the ID (unique identifier) of the part of the web page referenced. Before the ID we put a hash (#).
It looks like this:
HTML <a> Tag
<a href="url">the link text</a>
<a href="#a">the link text</a>Example of the HTML <a> tag with the href attribute:
Example of the HTML <a> Tag|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a href="https://www.w3docs.com/">W3docs.com</a>
</body>
</html>Result
Click on the link, and you will be redirected to the home page of our website.
Using the href attribute of the <a> tag with the <img> tag you can make a linked image.
Example of the HTML <a> tag for creating a linked image:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
height: 90vh;
}
</style>
</head>
<body>
<a href="https://en.wikipedia.org/wiki/France">
<img src="https://images.unsplash.com/photo-1549144511-f099e773c147?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt="France" />
</a>
</body>
</html>The target attribute
The target attribute is used to tell the browser where to open the document (by default, links open in the current window).
The target attribute can have the following values:
_blank– opens the link in a new window or tab._self– opens the link in the current window (this is the default)._parent– opens the document in the parent frame._top– opens the document in the full body of the window.
Example of the HTML <a> tag with the target attribute:
Example of the HTML <a> Tag with a target attribute|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a href="https://www.w3docs.com/" target="_blank">W3docs.com</a>
</body>
</html>Result
Security with target="_blank": rel="noopener noreferrer"
When you open a link in a new tab with target="_blank", the newly opened page can, in older browsers, gain access to your page through the JavaScript window.opener property. A malicious page could use this to redirect your original tab to a phishing site — an attack known as reverse tabnabbing.
To prevent this, add rel="noopener noreferrer":
<a href="https://example.com/" target="_blank" rel="noopener noreferrer">
External site
</a>noopener– setswindow.openertonullin the new tab, so the destination page cannot control or reference the page that opened it.noreferrer– does the same asnoopenerand also stops the browser from sending theRefererheader, so the destination does not learn which page the visitor came from.
Modern browsers now imply noopener automatically for any target="_blank" link, but it is good practice to set rel explicitly so the protection also applies in older browsers and is visible in your code.
The rel attribute
This attribute sets the relationship of the current document to the linked one. The attribute values can be as follows:
alternate– an alternative version of the document.author– reference to the author of the document or article.bookmark– a permanent link to be used for bookmarks.nofollow– links to an unendorsed document (this instructs the search engines that the crawler should not follow that link).noopener/noreferrer– security values used withtarget="_blank"(see above).
No follow value
If you want to create a nofollow link, use rel="nofollow". This informs search engines that you don't support the content at the other end of the link. The nofollow attribute value is generally used on paid links and advertising. Sometimes the unfollow is considered to be a tag or attribute, but in fact, it’s a value of the rel attribute.
Example of the rel attribute with the "nofollow" value:
Example of the "rel" attribute with the "nofollow" value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<p>This text is from <a href="https://www.lipsum.com/" rel="nofollow" target="_blank">Lorem Ipsum</a>.</p>
</body>
</html>The download attribute
The download attribute tells the browser to download the linked resource instead of navigating to it. It works for resources served from the same origin (and for blob: and data: URLs).
If you give the attribute a value, that value becomes the suggested file name for the saved file, regardless of the file's name on the server. If you leave it empty, the browser keeps the original file name.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<!-- Saves the file using its original name -->
<a href="/files/report.pdf" download>Download the report</a>
<!-- Saves the same file as "annual-report.pdf" -->
<a href="/files/report.pdf" download="annual-report.pdf">
Download the annual report
</a>
</body>
</html>Email and phone links: mailto: and tel:
Besides regular URLs, the href attribute can hold special schemes that open the visitor's email or phone app instead of a web page.
A mailto: link opens the default email client with the address pre-filled. You can also add a subject and body using query parameters:
<a href="mailto:[email protected]">Email us</a>
<a href="mailto:[email protected]?subject=Hello&body=I%20have%20a%20question">
Email us about your question
</a>A tel: link prompts the device to call the number, which is especially useful on mobile phones:
<a href="tel:+1234567890">Call us: +1 (234) 567-890</a>Linking to a section on the same page (fragments)
To jump to a specific part of a page, set href to a hash (#) followed by the id of the target element. This is called a fragment or anchor link.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<!-- The link -->
<a href="#section2">Go to Section 2</a>
<h2 id="section1">Section 1</h2>
<p>First section content...</p>
<!-- The target: its id matches the href without the # -->
<h2 id="section2">Section 2</h2>
<p>Second section content...</p>
</body>
</html>Clicking the link scrolls the page to the element whose id matches the value after the #. You can also link to a section of another page by combining a URL and a fragment, for example href="page.html#section2". To learn more about building link addresses, see HTML URL.
The hreflang attribute
The hreflang attribute states the language of the document the link points to (for example hreflang="es" for a Spanish page). It is purely informational — used by search engines and assistive technology — and does not change the current page. This is different from the global lang attribute, which declares the language of the element it is placed on.
<a href="https://es.example.com/" hreflang="es">Versión en español</a>Accessibility: write descriptive link text
Screen-reader users often navigate by jumping from link to link, hearing only the link text out of context. Generic text such as "click here" or "read more" tells them nothing about the destination. Always make the link text describe where the link goes.
<!-- Avoid -->
<p>To read our pricing, <a href="/pricing">click here</a>.</p>
<!-- Better: the link text is meaningful on its own -->
<p>Read about <a href="/pricing">our pricing plans</a>.</p>See HTML Links for more on linking best practices.
Attributes
| Attribute | Value | Description |
|---|---|---|
| charset | char_encoding | Defines the character-set of a linked document. Not used in HTML5. |
| coords | coordinates | Defines the coordinates of a link. Not used in HTML5. |
| download | filename | Defines that the target will be downloaded when a hyperlink is clicked. |
| href | URL | Defines the URL of the linked document. |
| hreflang | language_code | Defines the language of the linked document. |
| media | media_query | Defines what media/device the linked document is optimized for. |
| name | section_name | Defines the name of an anchor. Not used in HTML5. |
| ping | list_of_URLs | Defines a space-separated list of URLs to which, when the link is followed, post requests with the body ping will be sent by the browser (in the background). Typically used for tracking. |
| rel | alternate author bookmark external help license next nofollow noreferrer noopener prev search tag | Defines the relationship between the target object and the linked document. |
| rev | text | Defines a reverse link, the inverse relationship of the "rel" attribute. Not used in HTML5. |
| shape | default rect circle poly | Defines the shape of the hyperlink. Not used in HTML5. |
| target | _blank _parent _self _top | Defines where to open the linked document. |
| type | media_type | Defines the media type in the form of a MIME- type for the linked URL. |
The <a> tag also supports the Global Attributes and the Event Attributes.
How to style an HTML <a> tag
Links have four states you can style separately with CSS pseudo-classes. To work correctly, they must be written in this order: :link, :visited, :hover, :active (remember it as "LoVe HAte").
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a:link { color: #1a73e8; } /* unvisited link */
a:visited { color: #6f42c1; } /* visited link */
a:hover { text-decoration: none; } /* on mouse-over */
a:active { color: #d93025; } /* on click */
</style>
</head>
<body>
<a href="https://www.w3docs.com/">W3docs.com</a>
</body>
</html>You can also remove the underline or change the color of links with CSS.