---
title: "💭 How to Use HTML to Open a Link in a New Tab"
description: "!https://www.freecodecamp.org/news/how-to-use-html-to-open-link-in-new-tab/"
date: 2023-08-09
published: true
tags:
  - html
  - webdev
  - thought
template: link
---


<div class="embed-card embed-card-external">
  <a href="https://www.freecodecamp.org/news/how-to-use-html-to-open-link-in-new-tab/" class="embed-card-link" target="_blank" rel="noopener noreferrer">
    <div class="embed-card-image">
      <img src="https://cdn-media-2.freecodecamp.org/w1280/5f9c98dd740569d1a4ca1c7d.jpg" alt="How to Use HTML to Open a Link in a New Tab — Tabs are great, aren&#39;t they? They allow the multitasker in all of us to juggle a bunch of online tasks at the same time. Tabs are so common now that, when you click on a link, it&#39;s likely it&#39;ll open in a new tab. If you&#39;ve ever wondered how to" loading="lazy">
    </div>
    <div class="embed-card-content">
      <div class="embed-card-title">How to Use HTML to Open a Link in a New Tab</div>
      <div class="embed-card-description">Tabs are great, aren&#39;t they? They allow the multitasker in all of us to juggle a bunch of online tasks at the same time. Tabs are so common now that, when you click on a link, it&#39;s likely it&#39;ll ope...</div>
      <div class="embed-card-meta">freeCodeCamp.org &middot; freecodecamp.org</div>
    </div>
  </a>
</div>


Most of the time when creating links in html you want to maintain the default behavior, as this is what users are going to expect, but sometimes your site behaves such that it does not fit, and it does something unexpected anyways.  in this case you might want to make the default behavior to open the link in a new tab rather than relying on users to control click.

Use this with restraint as this can make your site feel janky and do things that do not feel natural to the web.

``` html
<p>Check out <a href="https://www.freecodecamp.org/" target="_blank" rel="noopener noreferrer">freeCodeCamp</a>.</p>
```

!!! note

    This post is a <a href="/thoughts/" class="wikilink" data-title="Thoughts" data-description="These are generally my thoughts on a web page or some sort of url, except a rare few don&#39;t have a link. These are dual published off of my..." data-date="2024-04-01">thought</a>. It's a short note that I make
    about someone else's content online <a href="/tags/thoughts/" class="hashtag-tag" data-tag="thoughts" data-count=2 data-reading-time=3 data-reading-time-text="3 minutes">#thoughts</a>