Target blank

Table of contents

Summarise with:

The attribute target=»_blank» target="_blank" target="_blank" target="_blank" is a property of language HTML (HyperText Markup Language), which is used within the link tags (<a>), which tells the browser that the destination of the link should be opened in a new tab or window

This functionality is particularly useful when you want the user to visit another website or external content without leaving the page they are on.

It is widely used on websites that seek to improve the user's navigation and experience, allowing them to consult additional resources without losing their place on the original page. However, like any tool, it must be used judiciously and following good security and accessibility practices.

Syntax

Before applying this functionality, it is important to know your structure attribute within the HTML code. The syntax of the target=»_blank» attribute is very simple and is implemented directly in the links.

<a href="/en/»https://www.ejemplo.com»/" target="»_blank»">Visit Example</a>

In this example, clicking on the link will open the site indicated in the href attribute in a new browser tab, leaving the current page intact.

Functionalities and benefits

Use target=»_blank» offers a series of advantages for both the user and the web developer. The following are some of its main functionalities, as well as the benefits it brings to the browsing experience:

  • Improving the user experienceallows users to access additional content without closing or replacing the original page. This is useful, for example, when consulting references, legal terms, tutorials, etc.

  • Links to external siteswhen linking to external pages, it is preferable to open them in another tab to prevent the user from leaving the main website.

  • Security and attack preventionfor security reasons, it is recommended to combine target=»_blank» with rel=»noopener noreferrer» attributes to avoid vulnerabilities such as tabnabbing. This prevents the new tab from gaining control over the original window.

<a href="/en/»https://sitioexterno.com»/" target="»_blank»" rel="»noopener" noreferrer»>Open in new tab</a>

  • Facilitates parallel tasks: opening links in new tabs allows the user to perform multiple tasks at the same time, such as consulting documentation while completing a form, without losing progress.

 

Practical examples

To better understand their use, let's look at some of them real-life examples where target=»_blank» is effectively applied:

Link to a social network:

<a href="/en/»https://x.com/mi_perfil»/" target="»_blank»" rel="»noopener" noreferrer»>Follow me on X (Twitter)</a>

Link to a PDF document:

<a href="/en/»/documentos/manual.pdf»/" target="»_blank»">Download user manual</a>

Link to an external tool:

<a href="/en/»https://translate.google.com»/" target="»_blank»">Translate text</a>

These cases show how this functionality can be integrated both with external and internal resources, If you want to preserve the current content visible to the user.

Considerations

While target=»_blank» is a very useful tool, it is also important to be aware of some of the following precautions and ethical issues in their use. Some of the main ones are:

  • AccessibilitySome users may be disoriented if they are not informed that a link will open in a new tab. It is therefore recommended to add this information in the text of the link, for example: «Open in new tab».

  • Moderate usenot all links should be opened in this way. It should only be applied when it is considered that the user would benefit from keeping the current page open.

  • Functionality testingIt is essential to verify that behaviour is consistent across different browsers and devices, especially in mobile environments.

In summary, the target=»_blank» attribute is a widely used tool in modern web development, allowing to improve navigation and enrich the user experience. Used correctly, it offers flexibility, security and convenience. However, its implementation must be accompanied by good accessibility practices and awareness of its impact on usability.

Share in:

Related articles

Concurrence

Concurrency refers to the ability of a system to execute multiple tasks simultaneously. So concurrency is an essential feature that allows developers to create applications that can perform multiple operations at the same time, thus improving performance.

Internet Protocol

The Internet Protocol (IP) is the backbone of our interconnected global network. This protocol is a set of rules and procedures that dictate how data is sent and received over the internet. Every device connected to the internet

Apache

Today, we are going to talk about Apache. If you do not know what it is, in Euroinnova we are going to deepen in one of the most used web servers worldwide. We will explain its characteristics, operation, advantages, disadvantages and we will finish by talking about the

Machine learning

Machine learning is a branch of artificial intelligence that focuses on the development of algorithms and models that allow computers to learn from data and improve their performance on specific tasks. What is innovative about machine learning or

Scroll to Top