# Simple way to open in a new tab

**URL:** <https://discourse.gohugo.io/t/simple-way-to-open-in-a-new-tab/28677>\
**Category:** support\
**Created:** [October 5, 2020, 9:16pm UTC](https://discourse.gohugo.io/t/simple-way-to-open-in-a-new-tab/28677 "2020-10-05T21:16:45Z")\
**Posts on this page:** 1\
**Showing post:** 4

<div class="post-metadata">

**Author:** ![Hrishikesh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/hrishikesh/32/19176_2.png) [@Hrishikesh](https://discourse.gohugo.io/u/Hrishikesh)\
**Post date:** [October 6, 2020, 5:28pm UTC](https://discourse.gohugo.io/t/simple-way-to-open-in-a-new-tab/28677/4 "2020-10-06T17:28:07Z")

</div>

This is how I use it:

in my `layouts/_default/_markup/render-link.html`

```auto
<a

	{{ if or (strings.HasPrefix .Destination `http`) (strings.HasPrefix .Destination `#`) (strings.HasPrefix .Destination `/`) }}
	
		href = "{{ .Destination | safeURL }}"

		{{ else if strings.HasPrefix .Destination `mailto` }}

			href = "mailto:{{ .Text }}"

	{{ end }}

	{{ with .Title}}
		
		title = "{{ . }}"
	
	{{ end }}

	{{ if strings.HasPrefix .Destination "http" }}

		target = "_blank"
		rel = "nofollow noopener noreferrer"

		{{ else if strings.HasPrefix .Destination "mailto" }}

			onClick = "javascript:window.open('mailto:{{ .Text }}', 'mail'); event.preventDefault()"

	{{ end }}>
	
	<span>
		{{ .Text }}
	</span>

</a>

```

To break this down, you can use 4 types of links - External, Internal, `mailto` and `#`.

The first `if` condition parses the link and checks if the destination starts with `http` or `/` or `#`. If it starts with any of those, it’ll add that in the `href`. The `mailto` is slightly different. It directly uses the text.

The second `if` statement is the one that adds the `target = "_blank` if the link starts with `http`. For my personal satisfaction, I use JavaScript to force open `mailto` links in new tab.

Then, in markdown, I can use this like:

1. External link: `[text to link](https://www.foo.com/)`. Make sure to use `http` or `https` in the start as that’s how the detection of external link is working. This will open in new tab.

2. Internal link: `[text to link](/link-relative-to-domain)`. Make sure to use relative links or else, if you use absolute ones and end up prefixing them with `http`, they’ll open in new tab as well. This will open the link in same tab.

3. Hash link: `[text to link](#link)`. This will scroll the element with the `id` as `link`. The element should be present in the same page.

4. `mailto`: `[user@example.com](mailto)`. Just this much configuration is enough. Make sure to use just the word `mailto` and nothing else and the text to be linked should be an e-mail address.

---

_[View the full topic](https://discourse.gohugo.io/t/simple-way-to-open-in-a-new-tab/28677)._