HTML Links
Links navigate to other pages or to a part of a page. Learn to create HTML links with the <a> tag: href, absolute vs relative URLs, and targets.
Websites contain different types of links that take you directly to other pages or allow you to navigate to a particular part of the page. The links in HTML are called hyperlinks. They are defined using the <a> tag.
Hyperlinks are applied to a phrase, a word, an image or any HTML element.
The default color of links in HTML is:
- unvisited links: underlined and blue
- visited links: underlined and purple
- active links: underlined and red
This is the default style of links, but you can remove underline or change the color of the links using CSS styles.
Syntax
The <a> tag comes in pairs, the opening <a> tells where the link should start and the closing </a> indicates where the link ends.
To create a hyperlink, you should use the <a> tag and href attribute, the value of which is the URL, or location, where the link is pointing to.
HTML links
<a href="url">your text</a>.Example of the HTML <a> tag with the href attribute:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Link example</h2>
<a href="https://www.w3docs.com/">W3Docs.com</a>
</body>
</html>In the example above, we used <h2> to define a subheading and the <a> tag to create a link. Between the <a> and </a> tags we have the text W3Docs.com, which the browser renders as an underlined blue link. Clicking it redirects the user to the homepage of our website.
Target Attribute
To open a link in a new page, you need to add target="_blank" to your code. The target attribute specifies where exactly to open the linked page. With target="_blank" the linked page will open in a new window or in a new tab.
The most common values for target are:
_self— open in the same tab (this is the default, so you rarely write it)._blank— open in a new tab or window.
HTML Links
<a href="https://www.w3docs.com/" target="_blank" rel="noopener noreferrer">W3Docs.com</a>Why rel="noopener noreferrer" matters
Notice the rel="noopener noreferrer" on the link above. When you open a link with target="_blank", the new page can normally access the page that opened it through the window.opener property. A malicious page could use this to silently redirect your original tab to a phishing page — an attack called reverse tabnabbing.
Adding rel="noopener" cuts that reference, so the new page cannot touch your tab. noreferrer does the same thing and also stops the browser from sending the Referer header to the new page. As a rule, always add rel="noopener noreferrer" whenever you link to an external site with target="_blank".
ID Attribute
To navigate to a specific part of the page, use the id attribute.
Here is how you should do it:
-
Use the
idattribute to give a name to the part of the page where a user should be redirected after clicking on the link. The value of the attribute can be a word or a phrase that describes that part (if you use a phrase, there should be no spaces—use underscores instead.)
Ex.<h2 id="jump">Link example with id attribute</h2>. We used theidattribute called "jump". -
Create a hyperlink using the
idof the link target, preceded by a hash (#)
Ex.<a href="#jump">When you click on this link, you will be redirected to the part of the page with "jump" id</a>.
Now let’s see how this will look like in HTML code. In the example below, scroll down to the link at the bottom, click the link, and you'll return again to the top.
Example of the HTML <a> tag with the id attribute:
Example of the link with an id attribute
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2 id="jump">Link example with id attribute</h2>
<p>
Here can be any part of the page you want to the user to end up clicking on hyperlink. We use attribute id called “jump”.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum ut ipsum quis elementum. Curabitur a sem a ante pulvinar tincidunt. Nullam posuere arcu in erat laoreet, vitae efficitur ex venenatis. Quisque in fermentum nunc, vel consequat risus. Suspendisse risus purus, semper quis tempus eget, iaculis euismod velit. Quisque mi nunc, cursus et suscipit eget, gravida et nisi. Duis eros massa, eleifend eget tincidunt in, porta sit amet ante. Nunc eu feugiat quam. Morbi vel sapien ac dolor ultricies dapibus quis quis libero. Cras et auctor leo.
</p>
<p>
Donec accumsan sapien vitae diam commodo lobortis. Nam feugiat ullamcorper malesuada. Praesent fermentum nulla quis mauris consequat mollis. In lacus libero, laoreet nec aliquam in, vestibulum quis dui. Donec congue enim et lorem lobortis, ut suscipit augue congue. Integer efficitur ligula nec lectus aliquet, in luctus magna efficitur. Mauris euismod mauris viverra enim tincidunt efficitur. Ut imperdiet quis lorem in tincidunt. Nam magna orci, venenatis et felis rhoncus, semper maximus eros. Proin mauris mauris, sodales quis eleifend vel, convallis in leo. Curabitur vel auctor lacus. Integer vestibulum nisi magna, id malesuada erat consequat quis. Vivamus iaculis aliquam ullamcorper. Aenean faucibus posuere rhoncus. Mauris tincidunt magna velit, sed semper arcu venenatis non. Sed odio risus, luctus eget aliquam vel, elementum id sem.
</p>
<p>
Ut imperdiet pharetra nisl ut mollis. Aenean neque odio, volutpat a imperdiet sit amet, sollicitudin non dolor. Donec velit odio, lacinia sed dui in, dignissim consequat sem. Nullam vel vestibulum mi, ornare lacinia diam. Vivamus sed vestibulum ligula, a tempor magna. Nulla vitae nisi ligula. Vivamus euismod tincidunt justo varius rhoncus. Aliquam vitae enim odio. Nunc pretium, odio in fermentum fringilla, ipsum nulla aliquet magna, ac aliquet dui tellus viverra lacus. In vel feugiat elit. Nulla a pretium nunc, consequat blandit tellus. Proin sit amet molestie eros. Aliquam sit amet quam tincidunt, egestas nunc ut, vehicula tellus. Donec ullamcorper, ipsum cursus rutrum fermentum, ipsum sem semper orci, quis ultrices odio turpis sit amet tortor.
</p>
<p>
Phasellus ultrices at neque sit amet varius. Fusce molestie lacinia lorem, eu interdum urna tempor malesuada. Etiam nec ultricies nisi, ut fringilla nibh. Phasellus arcu metus, ultrices eu ipsum eu, fermentum fermentum tellus. Cras blandit massa turpis, eu condimentum purus suscipit ut. In hac habitasse platea dictumst. Sed nec magna sit amet mi congue aliquam. Integer tempor lobortis eros, ut finibus tortor fringilla id. Mauris mollis sollicitudin justo, et condimentum lacus. Nam tellus velit, efficitur nec efficitur eu, pharetra ac tortor. Mauris vitae sagittis purus.
</p>
<p>
Donec accumsan sapien vitae diam commodo lobortis. Nam feugiat ullamcorper malesuada. Praesent fermentum nulla quis mauris consequat mollis. In lacus libero, laoreet nec aliquam in, vestibulum quis dui. Donec congue enim et lorem lobortis, ut suscipit augue congue. Integer efficitur ligula nec lectus aliquet, in luctus magna efficitur. Mauris euismod mauris viverra enim tincidunt efficitur. Ut imperdiet quis lorem in tincidunt. Nam magna orci, venenatis et felis rhoncus, semper maximus eros. Proin mauris mauris, sodales quis eleifend vel, convallis in leo. Curabitur vel auctor lacus. Integer vestibulum nisi magna, id malesuada erat consequat quis. Vivamus iaculis aliquam ullamcorper. Aenean faucibus posuere rhoncus. Mauris tincidunt magna velit, sed semper arcu venenatis non. Sed odio risus, luctus eget aliquam vel, elementum id sem.
</p>
<p>
Ut imperdiet pharetra nisl ut mollis. Aenean neque odio, volutpat a imperdiet sit amet, sollicitudin non dolor. Donec velit odio, lacinia sed dui in, dignissim consequat sem. Nullam vel vestibulum mi, ornare lacinia diam. Vivamus sed vestibulum ligula, a tempor magna. Nulla vitae nisi ligula. Vivamus euismod tincidunt justo varius rhoncus. Aliquam vitae enim odio. Nunc pretium, odio in fermentum fringilla, ipsum nulla aliquet magna, ac aliquet dui tellus viverra lacus. In vel feugiat elit. Nulla a pretium nunc, consequat blandit tellus. Proin sit amet molestie eros. Aliquam sit amet quam tincidunt, egestas nunc ut, vehicula tellus. Donec ullamcorper, ipsum cursus rutrum fermentum, ipsum sem semper orci, quis ultrices odio turpis sit amet tortor.
</p>
<p>
Fusce ultricies ex eros, et maximus est feugiat vel. Ut non nunc turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi viverra eu dui congue pulvinar. Donec tincidunt, nulla sed sodales iaculis, felis sem dapibus sem, et viverra justo massa sed magna. Vestibulum eleifend ex vitae mattis iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p>
<a href="#jump">When we click on this link, we will be redirected to the part of the page with “jump” id</a>
</body>
</html>You can also jump to an id on a different page by adding the fragment to the end of that page's URL. For example, if the about page has an element with id="contact", this link opens that page and scrolls straight to it:
<a href="/about#contact">Contact us</a>How to Apply a Hyperlink to an Image
To apply a hyperlink to an image, you just need to put the image in the <a> tag. This is done with the <img> tag, which should have some required attributes:
- src - the source of the image
- alt - alternative text for the image
- width - width of the image
- height - height of the image
Example of the <a> and <img> tags for applying a hyperlink to an image:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a href="https://www.w3docs.com/">
<img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="logo" />
</a>
</body>
</html>HTML images will be covered in depth in the next chapter.
Link titles
The title attribute is used for specifying additional information about an element. This information is often displayed as a tooltip text when you move the mouse over the element.
Example of link titles:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Link Title Example</h1>
<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>The <span class="attribute">title</span> attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.</p>
<a href="https://www.w3docs.com/learn-html.html" title="Learn HTML">Learn more about HTML</a>
</body>
</html>Absolute vs. Relative URLs
The value you put in href can be one of two kinds of address. Knowing the difference is one of the most important parts of linking correctly.
An absolute URL is the complete web address, including the protocol (https://) and the domain name. Use it to link to a page on a different website:
<a href="https://en.wikipedia.org/wiki/HTML">More about HTML</a>A relative URL points to a page on the same website, described relative to where the current page lives. The browser fills in the protocol and domain for you. Relative URLs come in a few flavours:
<!-- Same folder as the current page -->
<a href="./contact.html">Contact</a>
<!-- One folder up, then into another folder -->
<a href="../images/logo.png">Logo</a>
<!-- Root-relative: starts at the site root, no matter where the current page is -->
<a href="/about">About us</a>How to choose:
- A leading
/(a root-relative path like/about) always starts from the top of your site, so the same link works on every page. This is usually the safest choice for site-wide navigation. ./means "this folder" and../means "go up one folder". These document-relative paths break if you later move the page to a different folder, so use them with care.- Use a full absolute URL only when the target is on another domain.
See HTML URL for a deeper look at how URLs are built.
Example of absolute and relative links:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>External and internal paths</h1>
<p><a href="https://en.wikipedia.org/wiki/HTML">More about HTML (absolute)</a></p>
<p><a href="/about">About us (root-relative)</a></p>
</body>
</html>Email and Phone Links
The href value is not limited to web pages. With special URL schemes you can open the user's mail client or, on a phone, start a call.
A mailto: link opens a new email addressed to the given address:
<a href="mailto:[email protected]">Email us</a>A tel: link lets mobile users tap to dial a phone number:
<a href="tel:+15551234567">Call us</a>The rel, download, and hreflang Attributes
Besides href, target, and title, the <a> tag accepts several other useful attributes.
The rel attribute describes the relationship between the current page and the linked page. You already saw rel="noopener noreferrer" for security. Another common value is rel="nofollow", which tells search engines not to pass ranking credit to the link:
<a href="https://example.com" rel="nofollow">Sponsored link</a>The download attribute tells the browser to download the target instead of navigating to it. You can give it a value to suggest a file name:
<a href="/files/report.pdf" download="annual-report.pdf">Download the report</a>The hreflang attribute states the language of the linked document. It does not change behaviour for users, but it helps browsers and search engines understand the target:
<a href="https://example.fr/" hreflang="fr">French version</a>For the complete list of attributes the <a> tag supports, see the HTML <a> tag reference.
Accessibility: Write Descriptive Link Text
Screen-reader users often jump from link to link, hearing only the link text out of context. Vague labels like "click here" or "read more" tell them nothing about where the link goes. Write link text that describes the destination on its own:
<!-- Avoid: meaningless out of context -->
<p>To learn about our pricing, <a href="/pricing">click here</a>.</p>
<!-- Better: the link text describes the target -->
<p>See our <a href="/pricing">pricing plans</a>.</p>Keep the meaningful words inside the <a> tags, make sure links look different from surrounding text, and avoid using the bare URL as link text for important links.