How to link pages and resources using HTML
The <a> element is used to create hyperlinks in HTML. You would ask:
Why is it an
<a>tag when it is a link? Why not<link>? Excelent question, young Sherkock!
The a stands for “anchor”, which is a term used to describe a link that points to a specific location on a page or to another page. The <link> tag is used for linking external resources, such as stylesheets or scripts, is used in the <head> and is not used for creating hyperlinks.
How to create a link
To create a link, you need to use the <a> tag with the href attribute, which specifies the URL of the page or resource you want to link to. For example:
<a href="https://example.com">This is a link</a>This will create a link that points to https://example.com and displays the text “This is a link”.
And this is an absolute link. A link to a specific URL on the internet. It could be on your own website, or on another website. It could be a link to a page, an image, a video, or any other resource that is accessible via the internet.
These links are relative ones:
<a href="/about">About us</a>
<br />
<a href="contacts.html">Contacts</a>A local link to a page on your own website is specified without the https:// part and the domain.
As you can see, most pages do not have the .html extension. This is because most web servers are configured to automatically add the .html extension to the URL if it is not present. This is done to make the URLs cleaner and more user-friendly.
A domain is the name of a website, such as example.com. It is the address of the website on the internet. A domain can have multiple pages, which are accessed by adding a path to the domain, such as example.com/about or example.com/contacts.
Anchors
The anchor part of the <a> tag is used to create a link to a specific location on the same page. This is done by adding an id attribute to the element you want to link to, and then using the href attribute with a # followed by the id value. For example:
<h2 id="section1">Section 1</h2>
<p>This is the first section of the page.</p>
<a href="#section1">Go to Section 1</a>This will scroll the page to the section with the id of section1 when the link is clicked. In fact, the right links on this page are also anchors, which scroll the page to the specific section. Try it!
It can also be used to link to a specific part of another page. For example:
<a href="https://example.com#section2">Go to Section 2 on Example.com</a>Target attribute
You can also specify where the link should open using the target attribute. The most common value for the target attribute is _blank, which opens the link in a new tab or window. For example:
<a href="https://example.com" target="_blank">Open in a new tab</a>All the target attribute values are:
<a href="https://example.com" target="_self">Open in the same tab</a>
<a href="https://example.com" target="_blank">Open in a new tab</a>
<a href="https://example.com" target="_parent">Open in the parent frame</a>
<a href="https://example.com" target="_top">
Open in the full body of the window
</a>Title attribute
You can also add a title attribute to the link, which will be displayed as a tooltip when the user hovers over the link. For example:
<a href="https://example.com" title="Go to example.com">
<img src="..." alt="..." />
</a>This will also tell the browser that this link is to example.com, which can be useful for accessibility purposes.
Rel attribute
The rel attribute is used to specify the relationship between the current page and the linked page. It is often used to indicate that the linked page is an external resource or a related page. For example:
<a href="https://example.com" rel="external">External link</a>You can also use the rel attribute to specify that the link is a nofollow link, which tells search engines not to follow the link. This is useful for links to untrusted or low-quality sites. For example:
<a href="https://example.com" rel="nofollow">Nofollow link</a>The nofollow is used for SEO optimization purposes. It tells search engines not to follow the link and not to pass any link juice to the linked page. This is useful for links to untrusted or low-quality sites, or for links that are not relevant to the content of the page.
Emails and phone numbers
You can also create links to email addresses and phone numbers using the mailto: and tel: protocols, respectively. For example:
<a href="mailto:example@email.com">Email us</a>
<a href="tel:+1234567890">Call us</a>This will open the user’s default email client with a new message addressed to example@email.com, or initiate a phone call to the specified number when clicked on a mobile device.
Summary
In this lesson, we learned how to create hyperlinks in HTML using the <a> tag. We covered the following topics:
- How to create a link using the
hrefattribute - How to create anchors to link to specific sections of the same page
- How to use the
targetattribute to specify where the link should open - How to use the
titleattribute to add a tooltip to the link - How to use the
relattribute to specify the relationship between the current page and the linked page - How to create links to email addresses and phone numbers using the
mailto:andtel:protocols
Questions
About the author
Vasil Kostadinov
Software developer, specializing in React, Next.js and Astro for the frontend, as well as in Supabase and Strapi for the backend. Creates content in all shapes & sizes in his free time.