HTML Links Explained - The Tag and Link Types
Links are what make the internet a real network. Without them, every page would be an isolated island.
With one click you move from one article to another, from one site to another, or even to a specific section on the same page.
All of this is thanks to one tag: <a>.
The <a> Link Tag - The Basics
<a> is short for Anchor. It is used to create any type of link.
The most important attribute is href, which defines where the link goes.
<!-- Basic syntax -->
<a href="destination-link">The text visitors see</a>
<!-- Real example -->
<a href="https://www.devarabi.com">Visit DevArabi</a>
The text you place between the link tags is what the visitor sees and clicks. The browser shows it in blue with an underline by default (you can change this with CSS).
The href Attribute - Link Types
1. External Links - To Other Websites
They point to another site on the internet. They must start with https:// or http://.
<a href="https://www.google.com">Search on Google</a>
<a href="https://www.youtube.com">Watch YouTube</a>
<a href="https://www.devarabi.com">DevArabi - Learn Programming</a>
https:// and only write www.google.com, the browser will treat it as an internal path and look for a file named www.google.com on your site. Always include the full protocol.
2. Internal Links - Within the Same Site
They point to other pages on your site. You do not need the full URL - just the relative path.
<!-- Link to a page in the same folder -->
<a href="about.html">About Us</a>
<!-- Link to a page in a subfolder -->
<a href="courses/html/intro.php">HTML Course</a>
<!-- Link to a page from the site root -->
<a href="/contact.php">Contact Us</a>
3. Email Links - mailto:
When clicked, it opens the user's email app with the recipient address already filled in.
<a href="mailto:contact@devarabi.com">Email Us</a>
<!-- You can also add a subject line -->
<a href="mailto:contact@devarabi.com?subject=Course%20Question">
Send a question
</a>
4. Phone Links - tel:
On mobile, clicking it opens the phone dialer directly.
<a href="tel:+212600000000">Call us: 0600-000-000</a>
5. Section (Anchor) Links - Within the Same Page
They jump to a specific section on the same page. Very useful on long pages.
They work by linking href="#section-id" to an element with that id.
<!-- Link to jump -->
<a href="#section-faq">Go to FAQ</a>
<!-- ...lots of content... -->
<!-- Target section -->
<h2 id="section-faq">Frequently Asked Questions</h2>
<p>Here you will find answers to your questions...</p>
The target Attribute - Where Does the Link Open?
Without target, a link opens in the same browser tab (it leaves your page).
You can control this behavior:
| Value | What it does | When to use it |
|---|---|---|
_self |
Opens in the same tab (default) | Internal links within your site |
_blank |
Opens in a new tab | External links to other sites |
_parent |
Opens in the parent frame | Rare - with iframes |
_top |
Opens in the top frame | Rare - with iframes |
<!-- External link opens in a new tab -->
<a href="https://www.google.com" target="_blank">Google (new tab)</a>
<!-- Internal link stays in the same tab -->
<a href="about.php" target="_self">About Us</a>
target="_blank" for external links, always add rel="noopener noreferrer" for security:
<a href="..." target="_blank" rel="noopener noreferrer">
Image as a Link - A Clickable Image
You can make any image a link by placing <img> inside <a>:
<!-- Clicking the logo returns to the home page -->
<a href="/index.php">
<img src="/assets/images/logo.png" alt="Back to home">
</a>
Links and SEO - Important Tips for Google
Anchor text is very important for search engines. Google reads the link text to understand what the linked page is about.
| Bad for SEO | Good for SEO |
|---|---|
Click here |
Learn HTML from scratch |
Press |
Free HTML course for beginners |
Link |
HTML attributes explained with examples |
https://devarabi.com/html |
HTML lessons - DevArabi |
Frequently Asked Questions - FAQ
What is the difference between an absolute link and a relative link?
Absolute: contains the full URL like https://devarabi.com/about.php - it works from anywhere.
Relative: a shorter path like about.php or ../images/logo.png - it works depending on the current file location.
How do I remove the underline from a link?
This is a CSS task, not HTML: a { text-decoration: none; }
You can also change the link color and different states (hover, visited...).
Can any HTML element be a link?
Yes, you can put any element inside <a> - text, image, button, even a full <div>. For example, a whole card can be a clickable link.
What happens if I use href="#" only?
It stays on the same page but jumps to the top (or reloads). It is used as a temporary placeholder for links that are not written yet. You can prevent the default behavior with JavaScript.