HTML Basics
HTML Links
Everything you need to know about creating links in HTML — absolute, relative, email, and more.
HTML Links
Links are found in nearly all web pages. Links allow users to click their way from page to page. HTML links are hyperlinks defined with the <a> tag.
The href Attribute
The most important attribute of the <a> element is the href attribute, which indicates the link's destination.
Link Types
Absolute URLs — A full web address:
<a href="https://devforgeacademy.com">Visit DevForge</a>
Relative URLs — A link within the same website:
<a href="/tutorials/html">HTML Tutorials</a>
Email Links — Opens email client:
<a href="mailto:hello@example.com">Email us</a>
The target Attribute
The target attribute specifies where to open the linked document:
_self— Default. Opens in same window/tab_blank— Opens in a new window/tab_parent— Opens in parent frame_top— Opens in full body of window
Link Colors
An unvisited link is underlined and blue. A visited link is underlined and purple. An active link is underlined and red.
Example
<!DOCTYPE html>
<html lang="en">
<body>
<!-- Absolute link -->
<a href="https://devforgeacademy.com">DevForge Academy</a>
<!-- Relative link -->
<a href="/tutorials/css">CSS Tutorial</a>
<!-- Open in new tab -->
<a href="https://github.com" target="_blank" rel="noopener noreferrer">
GitHub (opens new tab)
</a>
<!-- Email link -->
<a href="mailto:hello@devforgeacademy.com">Contact Us</a>
<!-- Link with title tooltip -->
<a href="/about" title="Learn about DevForge Academy">About</a>
<!-- Jump to section on same page -->
<a href="#section-2">Jump to Section 2</a>
<h2 id="section-2">Section 2</h2>
</body>
</html>