Quickly open Markdown link in new tab (target _blank)

To open a link in a new tab with target _blank in Markdown, use [link](url){:target="_blank"} or create an HTML <a> tag with target="blank".

But for GitHub README files, and on many other platforms that render Markdown, you simply can’t.

You can't open a link in a new tab in the GitHub README file Markdown editor.
You can’t open a link in a new tab in the GitHub README file Markdown editor.

What is Markdown?

Markdown is a lightweight markup language designed for simplicity and readability.

The original goal for Markdown was to enable people to write using an easy-to-read, easy-to-write plain text format, and optionally convert it to structurally valid HTML (or XHTML). In other words, Markdown is a text-to-HTML conversion tool for web writers. Many websites like Github.com, Notion.so, and Medium.com use Markdown in one way or another.

Opening a link in a new tab in Markdown can be beneficial for a number of reasons:

  1. User experience: By opening a link in a new tab, you keep your original page open, allowing the user to easily return to your content after they’ve finished going through the linked content.
  2. Decrease bounce rate: In web analytics, a bounce is when a user lands on your site and then leaves without any other interaction. When your site stays open in one tab while the linked content opens in another, it technically lowers your bounce rate which can be better for site metrics and SEO (Search Engine Optimization).
  3. Preserve context: If your content provides further reading or references via external links, opening these in a new tab helps to maintain the context for the user. The users will not have to go back and forth between pages to understand the context.
  1. Simplicity: Markdown was designed to be as simple as possible, and this does not provide support for attributes in its link syntax. The target="_blank" attribute required to open links in a new tab in HTML is absent from basic Markdown.
  2. Security: Links that open in a new tab can be a vector for a phishing attack known as “tabnapping“. If the linked site is malicious, it can potentially alter the content of the original page and trick users into providing sensitive information.
  3. User control: There’s an argument that it should be up to the user to decide whether they want a link to open in a new window or tab. This can be as simple as Ctrl + Click or a right-click in most browsers.

You can create a link that opens in a new tab in Markdown, create an HTML anchor <a> element, and set it’s target attribute to _blank, link in regular HTML:

Markdown
Visit <a href="https://wp.codingbeautydev.com">Coding Beauty</a> for more educational and interesting content.

Alternatively, create a link that opens in a new tab in Markdown with the [link](url){:target="_blank"} syntax. For example:

Markdown
Visit [Coding Beauty](https://wp.codingbeautydev.com) for articles on JavaScript, React, Next.js, and more.

This works in kramdown syntax and in the Jekyll framework.

Key takeaways

  • To open a link in a new tab in Markdown, use [link](url){:target="_blank"} or an HTML <a> tag with target="blank". However, not all platforms support this.
  • Markdown is a lightweight markup language for creating simple, readable text that can be converted to HTML.
  • Opening links in new tabs can enhance user experience, decrease bounce rates, and preserve context.
  • Many Markdown tools don’t support new tab links due to simplicity, security, and user control concerns.
  • Use an HTML <a> tag or [link](url){:target="_blank"} syntax to open links in new tabs.


Leave a Comment

Your email address will not be published. Required fields are marked *