Learn how to create hyperlinks with anchor tags, open links in new tabs, and understand the difference between absolute and relative URLs.
Links are what make the web a web. They let users navigate between pages, jump to sections, download files, and even send emails.
The HTML element for creating a link is the anchor tag: <a>. It uses the href attribute (short for "hypertext reference") to specify where the link points.
<a href="https://example.com">Visit Example</a>
The text between the opening and closing <a> tags is called the link text (or anchor text). This is what the user sees and clicks on. Good link text is descriptive — avoid vague phrases like "click here". Instead, describe the destination:
<a href="...">Click here</a><a href="...">Read the full documentation</a>By default, clicking a link navigates the current browser tab to the new page. If you want the link to open in a new tab instead, add the target="_blank" attribute:
<a href="https://example.com" target="_blank">Open in new tab</a>
When using target="_blank", it is a best practice to also add rel="noopener noreferrer" for security. This prevents the new page from accessing your page's window object:
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Safe external link</a>
Use target="_blank" for external links (links to other websites). For internal navigation within your own site, keep the default behavior so users stay in the same tab.
<!-- Absolute URL: full address including protocol -->
<a href="https://developer.mozilla.org">MDN Web Docs</a>
<!-- Relative URL: path relative to the current page -->
<a href="/about.html">About Us</a>
<a href="../contact.html">Contact (up one directory)</a>
<!-- Link to an email address -->
<a href="mailto:hello@example.com">Send us an email</a>
<!-- Link to a phone number -->
<a href="tel:+1234567890">Call us</a>
<!-- Link to a section on the same page (using an id) -->
<a href="#section-2">Jump to Section 2</a>
<h2 id="section-2">Section 2</h2>What attribute do you add to an anchor tag to make it open in a new browser tab?