How to quickly open Markdown in a 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.
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.
Why make a link open in a new tab in Markdown?
Opening a link in a new tab in Markdown can be beneficial for a number of reasons:
- 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.
- Decrease bounce rate: In web analytics, a
bounceis 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). - 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.
Why don’t many Markdown rendering tools allow links to open in a new tab?
- 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. - 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.
- 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 + Clickor a right-click in most browsers.
Open link in new tab with HTML <a> tag
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:
Visit <a href="https://codingbeautydev.com">Coding Beauty</a> for more educational and interesting content.Open link in new tab with {:target="_blank"}
Alternatively, create a link that opens in a new tab in Markdown with the [link](url){:target="_blank"} syntax. For example:
Visit [Coding Beauty](https://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 withtarget="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.
Every Crazy Thing JavaScript Does
Just when you thought you knew all the quirks.
Avoid painful bugs and save valuable time with Every Crazy Thing JavaScript Does, a captivating guide to the subtle caveats and lesser-known parts of JavaScript.
Get a free copy here today.
