Hyperlinks, often referred to simply as 'links', connect various parts of a website, different files, or even other websites, providing a seamless navigation experience. In HTML, we create these essential navigational devices using the <a> tag coupled with an href attribute that specifies the destination of the link.
The example below establishes a simple link directed to https://www.codesignal.com. Once you click "Click me!", you'll be redirected to the specified website.
HTML, XML1<a href="https://www.codesignal.com">Click me!</a>
Hyperlinks employ two strategies, absolute and relative paths, to connect pages and resources seamlessly. Absolute paths contain the full URL of the website:
HTML, XML1<a href="https://www.codesignal.com/task/">Go to Tasks page on CodeSignal</a>
Conversely, relative paths exclude the domain, a feature particularly convenient when linking within your own website:
HTML, XML1<a href="about.html">About Us</a>
In this example, about.html is assumed to be in the same directory as the current page.
Sometimes, we might want the linked page to open in a new browser tab. This is where the target attribute comes in. When set to _blank, the target attribute ensures the linked page opens in a new window or tab.
HTML, XML1<a href="https://www.codesignal.com" target="_blank">Visit CodeSignal</a>
By clicking "Visit CodeSignal", you can keep the current page open while CodeSignal opens in a new tab.
Long pages can significantly enhance their navigability by implementing internal links. HTML uses the id attribute to formulate these useful internal links and to uniquely identify an element on the page.
HTML, XML1<a href="#section2">Go to Section 2</a> 2 3... 4 5<h2 id="section2">Section 2</h2> 6<p>This is Section 2 of the page.</p>
If you click "Go to Section 2", you'll be taken directly to the "Section 2" header.
Now, let's have a quick chat about the 'download' attribute. Remember those times when you clicked on a link and ended up downloading a file instead of opening it? That's the power of the 'download' attribute.
The 'download' attribute, when added to your anchor <a> tag, instructs the browser to download the URL instead of navigating to it. This is super useful whenever you want to provide a handy download link for a file on your website.
Let's consider that you have a PDF for a fantastic homemade chocolate cake recipe, and you want your users to be able to download it directly. You can use the 'download' attribute for this:
HTML, XML1<a href="chocolate-cake-recipe.pdf" download>Download Recipe</a>
In this piece of code, 'Download Recipe' becomes a link that, when clicked, downloads the 'chocolate-cake-recipe.pdf' file. You just helped someone possibly create a delicious dessert! 🍰
For the 'download' attribute, you can also specify a value that will serve as the default filename for the downloaded file (though some browsers might ignore this):
HTML, XML1<a href="chocolate-cake-recipe.pdf" download="Delicious_Chocolate_Cake_Recipe.pdf">Download Recipe</a>
With this code, the file will be downloaded as 'Delicious_Chocolate_Cake_Recipe.pdf'. Now, to the kitchens!
You've now explored the fascinating world of hyperlinks in HTML. We've unraveled the essentials of hyperlinking, investigated means to connect pages and resources, demystified the target attribute, and examined the effectiveness of internal linking. Are you eager to test your newfound knowledge? Hands-on exercises are waiting to consolidate your understanding and further develop your skills. Let's dive in!