“Markdown provides us with different ways to create links in documents. When we click on the link, it took us to the target page on the same window of our browser. This sometimes makes the user frustrated as it leads to another domain directly, and the reader might have to scroll through the whole document to find some specific section. Setting the links to load in a browser tab whenever a click is a quick fix for this scenario.”
In this article, we will learn to create a link that will open in a new tab when clicked.
Directing a Link in Markdown to Open in a New Tab
When you are creating documentation in markdown, for referencing or some other purposes, you will add links in your file. So when a user clicks on them, it will take them to the directed page. These links shall open the destination address in the same tab. You may face a situation where you want the link to open in a new window or tab of the browser. We will explain what works to achieve this and what does not yield the expected outcome with the practical implementation of the markdown script.
The tool for assembling the script has been initially picked. This tool is Visual Studio Code. After installing it, we launched the interface. From the upper left corner of the menu bar, select the option “File” and then create a new file. Select the file type as Markdown. You can verify the file data, which will be mentioned in the bottom right corner of the status bar where “Markdown” will be labeled. We must add a markdown extension which is “Markdown All in One,” in our tool. Markdown scripts can be previewed for the anticipated outcome. To open the preview window, hit the “Shift+Enter+V” keys. Now all the requisites to compile the script without any disruption have been accomplished; thus, we will commence the markdown script implementation.
The external links point to some external domain. We can create external links in markdown to open the link in another file or webpage. The syntax for creating external links is given below:
The link text that the user will see will be enclosed in the square brackets. And the URL of the link will be mentioned in the round brackets.
Using this syntax, we will create an external link in markdown. We have first created a heading with h1 size. For creating the heading of level-1, a single hash (#) symbol has to be used, which will be followed by a space, and then the title of the heading is added. So, we added the hash (#) and, after giving the space, wrote the heading “This Is The Sample Document”.
Also, to make the header bold, we have used the asterisks (*) delimiters. A pair of asterisks (**) must be placed before and after the text to turn it bold. This will yield us a first-level bold header in our document. We left a blank line and then added a second heading with h2 size by inserting double hashes (##), space, and the title of the heading as “Generate an external link”. Now we begin the main task, which is link generation.
For creating the external link, we have first inserted some text. It is your own choice whether you want the link to be enclosed in the text line or displayed separately. So we added the text “If you want to search for more information,” and then we created a link. The square brackets have been inserted, and within them, the text for the link is specified as “Open Google”. Right after it, we have put the round braces, and between the parentheses, the URL for the webpage is mentioned. In this case, we need the link to take us to the Google search page. So we provided the URL of the site, which is https://www.google.com/”. Then we wrote the text after it as “and write the query”. This script can be seen in the image here:
In the preview window, you will see a header that has been styled bold, then a second heading, and after that, a text line is rendered. This text line has a text string “Open Google” in blue color, which shows that it is a link. When you click on this blue text, it will direct you to Google’s search engine.
Let’s try clicking on it to open an external domain.
So it took us to the webpage on the supplied URL.
The link we have clicked will be opened in the same tab. You may need the link to be opened in a new window or tab instead of opening it in the same tab. Markdown does not provide any attribute to direct a link to open in a target tab. But markdown allows us to use the HTML in our markdown script to do this task.
To open a link in a new tab, we have an attribute “target” in HTML which will enable us to set a target where the link shall open. We have utilized the HTML tag “<a>”. This tag is employed to add a hyperlink. Before we introduced the HTML in our file, we first added a regular text line to inline the link with it. Then we inserted the “<a>” tag.
In this tag, we exercised some of its attributes. The first attribute is “href,” which refers to the hyperlink’s reference. This is a mandatory field because the link is created for the provided reference. So, we have provided Google’s URL as https://google.com” the other attribute we have used here is the “target”. The “target” property identifies when a link is clicked where it would be opened. This attribute provides several options regarding the opening of the link. We have specified the value “_blank”. Setting “_blank: as the value of the “target” attribute will link when clicked to open in a new window instead of opening it in the same frame. Between the opening and closing “<a>” tags, we have to write the title of the link. We have added the text as “Click Link,” and then the tag is closed with a backslash as “</a>”.
This is what our webpage will look like with a link in line with the text line. When we click on it, it will direct us to a new window-referenced webpage.
So we clicked the link, and it led us to a new window of our browser to access the webpage embedded in the link. In the same way, we can set other links in the document to open in a targeted window rather than in the same window.
We can also style the link text so it may look in a better format that visually feels good. So to do this, we have decided to make the text of the link bold and also italicize it. Our link’s text is “Click Link”; we have added three asterisks before the string and three after the string (without any gap between text and asterisks). In markdown, when we want the text to be both bold and italic, we put triple asterisk symbols around the text.
Both links we established for this lesson have differences that you may observe. The 2nd link looks visibly much better than the first one, which isn’t styled.
Conclusion
This article is based on markdown links attributes. Here the core discussion topic is to open an external markdown link in a new window. We made an example link in a markdown file and then clicked it, which directed us to the referenced webpage, but it opened the link in the same tab. Then another link using the HTML tags is generated for the same webpage, but we made it open in a new tab of the browser by using the “target” attribute. Also, we have learned to style the link text, so it may look visibly enhanced.
