The HTML `a` tag
Discover the basics of working with the HTML `a` tag to create links
Links are defined using the a
tag. The link destination is set via its href
attribute.
Example:
<a href="https://flaviocopes.com">click here</a>
Between the starting and closing tag we have the link text.
The above example is an absolute URL. Links also work with relative URLs:
<a href="/test">click here</a>
In this case, when clicking the link the user is moved to the /test
URL on the current origin.
Be careful with the /
character. If omitted, instead of starting from the origin, the browser will just add the test
string to the current URL.
Example, I’m on the page https://flaviocopes.com/axios/
and I have these links:
/test
once clicked brings me tohttps://flaviocopes.com/test
test
once clicked brings me tohttps://flaviocopes.com/axios/test
Link tags can include other things inside them, not just text. For example, images:
<a href="https://flaviocopes.com">
<img src="test.jpg">
</a>
or any other elements, except other <a>
tags.
If you want to open the link in a new tab, you can use the target
attribute:
<a href="https://flaviocopes.com" target="_blank">open in new tab</a>
I wrote 21 books to help you become a better developer:
- HTML Handbook
- Next.js Pages Router Handbook
- Alpine.js Handbook
- HTMX Handbook
- TypeScript Handbook
- React Handbook
- SQL Handbook
- Git Cheat Sheet
- Laravel Handbook
- Express Handbook
- Swift Handbook
- Go Handbook
- PHP Handbook
- Python Handbook
- Linux Commands Handbook
- C Handbook
- JavaScript Handbook
- Svelte Handbook
- CSS Handbook
- Node.js Handbook
- Vue Handbook
Also, JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025